From 1a78bfaf8ac01fa61d055def665147dffd5764ea Mon Sep 17 00:00:00 2001
From: Brandon Payton <brandon@happycode.net>
Date: Thu, 13 Jun 2024 08:56:02 -0400
Subject: [PATCH] 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
---
 .../src/components/playground-preview/index.tsx        | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/wordpress-playground-block/src/components/playground-preview/index.tsx b/packages/wordpress-playground-block/src/components/playground-preview/index.tsx
index 5d095718..454218a1 100644
--- a/packages/wordpress-playground-block/src/components/playground-preview/index.tsx
+++ b/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);
 										}}