Develop example of tabs design pattern

[ZoeBijl]

From @MichielBijl on January 13, 2016 12:32

The Tab Panel design pattern has been reviewed and is ready for development will be reviewed on February 29th.

Copied from original issue: w3c/aria#204

[ZoeBijl]

Work on this is in MichielBijl/tabpanel.

[ZoeBijl]

From @mcking65 on February 22, 2016 4:17

I do not see any record of a tabpanel pattern review, and I do see a lot of problems with the design pattern itself. This is on the APG agenda for 22 Feb.

[ZoeBijl]

From @mcking65 on February 22, 2016 4:43

Some of the substantive (non-editorial) Issues in the current tabpanel design pattern characteristics table include :

1. The only interaction model described is where selection follows focus in the tablist. With such tablists, as the user moves focus in the tablist, the active tab changes, the selection state moves with focus, and the content of the tabpanel changes. There are tablists where the active tab does not change as the user moves focus in the tablist. This is usually the case if an expensive operation, such as a pageload, is required to pull in the new tabpanel content. If selection does not follow focus, the user needs to press a key, such as enter or space, to change the active tab.
2. There are several unconventional key commands mentioned. CTRL+UP is captured by all Win screen readers so would not be useful to those users. ALT+Del, as described, suggests a destructive operation on an element that is not focused. I don't think that is a good idea. Supporting the del key when focus is inside the tablist would be better.
3. The issue of horizontal vs vertical orientation is not adequately addressed. ARIA 1.1 supports orintation on tablists. ARIA 1.0 did not.

[ZoeBijl]

Hmm, the wiki does list it as reviewed. I should've checked that. We'll discuss it today and we can move this along. I have left out all the ctrl support in my current version, as @jnurthen had said those are likely to be removed.

[mcking65]

Michiel's implementation of tabs where select follows focus is at:
http://w3c.github.io/aria-practices/examples/tabs/tabs.html

It is ready for review.