Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Playground block: A11Y: Powered by link needs spacing #291

Open
alexstine opened this issue Jun 4, 2024 · 6 comments
Open

Playground block: A11Y: Powered by link needs spacing #291

alexstine opened this issue Jun 4, 2024 · 6 comments
Assignees
@brandonpayton
Labels
Accessibility Bug Something isn't working Playground block

Comments

@alexstine
Copy link

Test page: https://learn.wordpress.org/test/wordpress-playground-block-plugin-test-page/

Please correct this link.

Powered byWordPress Playground

Should be:

Powered by WordPress Playground

Or:

Powered by: WordPress Playground

This will avoid the created run-on sentence for assistive tech.
@brandonpayton
Copy link
Member

This one is interesting. The actual HTML has newlines (whitespace) between separate spans making up the "Powered by" label, but assistive technology (specifically VoiceOver) does not spell out the implicit space between "by" and "WordPress". Let's look at restructuring the markup around that notice to get a better result.
@brandonpayton brandonpayton added Bug Something isn't working Playground block labels Jun 13, 2024
@brandonpayton
Copy link
Member

brandonpayton commented Jun 18, 2024 •
edited
Loading

I'm trying to understand what is going on here because, if one duplicates the link text and icon to a local test page, VoiceOver includes spaces when spelling out that link text. But it does not include spaces between "by" and "WordPress" when working with the Playground block.
@brandonpayton
Copy link
Member

@alexstine, what assistive technology would you suggest using to reproduce this? I have been using VoiceOver on macOS and getting a little more experienced with it. Originally, when looking at this issue I was navigating letter-by-letter and was getting strange behavior with sometimes omitted spaces and duplicated letters that were not duplicated in the content itself. In at least some of these cases, I'm sure the problem was user error on my part. But after learning the command to have VoiceOver spell what is under the VoiceOver cursor and having it pronounce and spell out the powered-by link, it pronounces properly, and the spelling correctly mentions a single space to separate each word.
@alexstine
Copy link
Author

I am using NVDA on Windows.
@brandonpayton
Copy link
Member

I think this is fixed by a side-effect of our i18n work in #327. We can test once there is a new release.
@brandonpayton brandonpayton self-assigned this Jul 17, 2024
@brandonpayton brandonpayton mentioned this issue Jul 18, 2024
Open
@alexstine
Copy link
Author

This is still an issue.
@brandonpayton brandonpayton mentioned this issue Jul 25, 2024
Merged
brandonpayton added a commit that referenced this issue Jul 25, 2024
@brandonpayton
Playground block: Fix powered-by link spelling in screen readers (#339)
8c107cc 
## What and why?

Prior to this PR both macOS Voiceover and NVDA on Windows did not spell
out the expected number of spaces between words in the "Powered by
WordPress Playground" HTML.

Related to #291

## How?

Getting this right was surprisingly hard.

This PR does the following:
- Adds an `aria-label` attribute which fixes the problem for NVDA
- Removes a space after the "W" icon. Safari was reading "space-space"
because of the spaces on each side the of the "W" icon.
- In order to achieve consistent spacing around the "W" icon, visually
hides the space next to the "W" icon and sets a left and right margin so
there is still spacing between the icon and the "Powered by" and
"WordPress Playground" spans.

## Testing Instructions

- View a post containing a Playground block in Safari
- Turn on Voiceover, select the powered-by link, use the arrow keys to
iterate through the letters in the link and make sure it spells out
"Powered by WordPress Playground" with exactly one space between words.
- In Windows, install NVDA
- In Windows, view a post containing a Playground block in Microsoft
Edge
- Turn on NVDA, select the powered-by link, use the arrow keys to
iterate through the letters in the link and make sure it spells out
"Powered by WordPress Playground" with exactly one space between words.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Bug Something isn't working Playground block
2 participants
@brandonpayton @alexstine