fix codemirror hidden images (#395)

RaspberryPiFoundation · Mar 2, 2023 · 2c91cf6 · 2c91cf6
1 parent 2a0e2f5
commit 2c91cf6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,7 +34,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Renaming project, adding new file or renaming file always triggers autosave (#368)
 - Use `HtmlRunner` for `html` projects (#378)
 - Accessibility Fixes (#373, #382, #383)
-- Add `visibility: hidden` to the codemirror `cm-widgetBuffer` (#384)
+- Hide the codemirror `cm-widgetBuffer` (#384, #395)
 - Height discrepancy of the tab containers (#385)
 
 ## [0.12.0] - 2023-01-27

diff --git a/src/components/Editor/EditorPanel/EditorPanel.js b/src/components/Editor/EditorPanel/EditorPanel.js
@@ -95,8 +95,7 @@ const EditorPanel = ({
     // Add alt text to hidden images to fix accessibility error
     const hiddenImages = view.contentDOM.getElementsByClassName('cm-widgetBuffer');
     for (let img of hiddenImages) {
-      img.setAttribute('alt', null)
-      img.style.visibility = 'hidden'
+      img.setAttribute('role', 'presentation')
     }
 
     return () => {

diff --git a/src/components/Editor/EditorPanel/EditorPanel.test.js b/src/components/Editor/EditorPanel/EditorPanel.test.js
@@ -2,11 +2,14 @@ import configureStore from 'redux-mock-store'
 import { Provider } from "react-redux"
 import { SettingsContext } from "../../../settings"
 import { render } from '@testing-library/react'
+import { axe, toHaveNoViolations }from 'jest-axe'
 import EditorPanel from './EditorPanel'
 
+expect.extend(toHaveNoViolations)
+
 describe('When font size is set', () => {
 
-  let editorContainer
+  let editor
 
   beforeEach(() => {
     const middlewares = []
@@ -21,17 +24,22 @@ describe('When font size is set', () => {
       }
     }
     const store = mockStore(initialState);
-    editorContainer = render(
+    const editorContainer = render(
       <Provider store={store}>
         <SettingsContext.Provider value={{ theme: 'dark', fontSize: 'myFontSize' }}>
           <EditorPanel fileName='main' extension='py'/>
         </SettingsContext.Provider>
       </Provider>
     )
+    editor = editorContainer.container.querySelector('.editor')
   })
 
   test('Font size class is set correctly', () => {
-    const editor = editorContainer.container.querySelector('.editor')
     expect(editor).toHaveClass("editor--myFontSize")
   })
+
+  test('Editor panel has no AXE violations', async () => {
+    const axeResults = await axe(editor)
+    expect(axeResults).toHaveNoViolations()
+  })
 })