Automattic/_s — pull request #540 by chrisdc (2014-07-01 22:10:32+00:00)
Title: Make dropdown menus accessible by tabbing

Hello, following on from issue #523 I'm submitting a possible javascript solution to making the dropdown menus in _s tabable (currently dropdowns aren't visible when you tab through the child links). As it's quite a big addition I've broken it down below:

## Summary of changes

### navigation.js

My additions to navigation.js attempt to replicate [this code](https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfourteen/js/functions.js#L106-110) from Twenty Fourteen, only without the use of jQuery. When a link in a menu is focussed the class `.focus` is added to the ancestors of the link, and when blurred it's removed again. This can be targeted with css to keep the appropriate menus visible. Thanks to @joshmcrty for input on combining this with the existing code.

**Note** I did include one slight difference from the Twenty Fourteen code: The original adds ` .focus` to every ancestor all the way up to the HTML tag, whereas I have included checks to only include li elements within the current menu systems.

### style.css

To every `:hover` selector in the menu section I've added an equivalent `.focus` selector, reflecting the fact that we want tabbing through menus to be visually as close as possible to using the mouse.

## Limitations

Currently this code uses the variable `menu` previously defined in the navigation toggle code. This is efficient, but does make it relativley complicated for theme authors to add tabbing support to multiple menus. If desired I can adjust this code to work from a separate array of menu IDs.