toolbar: add label for a11y

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>

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;
+}

src/toolbar/translations/en.json

@@ -0,0 +1,3 @@
+{
+    "label": "Editor"
+}