fix: a11y - add alt text for "exit" button in the editors

openedx · Sep 11, 2024 · b5e754a · b5e754a
1 parent 42df1c2
commit b5e754a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
@@ -51,6 +51,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
         />
       </h2>
       <IconButton
+        alt="Exit the editor"
         iconAs="Icon"
         onClick={[MockFunction openCancelConfirmModal]}
         src={[MockFunction icons.Close]}
@@ -132,6 +133,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
         />
       </h2>
       <IconButton
+        alt="Exit the editor"
         iconAs="Icon"
         onClick={[MockFunction openCancelConfirmModal]}
         src={[MockFunction icons.Close]}

diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
@@ -63,6 +63,7 @@ const EditorContainer = ({
             src={Close}
             iconAs={Icon}
             onClick={openCancelConfirmModal}
+            alt={intl.formatMessage(messages.exitButtonAlt)}
           />
         </div>
       </ModalDialog.Header>

diff --git a/src/editors/containers/EditorContainer/messages.js b/src/editors/containers/EditorContainer/messages.js
@@ -12,6 +12,11 @@ const messages = defineMessages({
     defaultMessage: 'Are you sure you want to exit the editor? Any unsaved changes will be lost.',
     description: 'Description text for modal confirming cancellation',
   },
+  exitButtonAlt: {
+    id: 'authoring.editorContainer.exitButton.alt',
+    defaultMessage: 'Exit the editor',
+    description: 'Alt text for the Exit button',
+  },
   okButtonLabel: {
     id: 'authoring.editorContainer.okButton.label',
     defaultMessage: 'OK',