diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-10-31 02:15:53 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-10-31 19:26:15 +0100 |
commit | 5e6aa0fa92e5ee74878b2d86f5af80cac178831b (patch) | |
tree | 9111f29f39cca58bfd45f3bf30352ca3f3a87d15 /language-web/src | |
parent | feat(web): client support for transformation rules (diff) | |
download | refinery-5e6aa0fa92e5ee74878b2d86f5af80cac178831b.tar.gz refinery-5e6aa0fa92e5ee74878b2d86f5af80cac178831b.tar.zst refinery-5e6aa0fa92e5ee74878b2d86f5af80cac178831b.zip |
fix(web): undo/redo button accessibility issue
Do not misuse ToggleButtons as ImageButtons when there's no toggled
state.
Diffstat (limited to 'language-web/src')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 16 |
1 files changed, 9 insertions, 7 deletions
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 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | 1 | import type { Diagnostic } from '@codemirror/lint'; |
2 | import { observer } from 'mobx-react-lite'; | 2 | import { observer } from 'mobx-react-lite'; |
3 | import IconButton from '@mui/material/IconButton'; | ||
3 | import Stack from '@mui/material/Stack'; | 4 | import Stack from '@mui/material/Stack'; |
4 | import ToggleButton from '@mui/material/ToggleButton'; | 5 | import ToggleButton from '@mui/material/ToggleButton'; |
5 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | 6 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
@@ -38,26 +39,27 @@ export const EditorButtons = observer(() => { | |||
38 | direction="row" | 39 | direction="row" |
39 | spacing={1} | 40 | spacing={1} |
40 | > | 41 | > |
41 | <ToggleButtonGroup | 42 | <Stack |
42 | size="small" | 43 | direction="row" |
44 | alignItems="center" | ||
43 | > | 45 | > |
44 | <ToggleButton | 46 | <IconButton |
45 | disabled={!editorStore.canUndo} | 47 | disabled={!editorStore.canUndo} |
46 | onClick={() => editorStore.undo()} | 48 | onClick={() => editorStore.undo()} |
47 | aria-label="Undo" | 49 | aria-label="Undo" |
48 | value="undo" | 50 | value="undo" |
49 | > | 51 | > |
50 | <UndoIcon fontSize="small" /> | 52 | <UndoIcon fontSize="small" /> |
51 | </ToggleButton> | 53 | </IconButton> |
52 | <ToggleButton | 54 | <IconButton |
53 | disabled={!editorStore.canRedo} | 55 | disabled={!editorStore.canRedo} |
54 | onClick={() => editorStore.redo()} | 56 | onClick={() => editorStore.redo()} |
55 | aria-label="Redo" | 57 | aria-label="Redo" |
56 | value="redo" | 58 | value="redo" |
57 | > | 59 | > |
58 | <RedoIcon fontSize="small" /> | 60 | <RedoIcon fontSize="small" /> |
59 | </ToggleButton> | 61 | </IconButton> |
60 | </ToggleButtonGroup> | 62 | </Stack> |
61 | <ToggleButtonGroup | 63 | <ToggleButtonGroup |
62 | size="small" | 64 | size="small" |
63 | > | 65 | > |