Customizer Menus: Accessibility: improve descriptive text and focus for reorder button

[designsimply]

/hat tip @afercia for the original report at ​https://github.com/voldemortensen/menu-customizer/issues/94

Some considerations about the Reorder button:

• needs a better focus style
• when pressed, there's no feedback about what's happening and about what user should do as next step
• when Reorder is pressed, the "Add Links" button is faded out but still focusable, either disable it or tabindex -1 until you're "Done"
• it's not clear the difference between "Move one level down" and "Move down" (same for "up"), consider to use a better descriptive text
• the "disabled" arrows are still focusable, announced and clickable (I think this was already reported)
• all the move arrows need a better focus style

[celloexpressions]

Note that this is modeled directly off of widgets, so we should be able to improve these issues there as well when we fix them.

[afercia]

About the reorder button specifically, here's some feedback by Michelle DeYoung from the accessibility testers group:

it is not very understandable for a non-sighted user to hear “Reorder” and “Done” without knowing they have to navigate back to the menu itself, and without instruction of what and how to reorder. Once back in the menu the reorder buttons are nicely done and announced clearly as to what the action is.

Would make sense to add some instruction/description for the Reorder button and more descriptive labels.

[afercia]

First pass:

• give the two spans a semantics of "button" in order to make them act like buttons and provide more descriptive aria-label and description
• use wp.a11y.speak() to inform users the "reorder mode" is enabled/disabled

Would greatly appreciate some feedback about better wording for the sentence

"When in reorder mode, additional controls to reorder menu items will be available in the items list above."

Tested in Firefox+NVDA, Chrome+ChromeVox, IE8+JAWS 15.

[celloexpressions]

Looks good to me.

[ocean90]

In 33074:

Customizer: Improve descriptive text and focus for menu items reorder button.

props afercia.
fixes #32725.

[afercia]

Just noticed: the id reorder-items-desc must be unique per menu. Quick patch incoming.

[afercia]

Avoid duplicate IDs.

[afercia]

Sorry there's one more thing, my bad. The ARIA role presentation can't be used on buttons: ​http://www.w3.org/TR/wai-aria/roles#presentation

If an element with a role of presentation is focusable, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics, in order to ensure that the element is both understandable and operable.

Additionally, it's also invalid code. So we should use a more standard solution and update the aria-label via JavaScript, see updated patch and please ignore the previous .2

[afercia]

Avoid duplicate IDs and remove role presentation from the reorder button.

[obenland]

@ocean90, could you get this over the finish line?

[ocean90]

In 33339:

Customizer: Avoid duplicate IDs and remove role presentation from menu items reorder button. Follow-up to [33074].

props afercia.
fixes #32725.