A11y: add attribute hints for `role="tab"` and `role="tabpanel"`

[theetrain]

Describe the problem

It would be nice to have a11y hints when constructing a tabbed interface via role="tab" and role="tabpanel".

Describe the proposed solution

Complete example: https://svelte.dev/repl/cb3364c7b97842be901b42dd2d597fe5?version=4.2.19

Requirements to satisfy role="tab":

• Tab must include aria-controls that match the id of its respective tab panel.
• Tab must include aria-selected to indicate selected tab.
• Tab must include 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.
• If element containing 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":

• Tab panel must include aria-labelledby to match the id of its respective tab.
• Panel must include 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

[fcrozatier]

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"

[fcrozatier]

@theetrain You might be interested in the Group mixin which allows you to effortlessly have all this implemented and reusable for your tabs, accordions, toggle groups etc.