diff options
| author | Ben Sima <ben@bensima.com> | 2025-11-27 19:02:10 -0500 |
|---|---|---|
| committer | Ben Sima <ben@bensima.com> | 2025-11-27 19:02:10 -0500 |
| commit | fc84d75d38834417f8c9a27e7826a51a391644e5 (patch) | |
| tree | 7d1294279c41d72ecc64347fdfb85968ca7910f0 /Omni/Jr/Web | |
| parent | ebc281f90389da3b064bb14888e7c4f81ae4df17 (diff) | |
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
Diffstat (limited to 'Omni/Jr/Web')
| -rw-r--r-- | Omni/Jr/Web/Style.hs | 7 |
1 files changed, 7 insertions, 0 deletions
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 |