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 | |
| 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.
| -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 | > |