Opened 5 years ago
Closed 3 years ago
#2409 closed change (fixed)
Make tabs on new options page more accessible
Reported by: | greiner | Assignee: | greiner |
---|---|---|---|
Priority: | P2 | Milestone: | |
Module: | User-Interface | Keywords: | a11y |
Cc: | Blocked By: | #1524 | |
Blocking: | #2407 | Platform: | Unknown |
Ready: | yes | Confidential: | no |
Tester: | Unknown | Verified working: | no |
Review URL(s): |
Description (last modified by greiner)
Background
In the current version of the new options page (see #1524) interaction with tabs is only possible using the cursor. Therefore we should implement standardized techniques to support screen readers and enable keyboard interactions.
What to change
Set attributes
- Mark the navigation bar as such using the <nav> element
- Mark the tab list as such using the role="tablist" attribute
- Mark the tabs as such using the role="tab" attribute
- Mark the tab contents as such using the role="tabpanel" attribute
- Associate tabs with tab contents using the aria-controls and aria-labelledby attributes
- Make tabs focusable by replacing them with focusable elements and/or by setting the tabindex attribute
Handle keys
- Switch between tabs when pressing Left, Up, Right or Down while focus is on tab
- Make sure that only the active tab is in the tab order
Updating attributes
- Mark selected tab with the attribute aria-selected and update its value when switching to a different tab
- Mark tab content containers with the attribute aria-hidden and update its value when switching to a different tab
Note that these changes should not only be applied to tabs in the sidebar but also to the tabs under the "Blocking lists" section in the Advanced tab.
Change History (7)
comment:1 Changed 5 years ago by greiner
- Blocked By 1524 added
comment:2 Changed 4 years ago by greiner
- Description modified (diff)
- Tester set to Unknown
comment:3 Changed 4 years ago by greiner
- Description modified (diff)
- Owner set to greiner
comment:4 Changed 4 years ago by greiner
- Description modified (diff)
comment:5 Changed 4 years ago by greiner
- Description modified (diff)
comment:6 Changed 3 years ago by abpbot
A commit referencing this issue has landed:
Issue 2409 - Improved accessibility of tabs in options page
comment:7 Changed 3 years ago by greiner
- Resolution set to fixed
- Review URL(s) modified (diff)
- Status changed from new to closed
Note: See
TracTickets for help on using
tickets.
Updated ticket based on WAI-ARIA authoring practices.