From 7b8970e90fa18854ffcd3995f7bbcfcbac739952 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 16 Dec 2022 16:15:18 -0600
Subject: [PATCH] toolbar: add label for a11y

---
 src/toolbar/Toolbar.tsx          |  8 +++++++-
 src/toolbar/i18n.ts              | 12 ++++++++++++
 src/toolbar/translations/en.json |  3 +++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/toolbar/i18n.ts
 create mode 100644 src/toolbar/translations/en.json

diff --git a/src/toolbar/Toolbar.tsx b/src/toolbar/Toolbar.tsx
index 4cf20a60..5d702372 100644
--- a/src/toolbar/Toolbar.tsx
+++ b/src/toolbar/Toolbar.tsx
@@ -10,6 +10,7 @@ import ReplButton from './buttons/repl/ReplButton';
 import RunButton from './buttons/run/RunButton';
 import SponsorButton from './buttons/sponsor/SponsorButton';
 import StopButton from './buttons/stop/StopButton';
+import { useI18n } from './i18n';
 
 import './toolbar.scss';
 
@@ -19,11 +20,16 @@ const runButtonId = 'pb-toolbar-run-button';
 const sponsorButtonId = 'pb-toolbar-sponsor-button';
 
 const Toolbar: React.VFC = () => {
+    const i18n = useI18n();
     const stopButtonId = useId();
     const replButtonId = useId();
 
     return (
-        <UtilsToolbar className="pb-toolbar" firstFocusableItemId={bluetoothButtonId}>
+        <UtilsToolbar
+            aria-label={i18n.translate('label')}
+            className="pb-toolbar"
+            firstFocusableItemId={bluetoothButtonId}
+        >
             <ButtonGroup className="pb-toolbar-group pb-align-left">
                 <BluetoothButton id={bluetoothButtonId} />
             </ButtonGroup>
diff --git a/src/toolbar/i18n.ts b/src/toolbar/i18n.ts
new file mode 100644
index 00000000..47ec2790
--- /dev/null
+++ b/src/toolbar/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/toolbar/translations/en.json b/src/toolbar/translations/en.json
new file mode 100644
index 00000000..d92f543c
--- /dev/null
+++ b/src/toolbar/translations/en.json
@@ -0,0 +1,3 @@
+{
+    "label": "Editor"
+}