Various issues with Tabs

[cstrobbe]

When using a tabbed interface, the expected keyboard interaction is as follows:

• Pressing Tab moves focus to the tabbed interface. Pressing Tab moves focus away again. This currently works correctly.
• Pressing the right and left arrows moves focus between the tabs. This currently works correctly.
• Pressing Enter or Space opens or activates the tab if receiving focus did not open it already. At the moment however, Space does nothing, whereas Enter takes you to a dummy page. It is not clear whether this is due to missing keyevent listeners or due to the fact that there is no content in the tabs, so the intended behaviour is not fully demonstrated. However, since keyboard interaction does not change the values of the aria-selected attributes (or the tabindex=-1), I assume there is not yet any keyboard support for changing the active tab.
• Pressing Home should move focus to the first tab. It looks as if this is currently not implemented.
• Pressing End should move focus to the last tab. It looks as if this is currently not implemented.

I also have a few comments about the elements and WAI-ARIA attributes;

• There is no need for a nav to wrap around the Tabs. Due to nav, screen readers announce a navigation landmark, which is not the expected behaviour.
• There is no aria-controls attribute in the a elements with role="tab".
• The content of each of the tabpanels is not in a div or other element with the attributes role="tabpanel" and aria-labelledby="ID" (with ID referring to the corresponding a with role="tab".

For an example, see Example of Tabs with Manual Activation at the W3C.

[wistephens]

duplicate of #38