skyglobal/web-toolkit — pull request #137 by fulljames (2014-02-27 11:14:05+00:00)
Title: Accessibility improvements for in-page nav component

This pull request aims to address known accessibility issues in the in-page nav component. To provide a more logical behaviour when using a keyboard to navigate or browsing the site with a screen reader, the main change has been to stop moving tab label links between the main (visible) list and the sub (dropdown) list. Instead, the full list of tabs is replicated in both places and the sub list is hidden from screen readers with the ````aria-hidden```` attribute. (http://www.html5accessibility.com/tests/hidden2013.html).

The component interface is the same but there are changes to the internals:

* On init an index array of all tabs is created with their status (selected, visible, etc) and stored references to the main and sub list label elements.
* Available screen space is measured and tabs in the main list that would overflow are marked as hidden in the index array
* Tab labels in both lists are given a ````dropped```` class if they should be (visually) hidden
* On keyboard navigation across the main list, the blur and focus events are used to give temporary visibility to any labels hidden due to overflow, with other labels being hidden as required to accomodate them.
* On tab change the display is recalculated
* Any selected tab will always be visible in the main list regardless of its position, and DOM order will always be consistent

Minimal changes are required to the markup for instances of this component:

* Move ````dropdown-tab-select```` div outside of main tab label list (also a validation fix)
* Add ````aria-hidden``` attribute to the "more tabs" link to hide it from screen readers.

If this can go live on a temp. URL we can test it further in the Help site.