An example how to setup an accesible HTML tabs UI pattern in cables.gl

This should enable all the required accessible behaviours documented here

• MDN documentation of tabpanel role
• ARIA guide to Tabs UI patten
• IBM Carbon guide to tab UI
• IBM carbon reference implementation of tabs I did accessibility testing against

Notes

DOM structure and roles

• Each tab button has the 'tab' role
• The tab buttons are contained in a parent with the 'tablist' role
• The tab panels each have a parent for their content with the 'tabpanel' role

Keyboard events

• When the tab buttons have keyboard focus then the user should be able to use arrow keys to navigate between them. Additionally they should be able to press tab to set keyboard focus to the actual content.
• To facilliate this the tablist parent has event listeners for the left arrow, right arrow and tab key.
• The tab buttons will bubble any of these events up to the tablist parent, which saves putting the listeners on every tab button
• These event listeners have 'prevent default' set to stop any regular navigation or tab behaviour from the browser with those keys

Visibility and Element re-creation

• Tab panel visibility is controlled by the visible input pin. This sets CSS display none & Visible hidden.
• This also hides the content from accessible technology
• Ensure all HTML elements have 'Set output changed on input changed' as FALSE. Because otherwise the changes in the DOM can propagate to make keyboard focus move off the intended element (Because that element is recreated even though

Setting keyboard focus

• In the reference material it says this is case you SHOULD set keyboard focus
• In particular the ARIA authoring practices guide says you should take over the default TAB behaviour.
• When the focus is on a TAB button in the tablist the user uses the CURSOR KEYS to navigate this list and presses the TAB key to move focus to the tab content.
• As opposed to normally using the TAB key to select buttons and space to select them. (Unless the tab content wouldn't load straight away but in this case it does).
• Specifically the ARIA guide says that TAB key "moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable"
• Because the first element inside my tabpanels is text I had it move the focus to the tabpanel itself
• But if your first element is itself tab selectable (e.g a link or a button) it should select that

Aria-Selected

• Each tab button needs to have the aria-selected attribute
• Which should be true then that tab is selected
• This enables screen readers to explain which tab is selected when navigating the tablist.
• Use the SetAriaSelected op

Visual and Styles

Don't forget visual accessibility. Specifically:

• Ensure tab buttons have a hover change and cursor change
• Ensure selected tab button has clear visual difference from non-selected (and also disabled if you need that, see the IBM carbon examples)

Carbon design theme from IBM under apache 2.0 license https://github.com/carbon-design-system/carbon/blob/main/LICENSE