Test plan for aria-required on a text input (#1335)

howard-e · mcking65 · web-flow · commit 8f4bd2be7302 · 2025-11-10T15:01:10.000+09:00
* Move 'ROOT/tests/resources' folder to 'ROOT/resources'

* Fixes after rebase

* Update .prettierignore

* Move build folder's resources location and update paths

* Update lint ignores

* Fixes after rebase

* Update prettierignore and reinstall deps

* Update eslint.config.mjs

* Move current folders in tests/ to tests/apg/

* Continue running npm run create-all-tests

* Similar structure in build folder

* Share build logic for v1

* Fix review pages to use subfolder if found

* Fix tests

* Support allowing a '--target' flag for which tests subfolder to place the cloned content in

* Fix paths in built files

* Fix tests

* Create /tests/aria/fake-alert

* Update name of pattern under /tests/aria/fake-alert

* Force tests hash update

* Rename fake-alert to aria-required

* Revise references.csv

* Generate .html source files with scripts automatically

* Empty commit

* Make test case and setup script

* rename directory from aria-required to aria-required-text-input

* Empty commit after updating netlify environment versions

* Empty commit after updating netlify environment versions

* first 3 setup scripts

* rename html file and update references.csv

* update assertions and references

* update commands

* Finish remaining 3 setup scripts

* Generate .html source files with scripts automatically

---------

Co-authored-by: Matt King &lt;a11yThinker@gmail.com&gt;
Co-authored-by: mcking65 &lt;7241781+mcking65@users.noreply.github.com&gt;
diff --git a/tests/aria/aria-required-text-input/data/assertions.csv b/tests/aria/aria-required-text-input/data/assertions.csv
@@ -0,0 +1,4 @@
+assertionId,priority,assertionStatement,assertionPhrase,refIds
+nameOfInput,1,"Name of the text input, 'Imaginary Word', is conveyed","convey name of the text input, 'Imaginary Word'",inputTypeText
+roleTextbox,1,Role 'textbox' is conveyed,convey role 'textbox',inputTypeText
+stateRequired,1,"State of the input, 'required', is conveyed","convey state of the input, 'required'",aria-required
diff --git a/tests/aria/aria-required-text-input/data/jaws-commands.csv b/tests/aria/aria-required-text-input/data/jaws-commands.csv
@@ -0,0 +1,29 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToRequiredElement,down,virtualCursor,,1
+navForwardsToRequiredElement,e,virtualCursor,,1.1
+navForwardsToRequiredElement,f,virtualCursor,,1.2
+navForwardsToRequiredElement,tab,virtualCursor,,1.3
+navForwardsToRequiredElement,tab,pcCursor,,1.4
+navBackToRequiredElement,up,virtualCursor,,2
+navBackToRequiredElement,shift+e,virtualCursor,,2.1
+navBackToRequiredElement,shift+f,virtualCursor,,2.2
+navBackToRequiredElement,shift+tab,virtualCursor,,2.3
+navBackToRequiredElement,shift+tab,pcCursor,,2.4
+navForwardsToNotRequiredElement,down,virtualCursor,,5
+navForwardsToNotRequiredElement,e,virtualCursor,,5.1
+navForwardsToNotRequiredElement,f,virtualCursor,,5.2
+navForwardsToNotRequiredElement,tab,virtualCursor,,5.3
+navForwardsToNotRequiredElement,tab,pcCursor,,5.4
+navBackToNotRequiredElement,up,virtualCursor,,6
+navBackToNotRequiredElement,shift+e,virtualCursor,,6.1
+navBackToNotRequiredElement,shift+f,virtualCursor,,6.2
+navBackToNotRequiredElement,shift+tab,virtualCursor,,6.3
+navBackToNotRequiredElement,shift+tab,pcCursor,,6.4
+reqInfoAboutRequiredElement,ins+tab,virtualCursor,,10
+reqInfoAboutRequiredElement,ins+up,virtualCursor,,10.1
+reqInfoAboutRequiredElement,ins+tab,pcCursor,,10.2
+reqInfoAboutRequiredElement,ins+up,pcCursor,,10.3
+reqInfoAboutNotRequiredElement,ins+tab,virtualCursor,,11
+reqInfoAboutNotRequiredElement,ins+up,virtualCursor,,11.1
+reqInfoAboutNotRequiredElement,ins+tab,pcCursor,,11.2
+reqInfoAboutNotRequiredElement,ins+up,pcCursor,,11.3
diff --git a/tests/aria/aria-required-text-input/data/js/setFocusAfterNotRequiredElement.js b/tests/aria/aria-required-text-input/data/js/setFocusAfterNotRequiredElement.js
@@ -0,0 +1,7 @@
+// Set  aria-required attribute on the text input to "false"
+var input = testPageDocument.getElementById('imaginary-word');
+if (input) {
+  input.setAttribute('aria-required', 'false');
+}
+// set focus on a link after the text input
+testPageDocument.querySelector('#afterlink').focus();
diff --git a/tests/aria/aria-required-text-input/data/js/setFocusAfterRequiredElement.js b/tests/aria/aria-required-text-input/data/js/setFocusAfterRequiredElement.js
@@ -0,0 +1,2 @@
+// sets focus on a link after the button
+testPageDocument.querySelector('#afterlink').focus();
diff --git a/tests/aria/aria-required-text-input/data/js/setFocusBeforeNotRequiredElement.js b/tests/aria/aria-required-text-input/data/js/setFocusBeforeNotRequiredElement.js
@@ -0,0 +1,7 @@
+// Set  aria-required attribute on the text input to "false"
+var input = testPageDocument.getElementById('imaginary-word');
+if (input) {
+  input.setAttribute('aria-required', 'false');
+}
+// set focus on a link before the text input
+testPageDocument.querySelector('#beforelink').focus();
diff --git a/tests/aria/aria-required-text-input/data/js/setFocusBeforeRequiredElement.js b/tests/aria/aria-required-text-input/data/js/setFocusBeforeRequiredElement.js
@@ -0,0 +1,2 @@
+// sets focus on a link before the button
+testPageDocument.querySelector('#beforelink').focus();
diff --git a/tests/aria/aria-required-text-input/data/js/setFocusOnNotRequiredElement.js b/tests/aria/aria-required-text-input/data/js/setFocusOnNotRequiredElement.js
@@ -0,0 +1,7 @@
+// Set  aria-required attribute on the text input to "false"
+var input = testPageDocument.getElementById('imaginary-word');
+if (input) {
+  input.setAttribute('aria-required', 'false');
+}
+// set focus on the not required text input
+testPageDocument.querySelector('#imaginary-word').focus();
diff --git a/tests/aria/aria-required-text-input/data/js/setFocusOnRequiredElement.js b/tests/aria/aria-required-text-input/data/js/setFocusOnRequiredElement.js
@@ -0,0 +1,2 @@
+// sets focus on the required input
+testPageDocument.querySelector('#imaginary-word').focus();
diff --git a/tests/aria/aria-required-text-input/data/nvda-commands.csv b/tests/aria/aria-required-text-input/data/nvda-commands.csv
@@ -0,0 +1,29 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToRequiredElement,down,browseMode,,1
+navForwardsToRequiredElement,e,browseMode,,1.1
+navForwardsToRequiredElement,f,browseMode,,1.2
+navForwardsToRequiredElement,tab,browseMode,,1.3
+navForwardsToRequiredElement,tab,focusMode,,1.4
+navBackToRequiredElement,up,browseMode,,2
+navBackToRequiredElement,shift+e,browseMode,,2.1
+navBackToRequiredElement,shift+f,browseMode,,2.2
+navBackToRequiredElement,shift+tab,browseMode,,2.3
+navBackToRequiredElement,shift+tab,focusMode,,2.4
+navForwardsToNotRequiredElement,down,browseMode,,5
+navForwardsToNotRequiredElement,e,browseMode,,5.1
+navForwardsToNotRequiredElement,f,browseMode,,5.2
+navForwardsToNotRequiredElement,tab,browseMode,,5.3
+navForwardsToNotRequiredElement,tab,focusMode,,5.4
+navBackToNotRequiredElement,up,browseMode,,6
+navBackToNotRequiredElement,shift+e,browseMode,,6.1
+navBackToNotRequiredElement,shift+f,browseMode,,6.2
+navBackToNotRequiredElement,shift+tab,browseMode,,6.3
+navBackToNotRequiredElement,shift+tab,focusMode,,6.4
+reqInfoAboutRequiredElement,ins+tab,browseMode,,10
+reqInfoAboutRequiredElement,ins+up,browseMode,,10.1
+reqInfoAboutRequiredElement,ins+tab,focusMode,,10.2
+reqInfoAboutRequiredElement,ins+up,focusMode,,10.3
+reqInfoAboutNotRequiredElement,ins+tab,browseMode,,11
+reqInfoAboutNotRequiredElement,ins+up,browseMode,,11.1
+reqInfoAboutNotRequiredElement,ins+tab,focusMode,,11.2
+reqInfoAboutNotRequiredElement,ins+up,focusMode,,11.3
diff --git a/tests/aria/aria-required-text-input/data/references.csv b/tests/aria/aria-required-text-input/data/references.csv
@@ -0,0 +1,9 @@
+refId,type,value,linkText
+author,metadata,Matt King,
+authorEmail,metadata,a11ythinker@gmail.com,
+title,metadata,aria-required on a Text Input,
+reference,metadata,reference/2025-11-5/aria-required-text-input.html,Test Case Page for aria-required on text input Example
+designPattern,metadata,,
+example,metadata,,
+aria-required,aria,aria-required,aria-required
+inputTypeText,htmlAam,inputTypeText,inputTypeText
diff --git a/tests/aria/aria-required-text-input/data/scripts.csv b/tests/aria/aria-required-text-input/data/scripts.csv
@@ -0,0 +1,7 @@
+setupScript,setupScriptDescription
+setFocusAfterRequiredElement,sets focus on a link after the required text input
+setFocusAfterNotRequiredElement,sets aria-required to false and then focuses a link after the required text input
+setFocusBeforeRequiredElement,sets focus on a link before the required text input
+setFocusBeforeNotRequiredElement,sets aria-required to false and then focuses a link before the required text input
+setFocusOnRequiredElement,sets focus on the required text input
+setFocusOnNotRequiredElement,sets aria-required to false and then focuses the text input
diff --git a/tests/aria/aria-required-text-input/data/tests.csv b/tests/aria/aria-required-text-input/data/tests.csv
@@ -0,0 +1,7 @@
+testId,title,presentationNumber,setupScript,instructions,assertions
+navForwardsToRequiredElement,Navigate forwards to a required text input,5,setFocusBeforeRequiredElement,"Starting at the 'Navigate forwards from here' link, navigate to the 'Imaginary Word' text input.",nameOfInput roleTextbox stateRequired
+navBackToRequiredElement,Navigate backwards to a required text input,6,setFocusAfterRequiredElement,"Starting at the 'Navigate backwards from here' link, navigate to the 'Imaginary Word' text input.",nameOfInput roleTextbox stateRequired
+navForwardsToNotRequiredElement,Navigate forwards to a text input with required set to false,10,setFocusBeforeNotRequiredElement,"Starting at the 'Navigate forwards from here' link, navigate to the 'Imaginary Word' text input.",nameOfInput roleTextbox
+navBackToNotRequiredElement,Navigate backwards to a text input with required set to false,11,setFocusAfterNotRequiredElement,"Starting at the 'Navigate backwards from here' link, navigate to the 'Imaginary Word' text input.",nameOfInput roleTextbox
+reqInfoAboutRequiredElement,Request information about a required text input,15,setFocusOnRequiredElement,"Starting at the 'Imaginary Word' text input, read information about the text input.",nameOfInput roleTextbox stateRequired
+reqInfoAboutNotRequiredElement,Request information about a text input with required set to false,16,setFocusOnNotRequiredElement,"Starting at the 'Imaginary Word' text input, read information about the text input.",nameOfInput roleTextbox
diff --git a/tests/aria/aria-required-text-input/data/voiceover_macos-commands.csv b/tests/aria/aria-required-text-input/data/voiceover_macos-commands.csv
@@ -0,0 +1,21 @@
+testId,command,settings,assertionExceptions,presentationNumber
+navForwardsToRequiredElement,ctrl+opt+right,,,1
+navForwardsToRequiredElement,f,singleQuickKeyNavOn,,1.1
+navForwardsToRequiredElement,j,singleQuickKeyNavOn,,1.2
+navForwardsToRequiredElement,tab,,,1.3
+navBackToRequiredElement,ctrl+opt+left,,,2
+navBackToRequiredElement,shift+f,singleQuickKeyNavOn,,2.1
+navBackToRequiredElement,shift+j,singleQuickKeyNavOn,,2.2
+navBackToRequiredElement,shift+tab,,,2.3
+navForwardsToNotRequiredElement,ctrl+opt+right,,,5
+navForwardsToNotRequiredElement,f,singleQuickKeyNavOn,,5.1
+navForwardsToNotRequiredElement,j,singleQuickKeyNavOn,,5.2
+navForwardsToNotRequiredElement,tab,,,5.3
+navBackToNotRequiredElement,ctrl+opt+left,,,6
+navBackToNotRequiredElement,shift+f,singleQuickKeyNavOn,,6.1
+navBackToNotRequiredElement,shift+j,singleQuickKeyNavOn,,6.2
+navBackToNotRequiredElement,shift+tab,,,6.3
+reqInfoAboutRequiredElement,ctrl+opt+f3,,,10
+reqInfoAboutRequiredElement,ctrl+opt+f4,,,10.1
+reqInfoAboutNotRequiredElement,ctrl+opt+f3,,,11
+reqInfoAboutNotRequiredElement,ctrl+opt+f4,,,11.1
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Text Input with aria-required Example</title>
+
+  <!--  js and css for this example. -->
+  <link href="css/aria-required.css" rel="stylesheet">
+  <script src="js/aria-required.js" type="text/javascript"></script>
+</head>
+
+<body>
+  <main>
+    <h1>Text Input with aria-required Example</h1>
+    <p>
+      The below example demonstrates a text input with the <code>aria-required</code> attribute.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <label for="imaginary-word">Imaginary Word</label>
+        <input type="text" id="imaginary-word" aria-required="true">
+        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+  </main>
+</body>
+
+</html>
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusAfterNotRequiredElement.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusAfterNotRequiredElement.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Text Input with aria-required Example</title>
+
+  <!--  js and css for this example. -->
+  <link href="css/aria-required.css" rel="stylesheet">
+  <script src="js/aria-required.js" type="text/javascript"></script>
+
+<!-- Generated by process-test-directory.js -->
+<script>
+  (function() {
+    function setupScript(testPageDocument) {
+      // setFocusAfterNotRequiredElement
+      // Set  aria-required attribute on the text input to "false"
+      var input = testPageDocument.getElementById('imaginary-word');
+      if (input) {
+        input.setAttribute('aria-required', 'false');
+      }
+      // set focus on a link after the text input
+      testPageDocument.querySelector('#afterlink').focus();
+
+    };
+    document.addEventListener('click', function(event) {
+      if (event.target.classList.contains('button-run-test-setup')) {
+        event.target.disabled = true;
+        setupScript(document);
+      }
+    });
+  })();
+</script>
+<!-- End of generated output --></head>
+
+<body>
+  <main>
+    <h1>Text Input with aria-required Example</h1>
+    <p>
+      The below example demonstrates a text input with the <code>aria-required</code> attribute.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <label for="imaginary-word">Imaginary Word</label>
+        <input type="text" id="imaginary-word" aria-required="true">
+        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+
+  <!-- Generated by process-test-directory.js -->
+  <div style="position: relative; left: 0; right: 0; height: 2rem;">
+    <button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
+  </div>
+  <!-- End of generated output --></main>
+</body>
+
+</html>
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusAfterRequiredElement.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusAfterRequiredElement.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Text Input with aria-required Example</title>
+
+  <!--  js and css for this example. -->
+  <link href="css/aria-required.css" rel="stylesheet">
+  <script src="js/aria-required.js" type="text/javascript"></script>
+
+<!-- Generated by process-test-directory.js -->
+<script>
+  (function() {
+    function setupScript(testPageDocument) {
+      // setFocusAfterRequiredElement
+      // sets focus on a link after the button
+      testPageDocument.querySelector('#afterlink').focus();
+
+    };
+    document.addEventListener('click', function(event) {
+      if (event.target.classList.contains('button-run-test-setup')) {
+        event.target.disabled = true;
+        setupScript(document);
+      }
+    });
+  })();
+</script>
+<!-- End of generated output --></head>
+
+<body>
+  <main>
+    <h1>Text Input with aria-required Example</h1>
+    <p>
+      The below example demonstrates a text input with the <code>aria-required</code> attribute.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <label for="imaginary-word">Imaginary Word</label>
+        <input type="text" id="imaginary-word" aria-required="true">
+        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+
+  <!-- Generated by process-test-directory.js -->
+  <div style="position: relative; left: 0; right: 0; height: 2rem;">
+    <button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
+  </div>
+  <!-- End of generated output --></main>
+</body>
+
+</html>
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusBeforeNotRequiredElement.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusBeforeNotRequiredElement.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Text Input with aria-required Example</title>
+
+  <!--  js and css for this example. -->
+  <link href="css/aria-required.css" rel="stylesheet">
+  <script src="js/aria-required.js" type="text/javascript"></script>
+
+<!-- Generated by process-test-directory.js -->
+<script>
+  (function() {
+    function setupScript(testPageDocument) {
+      // setFocusBeforeNotRequiredElement
+      // Set  aria-required attribute on the text input to "false"
+      var input = testPageDocument.getElementById('imaginary-word');
+      if (input) {
+        input.setAttribute('aria-required', 'false');
+      }
+      // set focus on a link before the text input
+      testPageDocument.querySelector('#beforelink').focus();
+
+    };
+    document.addEventListener('click', function(event) {
+      if (event.target.classList.contains('button-run-test-setup')) {
+        event.target.disabled = true;
+        setupScript(document);
+      }
+    });
+  })();
+</script>
+<!-- End of generated output --></head>
+
+<body>
+  <main>
+    <h1>Text Input with aria-required Example</h1>
+    <p>
+      The below example demonstrates a text input with the <code>aria-required</code> attribute.
+    </p>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <label for="imaginary-word">Imaginary Word</label>
+        <input type="text" id="imaginary-word" aria-required="true">
+        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+
+  <!-- Generated by process-test-directory.js -->
+  <div style="position: relative; left: 0; right: 0; height: 2rem;">
+    <button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
+  </div>
+  <!-- End of generated output --></main>
+</body>
+
+</html>
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusBeforeRequiredElement.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusBeforeRequiredElement.html
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusOnNotRequiredElement.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusOnNotRequiredElement.html
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusOnRequiredElement.html b/tests/aria/aria-required-text-input/reference/2025-11-5/aria-required-text-input.setFocusOnRequiredElement.html
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/css/aria-required.css b/tests/aria/aria-required-text-input/reference/2025-11-5/css/aria-required.css
diff --git a/tests/aria/aria-required-text-input/reference/2025-11-5/js/aria-required.js b/tests/aria/aria-required-text-input/reference/2025-11-5/js/aria-required.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// sets focus on a link after the button`
	`2`	`+testPageDocument.querySelector('#afterlink').focus();`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// sets focus on a link before the button`
	`2`	`+testPageDocument.querySelector('#beforelink').focus();`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// sets focus on the required input`
	`2`	`+testPageDocument.querySelector('#imaginary-word').focus();`