Improve the accessibility of the adaptive panels, specifically the tabs aspect.
Keyboard tab navigation
Although previously all tabs and content could be reached using a keyboard, the design pattern wasn't ideal - a user would need to tab through all tab items in order to access content for a particular tab panel.
To address this, when a user focuses on a tab item, the next item in the tab order is now within the tab panel itself (rather than an adjacent tab).
In order to navigate between tabs items in the tab list:
The left arrow now moves focus to the previous tab and activates its tab panel. If focuses is already on the first tab, focus is moved to the final tab in the list
The right arrow now moves focus to next tab and activates its tab panel. If focuses is already on the final tab in the list, focus is moved to the first tab
If tab orientation is set to vertical, the up arrow mimics the left arrow behaviour and down arrow mimics the right arrow behaviour
Additional changes
Added logic to set aria-selected to true or false on tab items depending on whether or not they are selected
Added aria-controls to tab items and ensured attribute value was set as an ID on tab panels so the association between tab and tab panel is clear
Removed aria-hidden from tab controls - this never appeared to be removed when switching between tab / accordion mode. Modified existing css to show / hide this element instead
Added aria-orientation to tab controls depending on whether tabs are vertical or horizontal
Removed outline:none from tab items to ensure that tab controls have a visible focus state by default
Background / motivation
Improve the accessibility of the adaptive panels, specifically the tabs aspect.
Keyboard tab navigation
Although previously all tabs and content could be reached using a keyboard, the design pattern wasn't ideal - a user would need to tab through all tab items in order to access content for a particular tab panel.
To address this, when a user focuses on a tab item, the next item in the tab order is now within the tab panel itself (rather than an adjacent tab).
In order to navigate between tabs items in the tab list:
Additional changes
aria-selectedtotrueorfalseon tab items depending on whether or not they are selectedaria-controlsto tab items and ensured attribute value was set as an ID on tab panels so the association between tab and tab panel is cleararia-hiddenfrom tab controls - this never appeared to be removed when switching between tab / accordion mode. Modified existing css to show / hide this element insteadaria-orientationto tab controls depending on whether tabs are vertical or horizontaloutline:nonefrom tab items to ensure that tab controls have a visible focus state by default