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