Fix keyboard navigation missing checkbox menuitem in user menu

The Test Mode toggle (input[type="checkbox"]) was skipped by arrow key
navigation because _menuItems() only queried a[href] and button elements.

- Extend _menuItems() to include input[type="checkbox"]
- Add role="menuitemcheckbox" and aria-checked in connectedCallback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pull/599/head
Marcelo Paiva 3 weeks ago
parent 1f86aa59df
commit 81d533b59e

@ -9,6 +9,10 @@ export default class extends HTMLElement {
this._menu.querySelectorAll('a[href], button').forEach((el) => { this._menu.querySelectorAll('a[href], button').forEach((el) => {
el.setAttribute('role', 'menuitem') el.setAttribute('role', 'menuitem')
}) })
this._menu.querySelectorAll('input[type="checkbox"]').forEach((el) => {
el.setAttribute('role', 'menuitemcheckbox')
el.setAttribute('aria-checked', el.checked.toString())
})
this.addEventListener('focusin', this._onFocusin) this.addEventListener('focusin', this._onFocusin)
this.addEventListener('focusout', this._onFocusout) this.addEventListener('focusout', this._onFocusout)
@ -59,7 +63,7 @@ export default class extends HTMLElement {
} }
_menuItems () { _menuItems () {
return Array.from(this._menu.querySelectorAll('a[href], button:not([disabled])')) return Array.from(this._menu.querySelectorAll('a[href], button:not([disabled]), input[type="checkbox"]'))
} }
_focusItem (idx) { _focusItem (idx) {

Loading…
Cancel
Save