Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#54895 closed defect (bug) (fixed)

New button in toolbar reads out incorrectly when usingVoiceOver

Reported by: legendusmaximus's profile legendusmaximus Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.8.3
Component: Toolbar Keywords: has-patch commit
Focuses: accessibility, css Cc:

Description

When you use VoiceOver on iOS, the link to open the "New" dropdown menu in the toolbar is read out as "post new.php".
Steps to reproduce:

  1. Enable VoiceOver in Settings > Accessibility.
  2. Log in to a fresh install of WordPress as an admin.
  3. Swipe through the top toolbar that appears both on the admin screens and when viewing the site.
  4. You will hear the "New" dropdown read out as "Post new.php".

I have tested this on two iPhones running different versions of iOS. I have also tested it on a fresh install of WordPress 5.8.3 with no plugins active.
This issue does not occur when using JAWS on Windows.
I would appreciate help to test the following configurations (if I test any myself I will update the ticket):

  • VoiceOver on an iPad
  • VoiceOver on a Mac (both one of the newer M1 Macs and one of the older ones)
  • NVDA on Windows
  • TalkBack on Android
  • Any other configurations you can think of.

I will test this again on 5.9 once it is released and I will post my findings here.

Change History (5)

#1 @sabernhardt
2 years ago

  • Focuses css added
  • Keywords needs-patch added; needs-testing removed
  • Milestone changed from Awaiting Review to 6.0

Thanks for the report!

In NVDA/Firefox/Windows, "post new" (without PHP) sounded good, but the "New" label is hidden on small screens and/or for people who zoom in with the browser.

@media screen and (max-width: 782px) {
  #wpadminbar .ab-label {
    display: none;
  }
}

When not visible, these text labels probably need the styling used in the screen-reader-text class.

This ticket was mentioned in PR #2276 on WordPress/wordpress-develop by konradyoast.


2 years ago
#2

  • Keywords has-patch added; needs-patch removed

#3 @audrasjb
2 years ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to assigned

Thanks for the patch @konradyoast. I tested the provided pull request and it looks good to me 👍

#4 @audrasjb
2 years ago

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

In 52674:

Toolbar: Don't hide admin bar text labels from screen readers on small screens.

This change replaces display: none with screen-reader-text styles so the text labels are available for screen readers on small screens.

Props legendusmaximus, sabernhardt, konradyoast.
Fixes #54895.

Note: See TracTickets for help on using tickets.