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
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:
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