From 2c91cf6fd35e9ab84f49b66f440ac1f5be1d072c Mon Sep 17 00:00:00 2001
From: Lois Wells <88904316+loiswells97@users.noreply.github.com>
Date: Thu, 2 Mar 2023 17:58:45 +0000
Subject: [PATCH] fix codemirror hidden images (#395)

---
 CHANGELOG.md                                       |  2 +-
 src/components/Editor/EditorPanel/EditorPanel.js   |  3 +--
 .../Editor/EditorPanel/EditorPanel.test.js         | 14 +++++++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84e6016cb..51a0f640e 100644
--- 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
index ede6df232..81db04a34 100644
--- 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
index 4a3688190..cc879ba17 100644
--- 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()
+  })
 })