toolbar: add label to buttons

This improves accessability by letting us get buttons by the label.

src/firmware/FlashButton.tsx

@@ -13,9 +13,9 @@ import { TooltipId } from '../toolbar/i18n';
 import { flashFirmware } from './actions';
 import firmwareIcon from './firmware.svg';
 
-type FlashButtonProps = Pick<OpenFileButtonProps, 'id'>;
+type FlashButtonProps = Pick<OpenFileButtonProps, 'label'>;
 
-const FlashButton: React.VoidFunctionComponent<FlashButtonProps> = ({ id }) => {
+const FlashButton: React.VoidFunctionComponent<FlashButtonProps> = ({ label }) => {
     const bootloaderConnection = useSelector((s) => s.bootloader.connection);
     const bleConnection = useSelector((s) => s.ble.connection);
     const flashing = useSelector((s) => s.firmware.flashing);
@@ -27,7 +27,7 @@ const FlashButton: React.VoidFunctionComponent<FlashButtonProps> = ({ id }) => {
 
     return (
         <OpenFileButton
-            id={id}
+            label={label}
             fileExtension=".zip"
             icon={firmwareIcon}
             tooltip={flashing ? TooltipId.FlashProgress : TooltipId.Flash}

src/hub/BluetoothButton.tsx

@@ -12,9 +12,11 @@ import { TooltipId } from '../toolbar/i18n';
 import btConnectedIcon from './bt-connected.svg';
 import btDisconnectedIcon from './bt-disconnected.svg';
 
-type BluetoothButtonProps = Pick<ActionButtonProps, 'id'>;
+type BluetoothButtonProps = Pick<ActionButtonProps, 'label'>;
 
-const BluetoothButton: React.VoidFunctionComponent<BluetoothButtonProps> = ({ id }) => {
+const BluetoothButton: React.VoidFunctionComponent<BluetoothButtonProps> = ({
+    label,
+}) => {
     const bootloaderConnection = useSelector((s) => s.bootloader.connection);
     const bleConnection = useSelector((s) => s.ble.connection);
 
@@ -26,7 +28,7 @@ const BluetoothButton: React.VoidFunctionComponent<BluetoothButtonProps> = ({ id
 
     return (
         <ActionButton
-            id={id}
+            label={label}
             tooltip={
                 isDisconnected
                     ? TooltipId.BluetoothConnect

src/hub/ReplButton.tsx

@@ -10,10 +10,10 @@ import { repl } from './actions';
 import { HubRuntimeState } from './reducers';
 import replIcon from './repl.svg';
 
-type ReplButtonProps = Pick<ActionButtonProps, 'id' | 'keyboardShortcut'>;
+type ReplButtonProps = Pick<ActionButtonProps, 'label' | 'keyboardShortcut'>;
 
 const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({
-    id,
+    label,
     keyboardShortcut,
 }) => {
     const enabled = useSelector((s) => s.hub.runtime === HubRuntimeState.Idle);
@@ -22,7 +22,7 @@ const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({
 
     return (
         <ActionButton
-            id={id}
+            label={label}
             keyboardShortcut={keyboardShortcut}
             tooltip={TooltipId.Repl}
             icon={replIcon}

src/hub/RunButton.tsx

@@ -10,10 +10,10 @@ import { downloadAndRun } from './actions';
 import { HubRuntimeState } from './reducers';
 import runIcon from './run.svg';
 
-type RunButtonProps = Pick<ActionButtonProps, 'id' | 'keyboardShortcut'>;
+type RunButtonProps = Pick<ActionButtonProps, 'label' | 'keyboardShortcut'>;
 
 const RunButton: React.VoidFunctionComponent<RunButtonProps> = ({
-    id,
+    label,
     keyboardShortcut,
 }) => {
     const downloadProgress = useSelector((s) => s.hub.downloadProgress);
@@ -24,7 +24,7 @@ const RunButton: React.VoidFunctionComponent<RunButtonProps> = ({
 
     return (
         <ActionButton
-            id={id}
+            label={label}
             keyboardShortcut={keyboardShortcut}
             tooltip={TooltipId.Run}
             progressTooltip={TooltipId.RunProgress}

src/hub/StopButton.tsx

@@ -10,10 +10,10 @@ import { stop } from './actions';
 import { HubRuntimeState } from './reducers';
 import stopIcon from './stop.svg';
 
-type StopButtonProps = Pick<ActionButtonProps, 'id' | 'keyboardShortcut'>;
+type StopButtonProps = Pick<ActionButtonProps, 'label' | 'keyboardShortcut'>;
 
 const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({
-    id,
+    label,
     keyboardShortcut,
 }) => {
     const runtime = useSelector((s) => s.hub.runtime);
@@ -22,7 +22,7 @@ const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({
 
     return (
         <ActionButton
-            id={id}
+            label={label}
             keyboardShortcut={keyboardShortcut}
             tooltip={TooltipId.Stop}
             icon={stopIcon}

src/settings/SettingsButton.tsx

@@ -6,15 +6,15 @@ import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
 import { TooltipId } from '../toolbar/i18n';
 import settingsIcon from './settings.svg';
 
-type SettingsButtonProps = Pick<ActionButtonProps, 'id' | 'onAction'>;
+type SettingsButtonProps = Pick<ActionButtonProps, 'label' | 'onAction'>;
 
 const SettingsButton: React.VoidFunctionComponent<SettingsButtonProps> = ({
-    id,
+    label,
     onAction,
 }) => {
     return (
         <ActionButton
-            id={id}
+            label={label}
             tooltip={TooltipId.Settings}
             icon={settingsIcon}
             onAction={onAction}

src/toolbar/ActionButton.tsx

@@ -20,8 +20,8 @@ import en from './i18n.en.json';
 const smallScreenThreshold = 700;
 
 export interface ActionButtonProps {
-    /** A unique id for each instance. */
-    readonly id: string;
+    /** A unique label for each instance. */
+    readonly label: string;
     /** Keyboard shortcut. */
     readonly keyboardShortcut?: string;
     /** Tooltip text that appears when hovering over the button. */
@@ -41,7 +41,7 @@ export interface ActionButtonProps {
 }
 
 const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
-    id,
+    label,
     keyboardShortcut,
     tooltip,
     progressTooltip,
@@ -110,6 +110,7 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
                 ...tooltipTargetProps
             }) => (
                 <Button
+                    aria-label={label}
                     elementRef={tooltipTargetRef as IRef<HTMLButtonElement>}
                     {...tooltipTargetProps}
                     intent={Intent.PRIMARY}
@@ -128,7 +129,7 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
                             width={`${buttonSize}px`}
                             height={`${buttonSize}px`}
                             src={icon}
-                            alt={id}
+                            alt={label}
                             style={pointerEventsNone}
                         />
                     )}

src/toolbar/OpenFileButton.tsx

@@ -13,8 +13,8 @@ import en from './i18n.en.json';
 
 const smallScreenThreshold = 700;
 export interface OpenFileButtonProps {
-    /** A unique id for each instance. */
-    readonly id: string;
+    /** A unique label for each instance. */
+    readonly label: string;
     /** The accepted file extension */
     readonly fileExtension: string;
     /** Tooltip text that appears when hovering over the button. */
@@ -39,7 +39,7 @@ export interface OpenFileButtonProps {
  * Button that opens a file chooser dialog or accepts files dropped on it.
  */
 const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
-    id,
+    label,
     fileExtension,
     tooltip,
     icon,
@@ -126,6 +126,7 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
             }) => (
                 <Button
                     {...getRootProps({
+                        'aria-label': label,
                         refKey: 'elementRef',
                         elementRef: tooltipTargetRef as IRef<HTMLButtonElement>,
                         ...tooltipTargetProps,
@@ -147,7 +148,7 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
                             width={`${buttonSize}px`}
                             height={`${buttonSize}px`}
                             src={icon}
-                            alt={id}
+                            alt={label}
                             style={pointerEventsNone}
                         />
                     )}

src/toolbar/Toolbar.tsx

@@ -24,17 +24,17 @@ const Toolbar: React.VFC = (_props) => {
             className="pb-toolbar"
         >
             <ButtonGroup className="pb-toolbar-group pb-align-left">
-                <FlashButton id="flash" />
-                <BluetoothButton id="bluetooth" />
+                <FlashButton label="Flash" />
+                <BluetoothButton label="Bluetooth" />
             </ButtonGroup>
             <ButtonGroup className="pb-toolbar-group pb-align-left">
-                <RunButton id="run" keyboardShortcut="F5" />
-                <StopButton id="stop" keyboardShortcut="F6" />
-                <ReplButton id="repl" />
+                <RunButton label="Run" keyboardShortcut="F5" />
+                <StopButton label="Stop" keyboardShortcut="F6" />
+                <ReplButton label="REPL" />
             </ButtonGroup>
             <ButtonGroup className="pb-toolbar-group pb-align-right">
                 <SettingsButton
-                    id="settings"
+                    label="Settings"
                     onAction={() => setIsSettingsDrawerOpen(true)}
                 />
                 <SettingsDrawer