From 81d533b59ea76001e86e04e9e474649440ec5003 Mon Sep 17 00:00:00 2001 From: Marcelo Paiva Date: Thu, 26 Feb 2026 08:18:35 -0500 Subject: [PATCH] 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 --- app/javascript/elements/user_menu.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/javascript/elements/user_menu.js b/app/javascript/elements/user_menu.js index 9eb65970..1fbd3096 100644 --- a/app/javascript/elements/user_menu.js +++ b/app/javascript/elements/user_menu.js @@ -9,6 +9,10 @@ export default class extends HTMLElement { this._menu.querySelectorAll('a[href], button').forEach((el) => { 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('focusout', this._onFocusout) @@ -59,7 +63,7 @@ export default class extends HTMLElement { } _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) {