Playground block: Improve file tabs accessibility (#301)

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

packages/wordpress-playground-block/src/components/playground-preview/index.tsx

@@ -379,6 +379,16 @@ export default function PlaygroundPreview({
 											index === activeFileIndex &&
 											'file-tab-active'
 										}`}
+										aria-label={
+											isErrorLogFile(file)
+												? `Read-only file: ${file.name}`
+												: `File: ${file.name}`
+										}
+										aria-current={
+											index === activeFileIndex
+												? 'true'
+												: 'false'
+										}
 										onClick={() => {
 											setActiveFileIndex(index);
 										}}