Open theetrain opened 5 days ago
More precisely the tabpanel
only needs tabindex="0"
when it doesn't contain a focusable element:
When the tabpanel does not contain any focusable elements or the first element with content is not focusable, the tabpanel should set tabindex="0" to include it in the tab sequence of the page.
Also up/down arrows should move the focus to the previous/next tab if aria-orientation="vertical"
Describe the problem
It would be nice to have a11y hints when constructing a tabbed interface via
role="tab"
androle="tabpanel"
.Describe the proposed solution
Complete example: https://svelte.dev/repl/cb3364c7b97842be901b42dd2d597fe5?version=4.2.19
Requirements to satisfy
role="tab"
:aria-controls
that match theid
of its respective tab panel.aria-selected
to indicate selected tab.onkeydown
event listener such that left and right arrow keys can switch between tabs (up to the developer whether to immediately select tab upon switch); and up and down arrow keys should blur focus and scroll up or down the page respectively.role="tab"
is inherently non-interactive, it must include necessary attributes for keyboard accessibility or switch to an interactive element such as<button>
or<input type="radio" />
Requirements to satisfy
role="tabpanel"
:aria-labelledby
to match theid
of its respective tab.tabindex="0"
to ensure it is the next focusable element after tabs.Reference: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
Importance
nice to have