Enhance Tabs Design Pattern to Provide Guidance on Panel Focusability

[mcking65]

Add a note to the keyboard subsection of the
Tabs Design Pattern
that provides guidance regarding when it is advisable to make the tabpanel focusable, e.g.:

1. The panel does not contain any focusable elements.
2. Focusable elements are not near the top of the content.
3. The panel content is scrollable.

[ahuth]

We're trying to wrap our heads around why the tabpanel should be focusable when there are no focusable elements within it. Can anyone shed light on why that would be? Not sure of the accessibility benefits of focusing a non-interactive tab panel.

Thanks!

[accdc]

Hi,
This was added to account for cases where a tab panel may not include any focusable interactive elements, or if a large amount of textual content appears at the beginning of the tabpanel and the first focusable active element is at the end, such as a license agreement form where the Agree button is at the very end.

If the tabpanel is not focusable, then sighted keyboard-only users will not be able to tab to the tabpanel content and read it from the beginning on down, but will instead jump to Agree and entirely skip all of the main content. This is also helpful for screen reader users who may wish to move directly from the focused expanded Tab and be placed at the beginning of the newly rendered Tabpanel content, instead of jumping passed it or moved to the end of it unexpectedly.

[ahuth]

That makes perfect sense. Thank you @accdc!

[mcking65]

Adding to carousel project because carousels are another pattern where having focusable tabpanels can be useful. In particular, some carousels enable left/right arrow keys to work as hotkeys for the prev/next buttons, and in these cases, the panel would need to be focused when the arrow keys are pressed.

[amychenx]

Can the tabpanel focusability guidance be simplified to let the author decide whether to place focus on the tabpanel? Then tabpanel focusable can be an optional yes or no. (The author can then decide whether focus on the tabpanel is needed depending on the general length and type of content displayed. Guidance can be provided on when focus should be enabled for the tabpanel.)

Content inside the tabpanel is not always controlled by the implementor of the tab component. The same set of tabs might have different tabpanel content where sometimes the content contains focusable elements and sometimes it does not. The behavior of focus on the tabpanel would then appear to be different depending on the specific content within the tabpanel if the guidance is followed for "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."

Making focus on the tabpanel an option to be determined by the author would give the author control instead of having focus on the tabpanel being determined by any content that might be displayed within the tabpanel.