From 9944725be6ccdbc44b81329be13b74e7d0dff51e Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 16 Dec 2022 11:45:00 -0600
Subject: [PATCH] app: use aria landmark roles

This add use of the main and complementary roles (via semantic html
elements main and aside) to make it easy for assistive technologies
to jump to the major components of the app.
---
 src/app/App.tsx              | 31 ++++++++++++++++++++++---------
 src/app/i18n.ts              | 12 ++++++++++++
 src/app/translations/en.json |  8 ++++++++
 3 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 src/app/i18n.ts
 create mode 100644 src/app/translations/en.json

diff --git a/src/app/App.tsx b/src/app/App.tsx
index c6a13476..a81efb41 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -17,6 +17,7 @@ import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
 import { isMacOS } from '../utils/os';
 import { useAppLastDocsPageSetting } from './hooks';
+import { useI18n } from './i18n';
 
 const Editor = React.lazy(async () => {
     const [sagaModule, componentModule] = await Promise.all([
@@ -145,7 +146,6 @@ const Docs: React.VFC = () => {
             }}
             src={initialDocsPage}
             allowFullScreen={true}
-            role="documentation"
             width="100%"
             height="100%"
         />
@@ -153,6 +153,7 @@ const Docs: React.VFC = () => {
 };
 
 const App: React.VFC = () => {
+    const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
     const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
     const [isDragging, setIsDragging] = useState(false);
@@ -189,9 +190,12 @@ const App: React.VFC = () => {
     return (
         <div className="pb-app" onContextMenu={(e) => e.preventDefault()}>
             <div className="pb-app-body">
-                <div className="pb-app-activities">
+                <aside
+                    className="pb-app-activities"
+                    aria-label={i18n.translate('landmark.activities')}
+                >
                     <Activities />
-                </div>
+                </aside>
                 {/* need a container with position: relative; for SplitterLayout since it uses position: absolute; */}
                 <div className="pb-app-main" style={{ position: 'relative' }}>
                     <SplitterLayout
@@ -210,26 +214,35 @@ const App: React.VFC = () => {
                             secondaryInitialSize={terminalSplit}
                             onSecondaryPaneSizeChange={setTerminalSplit}
                         >
-                            <div className="pb-app-editor">
+                            <main
+                                className="pb-app-editor"
+                                aria-label={i18n.translate('landmark.editor')}
+                            >
                                 <Toolbar />
                                 <React.Suspense
                                     fallback={<Spinner className="pb-editor" />}
                                 >
                                     <Editor />
                                 </React.Suspense>
-                            </div>
-                            <div className="pb-app-terminal">
+                            </main>
+                            <aside
+                                className="pb-app-terminal"
+                                aria-label={i18n.translate('landmark.terminal')}
+                            >
                                 <React.Suspense
                                     fallback={<Spinner className="h-100" />}
                                 >
                                     <Terminal />
                                 </React.Suspense>
-                            </div>
+                            </aside>
                         </SplitterLayout>
-                        <div className="pb-app-docs">
+                        <aside
+                            className="pb-app-docs"
+                            aria-label={i18n.translate('landmark.documentation')}
+                        >
                             {isDragging && <div className="pb-app-docs-drag-helper" />}
                             <Docs />
-                        </div>
+                        </aside>
                     </SplitterLayout>
                 </div>
             </div>
diff --git a/src/app/i18n.ts b/src/app/i18n.ts
new file mode 100644
index 00000000..47ec2790
--- /dev/null
+++ b/src/app/i18n.ts
@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../i18n';
+import type translations from './translations/en.json';
+
+export function useI18n(): TypedI18n<typeof translations> {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}
diff --git a/src/app/translations/en.json b/src/app/translations/en.json
new file mode 100644
index 00000000..b7a1925b
--- /dev/null
+++ b/src/app/translations/en.json
@@ -0,0 +1,8 @@
+{
+    "landmark": {
+        "activities": "Activities",
+        "editor": "Editor",
+        "terminal": "Terminal",
+        "documentation": "Documentation"
+    }
+}