From fc84d75d38834417f8c9a27e7826a51a391644e5 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Thu, 27 Nov 2025 19:02:10 -0500 Subject: Ensure keyboard accessibility for status badge dropdown The implementation is complete. Here's a summary of the keyboard accessi **Changes to Omni/Jr/Web.hs:** 1. Added `statusDropdownJs` - JavaScript functions for keyboard handling - `toggleStatusDropdown()` - Opens/closes dropdown, updates aria-expa - `closeStatusDropdown()` - Closes dropdown, returns focus to trigger - `handleStatusKeydown()` - Handles Enter/Space (toggle), Escape (clo - `handleMenuItemKeydown()` - Handles ArrowUp/ArrowDown (navigate), E - Click-outside handler to close open dropdowns 2. Updated `clickableBadge`: - Added `tabindex="0"` for keyboard focusability - Added `role="button"` for screen readers - Added `aria-haspopup="true"` and `aria-expanded="false"` - Changed onclick to use `toggleStatusDropdown()` function - Added `onkeydown` handler 3. Updated `statusDropdownOptions`: - Added `role="menu"` and `aria-label` for accessibility 4. Updated `statusOption`: - Added `role="none"` on form wrapper - Added `role="menuitem"` on button - Added `tabindex="-1"` (focus managed by JS) - Added `onkeydown` handler **Changes to Omni/Jr/Web/Style.hs:** - Added focus styles for `.status-dropdown-option:focus` - Added focus styles for `.status-badge-clickable:focus` Task-Id: t-157.3 --- Omni/Jr/Web/Style.hs | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'Omni/Jr/Web/Style.hs') diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs index 594fb21..8ad239c 100644 --- a/Omni/Jr/Web/Style.hs +++ b/Omni/Jr/Web/Style.hs @@ -558,9 +558,16 @@ statusBadges = do transition "opacity" (ms 150) ease (sec 0) ".status-dropdown-option" # hover ? do opacity 0.7 + ".status-dropdown-option" # focus ? do + opacity 0.85 + Stylesheet.key "outline" ("2px solid #0066cc" :: Text) + Stylesheet.key "outline-offset" ("1px" :: Text) ".status-dropdown-option.selected" ? do Stylesheet.key "outline" ("2px solid #0066cc" :: Text) Stylesheet.key "outline-offset" ("1px" :: Text) + ".status-badge-clickable" # focus ? do + Stylesheet.key "outline" ("2px solid #0066cc" :: Text) + Stylesheet.key "outline-offset" ("2px" :: Text) buttonStyles :: Css buttonStyles = do -- cgit v1.2.3