script change

w3c · Feb 4, 2022 · 935a967 · 935a967
1 parent 927c750
commit 935a967
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 0 deletions.
diff --git a/tests/alert-test/data/commands.csv b/tests/alert-test/data/commands.csv
@@ -0,0 +1,6 @@
+testId,task,mode,at,commandA,commandB,commandC,commandD,commandE,commandF
+1,trigger alert,reading,JAWS,SPACE,ENTER,,,,
+1,trigger alert,reading,NVDA,SPACE,ENTER,,,,
+2,trigger alert,interaction,JAWS,SPACE,ENTER,,,,
+2,trigger alert,interaction,NVDA,SPACE,ENTER,,,,
+3,trigger alert,interaction,voiceover_macos,CTRL_OPT_SPACE,SPACE,ENTER,,,
diff --git a/tests/alert-test/data/js/setFocusOnButton.js b/tests/alert-test/data/js/setFocusOnButton.js
@@ -0,0 +1,2 @@
+// sets focus on the 'Trigger Alert' button
+testPageDocument.querySelector('#alert-trigger').focus();
diff --git a/tests/alert-test/data/references.csv b/tests/alert-test/data/references.csv
@@ -0,0 +1,10 @@
+refId,value
+author,Isabel Del Castillo
+authorEmail,[email protected]
+title,Alert Example
+reference,reference/2021-10-15_143458/alert.html
+designPattern,https://w3c.github.io/aria-practices/#alert
+example,https://w3c.github.io/aria-practices/examples/alert/alert.html
+alert,https://w3c.github.io/aria/#alert
+aria-live,https://w3c.github.io/aria/#aria-live)
+aria-atomic,https://w3c.github.io/aria/#aria-atomic
diff --git a/tests/alert-test/data/tests.csv b/tests/alert-test/data/tests.csv
@@ -0,0 +1,4 @@
+testId,title,appliesTo,mode,task,setupScript,setupScriptDescription,refs,instructions,assertion1,assertion2,assertion3,assertion4,assertion5,assertion6,assertion7
+1,Trigger an alert in reading mode,"JAWS,NVDA",reading,trigger alert,setFocusOnButton,sets focus on the 'Trigger Alert' button,alert,"With the reading cursor on the 'Trigger Alert' button, activate the button to trigger the alert.",Role 'alert' is conveyed,Text 'Hello' is conveyed,,,,,
+2,Trigger an alert in interaction mode,"JAWS,NVDA",interaction,trigger alert,setFocusOnButton,sets focus on the 'Trigger Alert' button,alert,"With focus on the 'Trigger Alert' button, activate the button to trigger the alert.",Role 'alert' is conveyed,Text 'Hello' is conveyed,,,,,
+3,Trigger an alert,voiceover_macos,interaction,trigger alert,setFocusOnButton,sets focus on the 'Trigger Alert' button,alert,"With focus on the 'Trigger Alert' button, activate the button to trigger the alert.",Role 'alert' is conveyed,Text 'Hello' is conveyed,,,,,
diff --git a/tests/alert-test/reference/2021-10-15_143458/alert.html b/tests/alert-test/reference/2021-10-15_143458/alert.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Alert Example</title>
+
+    <!--  js and css for this example. -->
+    <link href="css/alert.css" rel="stylesheet">
+    <script src="js/alert.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <main>
+    <h1>Alert Example</h1>
+    <p>
+      The below example demonstrates the <a href="https://w3c.github.io/#alert">design pattern for alert</a>.
+      Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
+    </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">
+        <button type="button" id="alert-trigger">Trigger Alert</button>
+
+        <div id="example" role="alert"></div>
+
+        <!--  The following script element contains the content that will be inserted into the alert element. -->
+        <script type="text/template" id="alert-template">
+          <p>Hello</p>
+        </script>
+      </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/alert-test/reference/2021-10-15_143458/css/alert.css b/tests/alert-test/reference/2021-10-15_143458/css/alert.css
@@ -0,0 +1,10 @@
+[role="alert"] {
+  padding: 10px;
+  border: 2px solid hsl(206, 74%, 54%);
+  border-radius: 4px;
+  background: hsl(206, 74%, 90%);
+}
+
+[role="alert"]:empty {
+  display: none;
+}
diff --git a/tests/alert-test/reference/2021-10-15_143458/js/alert.js b/tests/alert-test/reference/2021-10-15_143458/js/alert.js
@@ -0,0 +1,29 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ */
+
+'use strict';
+
+window.addEventListener('load', function () {
+  var button = document.getElementById('alert-trigger');
+
+  button.addEventListener('click', addAlert);
+});
+
+/*
+ * @function addAlert
+ *
+ * @desc Adds an alert to the page
+ *
+ * @param   {object}  event  -  Standard W3C event object
+ *
+ */
+
+function addAlert() {
+  var example = document.getElementById('example');
+  var template = document.getElementById('alert-template').innerHTML;
+
+  example.innerHTML = template;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// sets focus on the 'Trigger Alert' button
		testPageDocument.querySelector('#alert-trigger').focus();