Merge pull request #1942 from deundrewilliams/issue/1788-assessment-a…

…ccessibility Accessibility Fixes for Assessment Updates
ucfopen · Sep 9, 2022 · ca8a676 · ca8a676
2 parents 90ade13 + 66a961d
commit ca8a676
Show file tree

Hide file tree

Showing 23 changed files with 5,142 additions and 78 deletions.
diff --git a/...document-engine/__tests__/common/components/modal/__snapshots__/error-dialog.test.js.snap b/...document-engine/__tests__/common/components/modal/__snapshots__/error-dialog.test.js.snap
@@ -12,7 +12,9 @@ exports[`ErrorDialog ErrorDialog component 1`] = `
       style={null}
     >
       <div
+        aria-atomic="true"
         aria-labelledby="obojobo-draft--components--modal--modal--content"
+        aria-live="polite"
         className="obojobo-draft--components--modal--modal"
         role="dialog"
         tabIndex="-1"

diff --git a/...bojobo-document-engine/__tests__/common/components/modal/__snapshots__/modal.test.js.snap b/...bojobo-document-engine/__tests__/common/components/modal/__snapshots__/modal.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`Modal Modal 1`] = `
 <div
+  aria-atomic="true"
   aria-labelledby="obojobo-draft--components--modal--modal--content"
+  aria-live="polite"
   className="obojobo-draft--components--modal--modal mockClassName"
   role="dialog"
   tabIndex="-1"

diff --git a/...ojobo-document-engine/__tests__/common/components/modal/__snapshots__/prompt.test.js.snap b/...ojobo-document-engine/__tests__/common/components/modal/__snapshots__/prompt.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Prompt Modal Prompt component 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"prompt\\"><label for=\\"common--components--modal--prompt--input\\"></label><input type=\\"text\\" id=\\"common--components--modal--prompt--input\\" size=\\"50\\" value=\\"\\"></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`Prompt Modal Prompt component 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"prompt\\"><label for=\\"common--components--modal--prompt--input\\"></label><input type=\\"text\\" id=\\"common--components--modal--prompt--input\\" size=\\"50\\" value=\\"\\"></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`Prompt Modal Prompt component changes value 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"prompt\\"><label for=\\"common--components--modal--prompt--input\\"></label><input type=\\"text\\" id=\\"common--components--modal--prompt--input\\" size=\\"50\\" value=\\"changed\\"></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`Prompt Modal Prompt component changes value 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"prompt\\"><label for=\\"common--components--modal--prompt--input\\"></label><input type=\\"text\\" id=\\"common--components--modal--prompt--input\\" size=\\"50\\" value=\\"changed\\"></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
 
-exports[`Prompt Modal Prompt component focuses on first element 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"prompt\\"><label for=\\"common--components--modal--prompt--input\\"></label><input type=\\"text\\" id=\\"common--components--modal--prompt--input\\" size=\\"50\\" value=\\"\\"></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`Prompt Modal Prompt component focuses on first element 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\"><div class=\\"prompt\\"><label for=\\"common--components--modal--prompt--input\\"></label><input type=\\"text\\" id=\\"common--components--modal--prompt--input\\" size=\\"50\\" value=\\"\\"></div></div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
diff --git a/...ocument-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap b/...ocument-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap
@@ -9,7 +9,9 @@ exports[`SimpleDialog SimpleDialog cancelOk 1`] = `
     style={null}
   >
     <div
+      aria-atomic="true"
       aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
       className="obojobo-draft--components--modal--modal"
       role="dialog"
       tabIndex="-1"
@@ -85,7 +87,9 @@ exports[`SimpleDialog SimpleDialog no type 1`] = `
     style={null}
   >
     <div
+      aria-atomic="true"
       aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
       className="obojobo-draft--components--modal--modal"
       role="dialog"
       tabIndex="-1"
@@ -161,7 +165,9 @@ exports[`SimpleDialog SimpleDialog noOrYes 1`] = `
     style={null}
   >
     <div
+      aria-atomic="true"
       aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
       className="obojobo-draft--components--modal--modal"
       role="dialog"
       tabIndex="-1"
@@ -242,7 +248,9 @@ exports[`SimpleDialog SimpleDialog ok 1`] = `
     style={null}
   >
     <div
+      aria-atomic="true"
       aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
       className="obojobo-draft--components--modal--modal"
       role="dialog"
       tabIndex="-1"
@@ -305,7 +313,9 @@ exports[`SimpleDialog SimpleDialog yesOrNo 1`] = `
     style={null}
   >
     <div
+      aria-atomic="true"
       aria-labelledby="obojobo-draft--components--modal--modal--content"
+      aria-live="polite"
       className="obojobo-draft--components--modal--modal"
       role="dialog"
       tabIndex="-1"
@@ -377,4 +387,4 @@ exports[`SimpleDialog SimpleDialog yesOrNo 1`] = `
 </div>
 `;
 
-exports[`SimpleDialog focusOnFirstElement without props 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\">Content</div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;
+exports[`SimpleDialog focusOnFirstElement without props 1`] = `"<div class=\\"obojobo-draft--components--modal--simple-dialog\\"><div class=\\"obojobo-draft--components--modal--dialog \\"><div class=\\"obojobo-draft--components--modal--modal\\" role=\\"dialog\\" aria-labelledby=\\"obojobo-draft--components--modal--modal--content\\" tabindex=\\"-1\\" aria-live=\\"polite\\" aria-atomic=\\"true\\"><input aria-label=\\"Start of dialog\\" class=\\"first-tab\\" type=\\"text\\"><div class=\\"content\\" id=\\"obojobo-draft--components--modal--modal--content\\"><div class=\\"dialog-content\\" style=\\"text-align: center;\\">Content</div><div class=\\"controls\\"><div class=\\"obojobo-draft--components--button alt-action is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\">Cancel</button></div><div class=\\"obojobo-draft--components--button is-not-dangerous align-center\\" contenteditable=\\"false\\"><button type=\\"button\\" class=\\"button\\" contenteditable=\\"false\\" tabindex=\\"0\\">OK</button></div></div></div><input aria-label=\\"End of dialog\\" class=\\"last-tab\\" type=\\"text\\"></div></div></div>"`;