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
@adamziel adamziel removed the status in Playground Board Jun 30, 2024
@adamziel adamziel moved this to Needs Triage in Playground Board Jun 30, 2024
@adamziel adamziel removed the status in Playground Board Jul 1, 2024
@adamziel adamziel moved this to Future work in Playground Board Jul 1, 2024
@adamziel adamziel moved this from Future work to Needs Triage/Our Reply in Playground Board Jul 1, 2024
@adamziel adamziel moved this from Needs Triage/Our Reply to Future work in Playground Board Jul 1, 2024
@adamziel adamziel moved this from Future work to Needs Triage/Our Reply in Playground Board Jul 1, 2024
@bgrgicak bgrgicak moved this from Needs Triage/Our Reply to Up next in Playground Board Jul 5, 2024
@brandonpayton brandonpayton moved this from Up next to Reviewed in Playground Board Jul 12, 2024
@brandonpayton brandonpayton mentioned this issue Jul 18, 2024
Open
13 tasks
@alexstine
Copy link
Author

Fixed, thanks!

@github-project-automation github-project-automation bot moved this from Reviewed to Done in Playground Board Jul 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brandonpayton brandonpayton

Labels
Accessibility Bug Something isn't working Playground block
Projects
Playground Board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Playground block: Add ARIA labels to icon-only buttons WordPress/playground-tools
2 participants
@brandonpayton @alexstine