diff options
author | 2022-08-19 21:24:35 +0200 | |
---|---|---|
committer | 2022-08-20 21:41:50 +0200 | |
commit | 97f050bb39f5f88d80aab3aa7880002ead4f18d9 (patch) | |
tree | 3be89a15b08df304da96786ac5db801ce4903e7c | |
parent | fix(frontend): destroy service worker in dev mode (diff) | |
download | refinery-97f050bb39f5f88d80aab3aa7880002ead4f18d9.tar.gz refinery-97f050bb39f5f88d80aab3aa7880002ead4f18d9.tar.zst refinery-97f050bb39f5f88d80aab3aa7880002ead4f18d9.zip |
fix(frontend): CodeMirror gutter accessibility
Gutters are aria-hidden, so no accessibility attributes should point at
them.
-rw-r--r-- | subprojects/frontend/src/editor/EditorButtons.tsx | 1 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 12 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/createEditorState.ts | 8 |
3 files changed, 4 insertions, 17 deletions
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index 735531e8..8db9dfb7 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx | |||
@@ -58,7 +58,6 @@ function EditorButtons(): JSX.Element { | |||
58 | selected={editorStore.showLineNumbers} | 58 | selected={editorStore.showLineNumbers} |
59 | onClick={() => editorStore.toggleLineNumbers()} | 59 | onClick={() => editorStore.toggleLineNumbers()} |
60 | aria-label="Show line numbers" | 60 | aria-label="Show line numbers" |
61 | aria-controls={editorStore.lineNumbersId} | ||
62 | value="show-line-numbers" | 61 | value="show-line-numbers" |
63 | > | 62 | > |
64 | <FormatListNumberedIcon fontSize="small" /> | 63 | <FormatListNumberedIcon fontSize="small" /> |
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index 2ed7f5ce..b634a427 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -121,15 +121,9 @@ export default class EditorStore { | |||
121 | this.lintPanel.synchronizeStateToView(); | 121 | this.lintPanel.synchronizeStateToView(); |
122 | 122 | ||
123 | // Reported by Lighthouse 8.3.0. | 123 | // Reported by Lighthouse 8.3.0. |
124 | const { contentDOM, dom: containerDOM } = view; | 124 | const { contentDOM } = view; |
125 | contentDOM.removeAttribute('aria-expanded'); | 125 | contentDOM.removeAttribute('aria-expanded'); |
126 | contentDOM.setAttribute('aria-label', 'Code editor'); | 126 | contentDOM.setAttribute('aria-label', 'Code editor'); |
127 | const lineNumbersGutter = containerDOM.querySelector('.cm-lineNumbers'); | ||
128 | if (lineNumbersGutter === null) { | ||
129 | log.error('No line numbers in editor'); | ||
130 | } else { | ||
131 | lineNumbersGutter.id = this.lineNumbersId; | ||
132 | } | ||
133 | 127 | ||
134 | log.info('Editor created'); | 128 | log.info('Editor created'); |
135 | } | 129 | } |
@@ -242,10 +236,6 @@ export default class EditorStore { | |||
242 | log.debug('Redo', this.doStateCommand(redo)); | 236 | log.debug('Redo', this.doStateCommand(redo)); |
243 | } | 237 | } |
244 | 238 | ||
245 | get lineNumbersId(): string { | ||
246 | return `${this.id}-lineNumbers`; | ||
247 | } | ||
248 | |||
249 | toggleLineNumbers(): void { | 239 | toggleLineNumbers(): void { |
250 | this.showLineNumbers = !this.showLineNumbers; | 240 | this.showLineNumbers = !this.showLineNumbers; |
251 | log.debug('Show line numbers', this.showLineNumbers); | 241 | log.debug('Show line numbers', this.showLineNumbers); |
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts index caaca7f5..7b0f3c07 100644 --- a/subprojects/frontend/src/editor/createEditorState.ts +++ b/subprojects/frontend/src/editor/createEditorState.ts | |||
@@ -86,16 +86,14 @@ export default function createEditorState( | |||
86 | }), | 86 | }), |
87 | foldGutter({ | 87 | foldGutter({ |
88 | markerDOM(open) { | 88 | markerDOM(open) { |
89 | const button = document.createElement('button'); | 89 | const div = document.createElement('div'); |
90 | button.className = [ | 90 | div.className = [ |
91 | editorClassNames.foldMarker, | 91 | editorClassNames.foldMarker, |
92 | open | 92 | open |
93 | ? editorClassNames.foldMarkerOpen | 93 | ? editorClassNames.foldMarkerOpen |
94 | : editorClassNames.foldMarkerClosed, | 94 | : editorClassNames.foldMarkerClosed, |
95 | ].join(' '); | 95 | ].join(' '); |
96 | button.ariaPressed = open ? 'true' : 'false'; | 96 | return div; |
97 | button.ariaLabel = 'Fold lines'; | ||
98 | return button; | ||
99 | }, | 97 | }, |
100 | }), | 98 | }), |
101 | keymap.of([ | 99 | keymap.of([ |