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: Use better labels for buttons #288

Open
alexstine opened this issue Jun 4, 2024 · 0 comments · Fixed by #301
Open

Playground block: A11Y: Use better labels for buttons #288

alexstine opened this issue Jun 4, 2024 · 0 comments · Fixed by #301
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/

The following buttons could use better labels.

  • index.php
  • PHP error_log

It is not clear that these buttons will switch the code editor view. Suggestions:

  • File: index.php
  • Read-only file: PHP error_log

Since these are functioning similarly to tabs, I would also mark the active one. You can use aria-current="true". This attribute must also be toggled with JavaScript with onClick event or similar.

Docs:

  1. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
  2. https://a11ysupport.io/tech/aria/aria-current_attribute
@brandonpayton brandonpayton mentioned this issue Jun 12, 2024
Merged
brandonpayton added a commit that referenced this issue Jun 13, 2024
@brandonpayton
Playground block: Improve file tabs accessibility (#301)
1a78bfa 
<!-- Thanks for contributing to WordPress Playground Tools! -->

## What?

This PR clarifies the ARIA labels on the file tabs in the code editor.
In addition, it clarifies which file button is currently selected.

Fixes #288

## Why?

To quote from #288:
> It is not clear that these buttons will switch the code editor view.
Suggestions:
> - File: index.php
> - Read-only file: PHP error_log
>
> Since these are functioning similarly to tabs, I would also mark the
active one. You can use aria-current="true". This attribute must also be
toggled with JavaScript with onClick event or similar.

## How?

This PR adds a "File: " prefix to all regular file names and a
"Read-only file: " prefix to the error log tab if it is present. In
addition, it adds "aria-current' attributes to the file buttons to
indicate whether or not each button is the currently selected one.

## Testing Instructions

- `npx nx run wordpress-playground-block:dev`
- Create a new post
- Add a Playground block in the editor, enable the block's code editor,
add a few more files, and enable the PHP error log.
- Use a screen reader to engage with the file buttons and confirm the
labels are as described above
- Tab through the button list and observe that the screen reader
announces the currently selected button
- Publish the post and verify the same things on the front end
@brandonpayton brandonpayton added the Bug Something isn't working label Jun 13, 2024
@brandonpayton brandonpayton reopened this Jun 27, 2024
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