From 5e6aa0fa92e5ee74878b2d86f5af80cac178831b Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 31 Oct 2021 02:15:53 +0100
Subject: fix(web): undo/redo button accessibility issue

Do not misuse ToggleButtons as ImageButtons when there's no toggled
state.
---
 language-web/src/main/js/editor/EditorButtons.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'language-web')

diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index 9ccc238c..09ce33dd 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -1,5 +1,6 @@
 import type { Diagnostic } from '@codemirror/lint';
 import { observer } from 'mobx-react-lite';
+import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -38,26 +39,27 @@ export const EditorButtons = observer(() => {
       direction="row"
       spacing={1}
     >
-      <ToggleButtonGroup
-        size="small"
+      <Stack
+        direction="row"
+        alignItems="center"
       >
-        <ToggleButton
+        <IconButton
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
           aria-label="Undo"
           value="undo"
         >
           <UndoIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
+        </IconButton>
+        <IconButton
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
           aria-label="Redo"
           value="redo"
         >
           <RedoIcon fontSize="small" />
-        </ToggleButton>
-      </ToggleButtonGroup>
+        </IconButton>
+      </Stack>
       <ToggleButtonGroup
         size="small"
       >
-- 
cgit v1.2.3-54-g00ecf