Adding aria-labels to example modals.

elastic · Mar 8, 2024 · 52622ce · 52622ce
1 parent fcee44e
commit 52622ce
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/src-docs/src/views/modal/confirm_modal.tsx b/src-docs/src/views/modal/confirm_modal.tsx
@@ -22,6 +22,7 @@ export default () => {
   if (isModalVisible) {
     modal = (
       <EuiConfirmModal
+        aria-label="EuiModal confirm example"
         style={{ width: 600 }}
         title="Update subscription to Platinum?"
         onCancel={closeModal}
@@ -44,6 +45,7 @@ export default () => {
   if (isDestroyModalVisible) {
     destroyModal = (
       <EuiConfirmModal
+        aria-label="EuiModal confirm example two"
         title="Discard dashboard changes?"
         onCancel={closeDestroyModal}
         onConfirm={closeDestroyModal}

diff --git a/src-docs/src/views/modal/confirm_modal_loading.tsx b/src-docs/src/views/modal/confirm_modal_loading.tsx
@@ -41,6 +41,7 @@ export default () => {
   if (isModalVisible) {
     modal = (
       <EuiConfirmModal
+        aria-label="EuiModal confirm loading"
         title="Delete the EUI repo?"
         onCancel={closeModal}
         onConfirm={() => {

diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
@@ -21,7 +21,7 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal onClose={closeModal}>
+      <EuiModal aria-label="EuiModal example" onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>

diff --git a/src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.tsx
@@ -113,7 +113,11 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal onClose={closeModal} initialFocus="[name=popswitch]">
+      <EuiModal
+        aria-label="EuiModal form example"
+        onClose={closeModal}
+        initialFocus="[name=popswitch]"
+      >
         <EuiModalHeader>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>

diff --git a/src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.tsx
@@ -21,7 +21,11 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal style={{ width: 800 }} onClose={closeModal}>
+      <EuiModal
+        aria-label="EuiModal modal width"
+        style={{ width: 800 }}
+        onClose={closeModal}
+      >
         <EuiModalHeader>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>