WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#32715 closed defect (bug) (fixed)

Menu Customizer: UI controls without text

Reported by: afercia Owned by: westonruter
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch commit
Focuses: accessibility, javascript Cc:

Description

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.

https://cldup.com/H690t9OfmO.png

Attachments (11)

32715.patch (5.9 KB) - added by afercia 6 years ago.
32715.diff (2.9 KB) - added by celloexpressions 6 years ago.
32715.2.diff (3.0 KB) - added by afercia 6 years ago.
32715.3.diff (7.0 KB) - added by afercia 6 years ago.
32715.4.diff (7.0 KB) - added by afercia 6 years ago.
32715.5.diff (7.3 KB) - added by westonruter 6 years ago.
refresh patch
32715.6.diff (6.7 KB) - added by westonruter 6 years ago.
Refresh patch again; hide #available-menu-items .cannot-expand .accordion-section-title > button
32715.7.diff (6.7 KB) - added by westonruter 6 years ago.
32715.8.diff (7.1 KB) - added by afercia 6 years ago.
Fix available menu items search spinner
32715.edit-and-remove-buttons.patch (1.8 KB) - added by afercia 6 years ago.
For the Edit Menu Item and Remove Menu Item buttons
32715.9.diff (10.1 KB) - added by afercia 6 years ago.
merges the two last patches

Download all attachments as: .zip

Change History (41)

#1 @afercia
6 years ago

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
6 years ago

#2 @afercia
6 years ago

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.

https://cldup.com/y12OaBRSgt.png

#3 @afercia
6 years ago

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?"

#4 @celloexpressions
6 years ago

  • Keywords has-patch added; needs-patch removed

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

#5 @celloexpressions
6 years ago

  • Keywords commit added

Ready to be reviewed for commit.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


6 years ago

#7 @ocean90
6 years ago

  • Keywords needs-refresh added; commit removed

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

@afercia
6 years ago

#8 @afercia
6 years ago

  • Keywords needs-refresh removed

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'

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


6 years ago

#10 @afercia
6 years ago

  • Keywords needs-refresh added

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.

#11 @celloexpressions
6 years ago

@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?

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


6 years ago

@afercia
6 years ago

#13 @afercia
6 years ago

  • Keywords needs-refresh removed

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:

https://cldup.com/_oD0VKRXzU.png

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
6 years ago

#14 @afercia
6 years ago

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

This ticket was mentioned in Slack in #core by obenland. View the logs.


6 years ago

#16 @obenland
6 years ago

  • Owner set to westonruter
  • Status changed from new to assigned

@westonruter
6 years ago

refresh patch

#17 @westonruter
6 years ago

@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
6 years ago

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

#18 @westonruter
6 years ago

  • Keywords needs-testing added

@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.

#19 follow-up: @afercia
6 years ago

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

https://cldup.com/scLVkFhs4d.png

#20 follow-up: @afercia
6 years ago

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.

https://cldup.com/cJes6U6mKe.png

#21 in reply to: ↑ 20 @westonruter
6 years ago

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
6 years ago

#22 in reply to: ↑ 19 @westonruter
6 years ago

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
6 years ago

Fix available menu items search spinner

#23 @afercia
6 years ago

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.

https://cldup.com/qaymigNZEN.png

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.

https://cldup.com/94S3bKWE24.png

#24 @afercia
6 years ago

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
6 years ago

For the Edit Menu Item and Remove Menu Item buttons

@afercia
6 years ago

merges the two last patches

#25 @afercia
6 years ago

  • Keywords commit added; needs-testing removed

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.

This ticket was mentioned in Slack in #core-customize by afercia. View the logs.


6 years ago

#27 @ocean90
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 33413:

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

props afercia, celloexpressions, westonruter.
fixes #32715.

#28 @netweb
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#29 @SergeyBiryukov
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 33424:

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

fixes #32715.

#30 @ocean90
6 years ago

In 33460:

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

see #32715.

Note: See TracTickets for help on using tickets.