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: Unlabeled button in code editor #286

Closed
alexstine opened this issue Jun 4, 2024 · 1 comment · Fixed by #300
Closed

Playground block: A11Y: Unlabeled button in code editor #286

alexstine opened this issue Jun 4, 2024 · 1 comment · Fixed by #300
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/

There is an unlabeled button with icon only, not sure what it should be called.

<button type="button" class="components-button file-tab file-tab-extra is-secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M18 11.3l-1-1.1-4 4V3h-1.5v11.3L7 10.2l-1 1.1 6.2 5.8 5.8-5.8zm.5 3.7v3.5h-13V15H4v5h16v-5h-1.5z"></path></svg></button>
@brandonpayton brandonpayton mentioned this issue Jun 12, 2024
Merged
brandonpayton added a commit that referenced this issue Jun 13, 2024
@brandonpayton
Playground block: Add ARIA labels to icon-only buttons (#300)
6c3205b 
<!-- Thanks for contributing to WordPress Playground Tools! -->

## 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 added the Bug Something isn't working label Jun 13, 2024
@brandonpayton brandonpayton reopened this Jun 27, 2024
@brandonpayton brandonpayton mentioned this issue Jul 18, 2024
Open
@alexstine
Copy link
Author

Fixed, thanks!
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