FlagshipWP/compass — pull request #36 by RRWD (2014-12-11 10:08:08+00:00)
Title: Fixes keyboard accessibility of responsive menu

Responsive menu now gets focus after selecting button id="responsive-menu-button”. See issue #32.
Plus changes in the aria attributes.
Kudos to @afercia for rewriting the mobileNav function and adding to the discussion.

**Explanation and discussion:**

The sidebar menu is generated with a JavaScript jQuery plugin: "Sidr".
https://github.com/artberri/sidr

Basically, it clones the main menu and appends the cloned markup to the end of
the page, before `

`.

Side note: this also means that in the DOM you will have duplicate IDs and not
valid code. The markup will be "valid" but the actual markup in the DOM won't.
Unless the compass authors will use the specific Sidr option "renaming" set to
true. Then I guess it will require some CSS refactoring. See:
http://www.berriart.com/sidr/#documentation

So the main menu is cloned and appended to the body, you will have the button at
the beginning of the page and the menu at the bottom of the markup.
This is not ideal for accessibility, because there's no logic natural tab order
between elements.

The only way I can think of handling the focus, is building a sort of
"mini-focus-manager" in JavaScript, to move focus to the the proper places,
depending on user actions.

**Basically:**
* press the button
* menu opens
* focus is moved to the menu container which now as tabindex="0" and
role="navigation". NVDA will read "navigation landmark" and the list of links.
* tab through the menu links and...
* when tabbing forwards and you tab away from the last link, focus is moved back
to the toggle button
* when tabbing backwards and you tab away from the first link, focus is moved
back to the toggle button
* also, when you open the menu the first time, the menu container is focused, if
you tab backwards *now*, the button will be focused again

Changed recommend to use aria-expanded for the toggle button, instead of
aria-pressed. aria-expanded = "Indicates whether the element, or another
grouping element it controls, is currently expanded or collapsed."

Removed role=button on the button... it's already a button and already has the
semantics it needs.

**Still to-do / discuss**

The menu toggle button has no text, it should use some translatable text hidden
with "screen-reader-text". WordPress should pass some translatable string from
PHP to JS using wp_localize_script() in the theme. Then the text should be
updated with JavaScript depending on the menu state: "Expand menu" / "Collapse
menu".

Move the toggle button out of the header with role="banner":
Don't want to hear "banner landmark toggle button" read out by screen readers,
it's confusing and probably not semantic.

Consider the use of the attribute aria-controls for the toggle button (browser
support is no so great).