Admin menu: improve accessibility when collapsed

[afercia]

Screen reader users may activate the "Collapse menu" item maybe without knowing for sure what that does but that control is announced by screen readers and can be activated, so there's always the chance someone will give it a try. While the menu visual change won't make any difference for totally blind users (though screen readers are used also by low vision users), the information available for Assistive Technologies will change.

Turns out that when the menu is collapsed, the first level menu item is hidden with display: none and so it's hidden from Assistive Technologies too. At this point there's only a dashicon, no text to be read out.

Here's how NVDA with Firefox reads out the menu, example limited to the "Posts" menu group:

Expanded menu:

Posts subMenu  link
list with 4 items
All Posts link
Add New link
Categories link
Tags link
out of list

Collapsed menu:

subMenu  link <-- the first level item is now just a dashicon, no text to be read out
list with 5 items <-- but only 4 are focusable
All Posts link
Add New link
Categories link
Tags link
out of list

To keep it simple, I'd propose to avoid any JavaScript and change the CSS part. No more display: none but a very simple off-left rule, as far as I see there's no reason to use the full screen-reader-text rule here.
Additionally, the first not-focusable item in the fly-out menu should be hidden from AT with an aria-hidden=true attribute.

[afercia]

Proposed patch is a first pass. The collapsed menu now should be read out by screen readers in the same exact way they do when it's expanded. Would like to propose this to be tested by the accessibility testers group. I've quickly tested with NVDA + Firefox, and here's the result:

Collapsed menu with patch applied:

Posts subMenu  link <-- now there's text to be read out
list with 4 items <-- notice the aria-hidden item won't even be counted
All Posts link
Add New link
Categories link
Tags link
out of list

[rianrietveld]

Credits to @badeyes for finding and reporting this issue :-)

[rianrietveld]

Test results from @gab-nino on this patch:
I was able to activated the collapse menu option. VoiceOver can read the text inside the span of the collapse-button div. On the contrary, the background image of the same button, was totally invisible for the screen reader.
What I could not do is to open the menu again. The background image has not action attached to it. There is no a way to show the menu again.
I prepared a small video to show the behavior since is much easier to see that to explain it with words.https://youtu.be/hse7BycncjY

Question Rian:
Is this ticket related to #29958 and should this patch and 29958.6.diff both be implemented?

[afercia]

Replying to rianrietveld:

Is this ticket related to #29958 and should this patch and 29958.6.diff both be implemented?

This patch can go separately, it's not about the collapse control but it's about the menu collapsed state. Notice the menu auto-collapses under 960px viewport size so we should take care of accessibility even if users are not able to intentionally activate the collapse control. BTW #29958 would need a refresh...

[afercia]

Additionally, when the menu is folded (but not when auto-folded in responsive view) the current menu item should have an aria-haspopup="true" attribute like all the other menu items since it does have a fly-out sub-menu. Should probably be added and removed with JavaScript depending on the menu collapsed/expanded status.

[afercia]

Will create a separate ticket for the aria-haspopup="true". Tested again the current patch with latest Firefox+NVDA and Chrome+ChromeVox, would propose for commit consideration.

[wonderboymusic]

Why only -999px?

[afercia]

Replying to wonderboymusic:

Why only -999px?

Thinking the menu is just 300px wide 36px wide when collapsed. Do you want to add one more byte, just in case? No objections of course.

[wonderboymusic]

In 32946:

Admin menu: improve accessibility when collapsed.

Props afercia.
Fixes #32346.