diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-10-11 01:24:39 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-10-31 19:26:10 +0100 |
commit | e126108b787c2bf68463d658473cc0f1e8f82a27 (patch) | |
tree | c587cb593275890451048828c5b42ec8e0b1f706 /language-web/src | |
parent | chore(web): remove CodeMirror 5 MWE2 integration (diff) | |
download | refinery-e126108b787c2bf68463d658473cc0f1e8f82a27.tar.gz refinery-e126108b787c2bf68463d658473cc0f1e8f82a27.tar.zst refinery-e126108b787c2bf68463d658473cc0f1e8f82a27.zip |
fix(web): a11y issue reported by Lighthouse
Diffstat (limited to 'language-web/src')
-rw-r--r-- | language-web/src/main/js/editor/EditorArea.tsx | 9 |
1 files changed, 8 insertions, 1 deletions
diff --git a/language-web/src/main/js/editor/EditorArea.tsx b/language-web/src/main/js/editor/EditorArea.tsx index 460005ce..7b6201ed 100644 --- a/language-web/src/main/js/editor/EditorArea.tsx +++ b/language-web/src/main/js/editor/EditorArea.tsx | |||
@@ -1,7 +1,6 @@ | |||
1 | import { Command, EditorView } from '@codemirror/view'; | 1 | import { Command, EditorView } from '@codemirror/view'; |
2 | import { closeSearchPanel, openSearchPanel } from '@codemirror/search'; | 2 | import { closeSearchPanel, openSearchPanel } from '@codemirror/search'; |
3 | import { closeLintPanel, openLintPanel } from '@codemirror/lint'; | 3 | import { closeLintPanel, openLintPanel } from '@codemirror/lint'; |
4 | |||
5 | import { observer } from 'mobx-react-lite'; | 4 | import { observer } from 'mobx-react-lite'; |
6 | import React, { | 5 | import React, { |
7 | useCallback, | 6 | useCallback, |
@@ -64,6 +63,13 @@ function usePanel( | |||
64 | return setCachedViewState; | 63 | return setCachedViewState; |
65 | } | 64 | } |
66 | 65 | ||
66 | function fixCodeMirrorAccessibility(editorView: EditorView) { | ||
67 | // Reported by Lighthouse 8.3.0. | ||
68 | const { contentDOM } = editorView; | ||
69 | contentDOM.removeAttribute('aria-expanded'); | ||
70 | contentDOM.setAttribute('aria-label', 'Code editor'); | ||
71 | } | ||
72 | |||
67 | export const EditorArea = observer(() => { | 73 | export const EditorArea = observer(() => { |
68 | const { editorStore } = useRootStore(); | 74 | const { editorStore } = useRootStore(); |
69 | const editorParentRef = useRef<HTMLDivElement | null>(null); | 75 | const editorParentRef = useRef<HTMLDivElement | null>(null); |
@@ -109,6 +115,7 @@ export const EditorArea = observer(() => { | |||
109 | } | 115 | } |
110 | }, | 116 | }, |
111 | }); | 117 | }); |
118 | fixCodeMirrorAccessibility(editorView); | ||
112 | setEditorViewState(editorView); | 119 | setEditorViewState(editorView); |
113 | setSearchPanelOpen(false); | 120 | setSearchPanelOpen(false); |
114 | setLintPanelOpen(false); | 121 | setLintPanelOpen(false); |