Menu Customizer: UI controls without text

[afercia]

Some UI controls really need some text or aria-label. See screenshot below, tested with Firefox+NVDA. Most notably the "toggles" are all read out as "blank" (meaning there's no text to read out).
Both the toggles and the "Add Menu Item" need also a reference to "what" they toggle and "which" item they add. One way to solve this could be using aria-describedby.

Side note: each item is read out as "list with 1 item" because marked up as a DL, as pointed out in a separate ticket/GitHub issue.

[afercia]

Something weird is going on with the "toggle" buttons. They do have some text (_e( 'Toggle' )) but NVDA reads out just "blank". I guess that's because their computed size is 0px x 0px so they're treated as "invisible" elements. Investigating.

[afercia]

First pass. Confirmed: buttons with 0 computed size are "invisible" to NVDA. I recall a similar issue with Safari when testing Press This. Didn't test in JAWS or other AT but I guess we should always avoid elements with no size.

In the proposed patch, feel free to change the CSS part as long as buttons have a size. About the markup part, instead of adding new text specifically for screen readers, added aria-describedby (which gets read out after the buttons text) to reference existing elements. Open to suggestions and feedback. See in the screenshot below, now controls announce the items they're related to.

Side note: definition lists and headings add a lot of noise here, current markup isn't ideal and would need to be simplified but this issue is out of the scope of this ticket.

[afercia]

Buttons have now a size after r32859.

That fixes the CSS part and now they're no more read out as "blank" but as "Toggle button heading level 4". They still miss some more descriptive information: "Toggle... what?"

[celloexpressions]

Add menu item buttons are handled by #32724. For the available menu item section toggles, 32715.diff​ should work.

[celloexpressions]

Ready to be reviewed for commit.

[ocean90]

Toggle %s section can't be translated and should be avoided.

[afercia]

Refreshed patch. Tried to find a good balance between translation best practices and avoiding excessive punctuation being read out by screen readers. The first part of the strings should be built in a way that can be translated independently. About the second part, initially tried with parenthesis following @ocean90 suggestion in ticket 32724 but then decided for a colon that would be less disturbing when read out by screen readers (it actually depends on "vebosity" user settings).
'Toggle section: %s'

[afercia]

Additionally, the toggle section buttons would need an aria-expanded attribute to be dynamically updated. Not sure if there's already a ticket for that. Also, I'd recommend to use role="presentation" on the h4 headings since we don't need screen readers read out that information. All we need is something like:

Toggle section: Posts button collapsed

then when users activate the button they will hear:

expanded

and the content inside the panel is going to be changed in a list in #32724 so it would be something like:

List with {nn} items
Add to menu: Hello World (post)
etc.

[celloexpressions]

@afercia: could you prepare an updated patch to account for aria-expanded and role="presentation"? @ocean90: could you confirm whether Toggle section: %s as proposed would be acceptably translatable?

[afercia]

Updated patch. As pointed out in Slack, see ​https://wordpress.slack.com/archives/core-customize/p1436835284000563, this requires to patch accordion.js.
We should try to be HTML agnostic and detect if there's any element intended to act as a specific toggle control. I'd say to just look for the first element with aria-expanded. Open to suggestions.

In customize-nav-menus.js tried to store some elements to avoid getting them multiple times.

Reworked the arrow indicator. TL;DR noticed a weird bug in NVDA: it didn't announce "expanded/collapsed". Turned out it was caused by the CSS generated dashicon which is currently overlaid on the button, see screenwhot:

When its content changes from \f140 to \f142 NVDA gets someway confused and doesn't announce the "expanded/collapsed" aria attribute change of the underlying button. Tried several things and ended up putting the arrow inside the button in a span with role=presentation. No visual changes.

[afercia]

Refreshed patch uses aria-hidden=true instead of role=presentation to hide the arrows from AT.

[westonruter]

refresh patch

[westonruter]

@afercia: There was a conflict with the patch and I had to refresh it. The conflicts were around the accordion-section-title elements. Can you confirm that my resolved 32715.5.diff​ patch is still good?

[westonruter]

Refresh patch again; hide #available-menu-items .cannot-expand .accordion-section-title > button

[westonruter]

@afercia: I had to refresh the patch yet again. I also noticed that the toggle indicator was showing even when there are no items, so I added the #available-menu-items .cannot-expand .accordion-section-title > button selector to display: none.

Please verify that my changes are correct, and if so, add the commit keyword.

[afercia]

@westonruter looks like there are some PHP notice, they're hidden so you can't see them: $tax is now undefined

[afercia]

Also, available menu items panel don't expand anymore on scroll and I can't see the spinners. See JS error in the screenshot. This seems to happen also without the patch applied.

[westonruter]

Replying to afercia:

Also, available menu items panel don't expand anymore on scroll and I can't see the spinners. See JS error in the screenshot. This seems to happen also without the patch applied.

This was a regression from #32708 which was fixed in [33392].

[westonruter]

Replying to afercia:

@westonruter looks like there are some PHP notice, they're hidden so you can't see them: $tax is now undefined

Good catch! I should have seen that. I've fixed the problem in 32715.7.diff​. Anything else you see?

[afercia]

Fix available menu items search spinner

[afercia]

About the available menu items panel, seems everything is working and announced nicely, see screenshot below. The only thing I've noticed is the search spinner not showing up anymore, both when doing a search and when scrolling search results. 32715.8.diff​ should fix it.

See how noise is reduced now: no more "heading 4" announced. just the buttons with a clear and short description. Also, when clicking a button, the aria-expanded state gets announced.

There's one more place to improve though: the "Edit Menu Item" buttons don't say anything about the item to edit, see screenshot below. We should try to add some info with similar techniques used for other controls.

[afercia]

For the "Edit menu item" and "Remove Menu Item" buttons I'd propose to do the same thing already done for the available menu items "Add" buttons, see 33151:

__( 'Edit menu item: %1$s (%2$s)' )
and
__( 'Remove Menu Item: %1$s (%2$s)' )

where 1: Title of a menu item, 2: Type of a menu item.
See proposed patch.

[afercia]

For the Edit Menu Item and Remove Menu Item buttons

[afercia]

merges the two last patches

[afercia]

Refreshed patch merges 32715.8.diff​ and 32715.edit-and-remove-buttons.patch​ also adds a couple of JavaScript aria-hidden attributes switching needed for screen readers.

Worth noting when removing elements from tab order using tabindex="-1" screen readers can still read out these elements when users use arrows to move through elements. In these cases in order to completely hide content from assistive technologies, we need also aria-hidden="true".

Would propose for review and commit consideration.

[ocean90]

In 33413:

Customizer: Add missing text or labels to some nav menu UI controls.

props afercia, celloexpressions, westonruter.
fixes #32715.

[netweb]

Unit test `Test_WP_Customize_Nav_Menus::test_available_items_template` broke as a result of r33413

e.g. Travis CI Job ​https://travis-ci.org/aaronjorbin/develop.wordpress/jobs/72523101

[SergeyBiryukov]

In 33424:

Update Test_WP_Customize_Nav_Menus::test_available_items_template() after [33413].

fixes #32715.

[ocean90]

In 33460:

Customizer: Make a string translatable, see [33413].

see #32715.