From 8d05a737702bf8e4a69d5914c47c6cf5ee8bb82f Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 16 Dec 2022 16:49:39 -0600
Subject: [PATCH] editor: fix aria labels on tablist and tabpanel

---
 src/editor/Editor.tsx           | 18 ++++++++++++++++++
 src/editor/translations/en.json |  4 ++++
 2 files changed, 22 insertions(+)

diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index 2f5a6735..0e33879d 100644
--- a/src/editor/Editor.tsx
+++ b/src/editor/Editor.tsx
@@ -282,6 +282,20 @@ const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({ onChange })
         tabsRef.current?.['moveSelectionIndicator']();
     }, [tabsRef]);
 
+    const i18n = useI18n();
+
+    useEffect(() => {
+        // @ts-expect-error: using private property
+        const tablist: HTMLDivElement = tabsRef.current?.tablistElement;
+
+        // istanbul-ignore-if: should not happen
+        if (!tablist) {
+            return;
+        }
+
+        tablist.setAttribute('aria-label', i18n.translate('tablist.label'));
+    }, [i18n]);
+
     return (
         <Tabs
             className="pb-editor-tablist"
@@ -469,6 +483,9 @@ const Editor: React.VFC = () => {
     });
 
     const isEmpty = useSelector((s) => s.editor.openFileUuids.length === 0);
+    const { activeFileUuid } = useSelector((s) => s.editor);
+    const fileName = useFileStoragePath(activeFileUuid ?? ('' as UUID));
+    console.log(fileName);
 
     return (
         <div className="pb-editor">
@@ -477,6 +494,7 @@ const Editor: React.VFC = () => {
                 <ContextMenu2
                     className={classNames('pb-editor-tabpanel', isEmpty && 'pb-empty')}
                     role="tabpanel"
+                    aria-label={isEmpty ? i18n.translate('welcome') : fileName}
                     // NB: we have to create a new context menu each time it is
                     // shown in order to get some state, like canUndo and canRedo
                     // that don't have events to monitor changes.
diff --git a/src/editor/translations/en.json b/src/editor/translations/en.json
index 1278046d..28d4fa96 100644
--- a/src/editor/translations/en.json
+++ b/src/editor/translations/en.json
@@ -1,4 +1,8 @@
 {
+    "tablist": {
+        "label": "Editor"
+    },
+    "welcome": "Welcome",
     "placeholder": "Write your program here...",
     "check": "Check syntax",
     "toggleDocs": "Toggle documentation",