From 97f050bb39f5f88d80aab3aa7880002ead4f18d9 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Fri, 19 Aug 2022 21:24:35 +0200
Subject: fix(frontend): CodeMirror gutter accessibility

Gutters are aria-hidden, so no accessibility attributes should point at
them.
---
 subprojects/frontend/src/editor/EditorButtons.tsx    |  1 -
 subprojects/frontend/src/editor/EditorStore.ts       | 12 +-----------
 subprojects/frontend/src/editor/createEditorState.ts |  8 +++-----
 3 files changed, 4 insertions(+), 17 deletions(-)

(limited to 'subprojects/frontend')

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 {
           selected={editorStore.showLineNumbers}
           onClick={() => editorStore.toggleLineNumbers()}
           aria-label="Show line numbers"
-          aria-controls={editorStore.lineNumbersId}
           value="show-line-numbers"
         >
           <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 {
     this.lintPanel.synchronizeStateToView();
 
     // Reported by Lighthouse 8.3.0.
-    const { contentDOM, dom: containerDOM } = view;
+    const { contentDOM } = view;
     contentDOM.removeAttribute('aria-expanded');
     contentDOM.setAttribute('aria-label', 'Code editor');
-    const lineNumbersGutter = containerDOM.querySelector('.cm-lineNumbers');
-    if (lineNumbersGutter === null) {
-      log.error('No line numbers in editor');
-    } else {
-      lineNumbersGutter.id = this.lineNumbersId;
-    }
 
     log.info('Editor created');
   }
@@ -242,10 +236,6 @@ export default class EditorStore {
     log.debug('Redo', this.doStateCommand(redo));
   }
 
-  get lineNumbersId(): string {
-    return `${this.id}-lineNumbers`;
-  }
-
   toggleLineNumbers(): void {
     this.showLineNumbers = !this.showLineNumbers;
     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(
       }),
       foldGutter({
         markerDOM(open) {
-          const button = document.createElement('button');
-          button.className = [
+          const div = document.createElement('div');
+          div.className = [
             editorClassNames.foldMarker,
             open
               ? editorClassNames.foldMarkerOpen
               : editorClassNames.foldMarkerClosed,
           ].join(' ');
-          button.ariaPressed = open ? 'true' : 'false';
-          button.ariaLabel = 'Fold lines';
-          return button;
+          return div;
         },
       }),
       keymap.of([
-- 
cgit v1.2.3-54-g00ecf