New button in toolbar reads out incorrectly when usingVoiceOver

[legendusmaximus]

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.

[sabernhardt]

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.

Trac ticket: https://core.trac.wordpress.org/ticket/54895

[audrasjb]

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

[audrasjb]

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.

Committed in https://core.trac.wordpress.org/changeset/52674