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.

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

Playground block: Add ARIA labels to icon-only buttons #300

Merged
merged 1 commit into from
Jun 13, 2024

Conversation

brandonpayton
Copy link
Member

@brandonpayton brandonpayton commented Jun 12, 2024

What?

This PR adds ARIA labels to the code editor's "Add File" and "Download Code as a Zip File" buttons which previously only included visual indications of their function.

Fixes #286

Why?

Without ARIA labels, people using assistive technology may have no way to know what the buttons do.

Testing Instructions

  • npx nx run wordpress-playground-block:dev
  • Create a new post
  • Add a Playground block in the editor
  • Use a screen reader to engage with the "Add File" and "Download Code as Zip File" button and confirm the labels are recognized
  • Publish the post and use a screen reader to confirm the "Download Code as Zip File" button has a recognized label

@brandonpayton brandonpayton force-pushed the pg-block-label-icon-buttons branch from 66c8b02 to 9d73c96 Compare June 12, 2024 23:24
@brandonpayton brandonpayton changed the title Add ARIA labels to icon-only buttons Playground block: Add ARIA labels to icon-only buttons Jun 12, 2024
@brandonpayton
Copy link
Member Author

I'm going to merge this because it has been tested and is low risk.

@brandonpayton brandonpayton merged commit 6c3205b into trunk Jun 13, 2024
2 checks passed
@brandonpayton brandonpayton deleted the pg-block-label-icon-buttons branch June 13, 2024 12:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Playground block: A11Y: Unlabeled button in code editor
1 participant