Existing Pattern for reference - https://www.toronto.ca/explore-enjoy/parks-gardens-beaches/toronto-island-park/
...
- Tab: When focus moves into the tab list, places focus on the active tab element . When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
- When focus is on a tab element in a horizontal tab list:
- Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab.
- Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab.
- When focus is on a tab in a tablist with either horizontal or vertical orientation:
- Space or Enter: Activates the tab
Home (Optional): Moves focus to the first tab.
- End (Optional): Moves focus to the last tab.
- If the tabs in a tab list are arranged vertically:
- Down Arrow performs as Right Arrow is described above.
- Up Arrow performs as Left Arrow is described above.
- If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.
...
- The element that serves as the container for the set of tabs has role tablist.
- Each element that serves as a tab has role tab and is contained within the element with role tablist.
- Each element that contains the content panel for a tab has role tabpanel.
- If the tab list has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labeling element. Otherwise, the tablist element has a label provided by aria-label.
- Each element with role tab has the property aria-controls referring to its associated tabpanel element.
- The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
- Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
- If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.
Note: Mentions of a vertical tab alignment, should be removed if the proposed design does not account for or allow this.
...