refactor(frontend): improve tooltip accessibility

graphs4value · Nov 3, 2024 · d3b7f7b · d3b7f7b
1 parent 2a3fe1c
commit d3b7f7b
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 60 deletions.
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
@@ -12,7 +12,9 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { alpha, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 
+import Tooltip from './Tooltip';
 import type ThemeStore from './theme/ThemeStore';
+import type { SelectedPane } from './theme/ThemeStore';
 
 const PaneButtonGroup = styled(ToggleButtonGroup, {
   name: 'PaneButtons-Group',
@@ -82,60 +84,72 @@ const PaneButtonGroup = styled(ToggleButtonGroup, {
   };
 });
 
+const PaneButton = observer(function PaneButton({
+  themeStore,
+  value,
+  label,
+  icon,
+  hideLabel,
+}: {
+  themeStore: ThemeStore;
+  value: SelectedPane;
+  label: string;
+  icon: React.ReactNode;
+  hideLabel: boolean;
+}): JSX.Element {
+  const button = (
+    <ToggleButton
+      value={value}
+      selected={themeStore.isShowing(value)}
+      onClick={(event) => {
+        if (event.shiftKey || event.ctrlKey) {
+          themeStore.setSelectedPane(value, event.shiftKey);
+        } else {
+          themeStore.togglePane(value);
+        }
+      }}
+    >
+      {icon}
+      {!hideLabel && label}
+    </ToggleButton>
+  );
+  return hideLabel ? <Tooltip title={label}>{button}</Tooltip> : button;
+});
+
 function PaneButtons({
   themeStore,
   hideLabel,
 }: {
   themeStore: ThemeStore;
   hideLabel?: boolean;
 }): JSX.Element {
+  const hideLabelOrDefault = hideLabel ?? false;
   return (
     <PaneButtonGroup
       size={hideLabel ? 'small' : 'medium'}
-      hideLabel={hideLabel ?? false}
+      hideLabel={hideLabelOrDefault}
     >
-      <ToggleButton
+      <PaneButton
+        themeStore={themeStore}
         value="code"
-        selected={themeStore.showCode}
-        onClick={(event) => {
-          if (event.shiftKey || event.ctrlKey) {
-            themeStore.setSelectedPane('code');
-          } else {
-            themeStore.toggleCode();
-          }
-        }}
-      >
-        <CodeIcon fontSize="small" />
-        {!hideLabel && 'Code'}
-      </ToggleButton>
-      <ToggleButton
+        label="Code"
+        icon={<CodeIcon fontSize="small" />}
+        hideLabel={hideLabelOrDefault}
+      />
+      <PaneButton
+        themeStore={themeStore}
         value="graph"
-        selected={themeStore.showGraph}
-        onClick={(event) => {
-          if (event.shiftKey || event.ctrlKey) {
-            themeStore.setSelectedPane('graph', event.shiftKey);
-          } else {
-            themeStore.toggleGraph();
-          }
-        }}
-      >
-        <SchemaRoundedIcon fontSize="small" />
-        {!hideLabel && 'Graph'}
-      </ToggleButton>
-      <ToggleButton
+        label="Graph"
+        icon={<SchemaRoundedIcon fontSize="small" />}
+        hideLabel={hideLabelOrDefault}
+      />
+      <PaneButton
+        themeStore={themeStore}
         value="table"
-        selected={themeStore.showTable}
-        onClick={(event) => {
-          if (event.shiftKey || event.ctrlKey) {
-            themeStore.setSelectedPane('table', event.shiftKey);
-          } else {
-            themeStore.toggleTable();
-          }
-        }}
-      >
-        <TableChartIcon fontSize="small" />
-        {!hideLabel && 'Table'}
-      </ToggleButton>
+        label="Table"
+        icon={<TableChartIcon fontSize="small" />}
+        hideLabel={hideLabelOrDefault}
+      />
     </PaneButtonGroup>
   );
 }

diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -17,12 +17,13 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import ToggleButton from '@mui/material/ToggleButton';
 import Toolbar from '@mui/material/Toolbar';
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
+import Tooltip from '../Tooltip';
+
 import type SearchPanelStore from './SearchPanelStore';
 
 const DimLabel = styled(FormControlLabel)(({ theme }) => ({
@@ -131,26 +132,22 @@ export default observer(function SearchToolbar({
             rowGap={0.5}
           >
             <Tooltip title="Previous match">
-              <span>
-                <IconButton
-                  disabled={!valid}
-                  onClick={() => searchPanelStore.findPrevious()}
-                  color="inherit"
-                >
-                  <KeyboardArrowUpIcon fontSize="small" />
-                </IconButton>
-              </span>
+              <IconButton
+                disabled={!valid}
+                onClick={() => searchPanelStore.findPrevious()}
+                color="inherit"
+              >
+                <KeyboardArrowUpIcon fontSize="small" />
+              </IconButton>
             </Tooltip>
             <Tooltip title="Next match">
-              <span>
-                <IconButton
-                  disabled={!valid}
-                  onClick={() => searchPanelStore.findNext()}
-                  color="inherit"
-                >
-                  <KeyboardArrowDownIcon fontSize="small" />
-                </IconButton>
-              </span>
+              <IconButton
+                disabled={!valid}
+                onClick={() => searchPanelStore.findNext()}
+                color="inherit"
+              >
+                <KeyboardArrowDownIcon fontSize="small" />
+              </IconButton>
             </Tooltip>
           </Stack>
           <Stack

diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -31,7 +31,9 @@ export default class ThemeStore {
     mediaQuery.addEventListener('change', (event) => {
       this.systemDarkMode = event.matches;
     });
-    makeAutoObservable(this);
+    makeAutoObservable(this, {
+      isShowing: false,
+    });
   }
 
   get darkMode(): boolean {
@@ -57,6 +59,35 @@ export default class ThemeStore {
     }
   }
 
+  togglePane(pane: SelectedPane) {
+    switch (pane) {
+      case 'code':
+        this.toggleCode();
+        break;
+      case 'graph':
+        this.toggleGraph();
+        break;
+      case 'table':
+        this.toggleTable();
+        break;
+      default:
+        throw new Error(`Unknown pane: ${String(pane)}`);
+    }
+  }
+
+  isShowing(pane: SelectedPane): boolean {
+    switch (pane) {
+      case 'code':
+        return this.showCode;
+      case 'graph':
+        return this.showGraph;
+      case 'table':
+        return this.showTable;
+      default:
+        throw new Error(`Unknown pane: ${String(pane)}`);
+    }
+  }
+
   toggleCode(): void {
     if (!this.showGraph && !this.showTable) {
       return;