[Tabs] Can't focus tabpanel via keyboard if it doesn't contain focusable items

[jakublamprecht]

Bug Report

Current Behavior
When tabbing through Tabs component, the tabpanel content should be reachable via keyboard. If the content does not contain any focusable elements, then the user cannot reach the content of active tab. To make sure that's not the case W3C suggests adding tabindex="0" on tabpanels:

https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

Expected behavior/code
User can reach tabpanel content via key sequence.

Environment

• Core Components version 2.3.0

Possible Solution
Add tabindex="0" on tabpanels.

[richardhand]

@jakublamprecht - this makes sense based on the guidelines. Is there anything that would block you from simply creating a pull request as it's just a one-liner? We're trying to encourage contributions for small fixes such as this one. You can also see our Contributing Guidelines for getting started - it includes info on signing the Adobe CLA. Pull requests should ideally be made against the development branch. Thanks!

[richardhand]

@majornista - I think your expertise may be able to help us out here. Do you see this recommendation of setting tabindex=0 to each tabpanel for allowing navigation to a tabpanel from a tablist as suitable? To me it isn't ideal as we're making a normally non-interactive element interactive and creating an artificial tab block for users that don't use screen readers, particularly if the panel contains one or more focusable elements.

As background, the AEM Core Tabs component implements the WAI-ARIA Tabs design pattern [0]. tabpanels are auto-activated as the tablist is navigated (with left, right, up, down, home, end keys), rather than requiring an enter key for panel activation. Example at [1].

[0] https://www.w3.org/TR/wai-aria-practices/#tabpanel
[1] http://opensource.adobe.com/aem-core-wcm-components/library/tabs.html

[richardhand]

Code is merged to master and will be available in the upcoming 2.6.0 Release.