Skip to content

Commit c16567f

Browse files
IsaDCIsaDC
authored
Create tests for APG design pattern example: Link Example 1 - span element with text content (#514)
* Add references.csv * Add timestamped example directory and update references.csv * Add commands.csv * Add tests.csv * Update APG example version * Remove previous APG example. * Example: update page title and remove 'Related Links' nav and * Remove image directory * Add setup scripts * Replace commands.csv * Generate .html source files with scripts automatically Co-authored-by: IsaDC <IsaDC@users.noreply.github.com>
1 parent 9904e0e commit c16567f

File tree

12 files changed

+299
-0
lines changed

12 files changed

+299
-0
lines changed

‎tests/link-span-text/data/commands.csv‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
testId,task,mode,at,commandA,commandB,commandC,commandD
2+
1,Navigate forwards to a link,READING,JAWS,U,TAB,DOWN,
3+
1,Navigate forwards to a link,READING,NVDA,U,K,TAB,DOWN
4+
2,Navigate forwards to a link,INTERACTION,JAWS,TAB,,,
5+
2,Navigate forwards to a link,INTERACTION,NVDA,TAB,,,
6+
3,Navigate forwards to a link,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_RIGHT,TAB,CTRL_OPT_CMD_L,
7+
4,Navigate backwards to a link,READING,JAWS,SHIFT_U,UP,SHIFT_TAB,
8+
4,Navigate backwards to a link,READING,NVDA,SHIFT_U,SHIFT_K,UP,SHIFT_TAB
9+
5,Navigate backwards to a link,INTERACTION,JAWS,SHIFT_TAB,,,
10+
5,Navigate backwards to a link,INTERACTION,NVDA,SHIFT_TAB,,,
11+
6,Navigate backwards to a link,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_LEFT,SHIFT_TAB,SHIFT_CTRL_OPT_CMD_L,
12+
7,Read information about a link,READING,JAWS,INS_TAB,INS_UP,,
13+
7,Read information about a link,READING,NVDA,INS_TAB,INS_UP,,
14+
8,Read information about a link,INTERACTION,JAWS,INS_TAB,INS_UP,,
15+
8,Read information about a link,INTERACTION,NVDA,INS_TAB,INS_UP,,
16+
9,Read information about a link,INTERACTION,VOICEOVER_MACOS,CTRL_OPT_F3,CTRL_OPT_F4,,

‎tests/link-span-text/data/js/setFocusAfterLink.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// sets focus on a link after the 'W3C website' link
2+
testPageDocument.getElementById('afterlink').focus();

‎tests/link-span-text/data/js/setFocusBeforeLink.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// sets focus on a link before the 'W3C website' link
2+
testPageDocument.getElementById('beforelink').focus();

‎tests/link-span-text/data/js/setFocusOnLink.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// sets focus on the 'W3C website' link
2+
testPageDocument.getElementById('link').focus();

‎tests/link-span-text/data/references.csv‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
refId,value
2+
author,Isabel Del Castillo
3+
title,Link Example 1 (span element with text content)
4+
authorEmail,isa.delcastillo5@gmail.com
5+
reference,reference/2022-4-6_14258/link.html
6+
designPattern,https://w3c.github.io/aria-practices/#link
7+
example,https://w3c.github.io/aria-practices/examples/link/link.html
8+
link,https://w3c.github.io/aria/#link

‎tests/link-span-text/data/tests.csv‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
testId,title,appliesTo,mode,task,setupScript,setupScriptDescription,refs,instructions,assertion1,assertion2
2+
1,Navigate forwards to a link in reading mode,"JAWS,NVDA",READING,Navigate forwards to a link,setFocusBeforeLink,sets focus on a link before the 'W3C website' link,link,"With the reading cursor on the 'Navigate forwards from here' link, navigate to the 'W3C website' link.",Role 'link' is conveyed,Name 'W3C website' is conveyed.
3+
2,Navigate forwards to a link in interaction mode,"JAWS,NVDA",INTERACTION,Navigate forwards to a link,setFocusBeforeLink,sets focus on a link before the 'W3C website' link,link,"With focus on the 'Navigate forwards from here' link, navigate to the 'W3C website' link.",Role 'link' is conveyed,Name 'W3C website' is conveyed.
4+
3,Navigate forwards to a link,VOICEOVER_MACOS,INTERACTION,Navigate forwards to a link,setFocusBeforeLink,sets focus on a link before the 'W3C website' link,link,"With focus on the 'Navigate forwards from here' link, navigate to the 'W3C website' link.",Role 'link' is conveyed,Name 'W3C website' is conveyed.
5+
4,Navigate backwards to a link in reading mode,"JAWS,NVDA",READING,Navigate backwards to a link,setFocusAfterLink,sets focus on a link after the 'W3C website' link,link,"With the reading cursor on the 'Navigate backwards from here' link, navigate to the 'W3C website' link.",Role 'link' is conveyed,Name 'W3C website' is conveyed
6+
5,Navigate backwards to a link in interaction mode,"JAWS,NVDA",INTERACTION,Navigate backwards to a link,setFocusAfterLink,sets focus on a link after the 'W3C website' link,link,"With focus on the 'Navigate backwards from here' link, navigate to the 'W3C website' link.",Role 'link' is conveyed,Name 'W3C website' is conveyed
7+
6,Navigate backwards to a link,VOICEOVER_MACOS,INTERACTION,Navigate backwards to a link,setFocusAfterLink,sets focus on a link after the 'W3C website' link,link,"With focus on the 'Navigate backwards from here' link, navigate to the 'W3C website' link.",Role 'link' is conveyed,Name 'W3C website' is conveyed
8+
7,Read information about a link in reading mode,"JAWS,NVDA",READING,Read information about a link,setFocusOnLink,sets focus on the 'W3C website' link,link,"With the reading cursor on the 'W3C website' link, read information about the link.",Role 'link' is conveyed,Name 'W3C website' is conveyed
9+
8,Read information about a link in interaction mode,"JAWS,NVDA",INTERACTION,Read information about a link,setFocusOnLink,sets focus on the 'W3C website' link,link,"With focus on the 'W3C website' link, read information about the link.",Role 'link' is conveyed,Name 'W3C website' is conveyed
10+
9,Read information about a link,VOICEOVER_MACOS,INTERACTION,Read information about a link,setFocusOnLink,sets focus on the 'W3C website' link,link,"With focus on the 'W3C website' link, read information about the link.",Role 'link' is conveyed,Name 'W3C website' is conveyed

‎tests/link-span-text/reference/2022-4-6_14258/css/link.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
[role="link"] {
2+
color: #009;
3+
background: transparent;
4+
text-decoration: underline;
5+
}
6+
7+
[role="link"]:hover,
8+
[role="link"]:focus,
9+
[role="link"]:hover::before,
10+
[role="link"]:focus::before {
11+
color: #000;
12+
cursor: pointer;
13+
outline: 0.2em solid hsl(219deg 63% 44%);
14+
outline-offset: 0.2em;
15+
}
16+
17+
[role="link"].link3:hover,
18+
[role="link"].link3:focus {
19+
outline: none;
20+
}
21+
22+
[role="link"].link3::before {
23+
display: block;
24+
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' height='143px' width='210px' version='1.1'%3E%3Cpath d='m52.352 24.412l16.955 57.643 16.953-57.643h45.964v5.73l-17.307 29.816c6.08 1.949 10.678 5.498 13.795 10.641 3.119 5.146 4.68 11.184 4.68 18.121 0 8.578-2.283 15.787-6.844 21.631s-10.465 8.768-17.713 8.768c-5.458 0-10.211-1.732-14.262-5.201-4.054-3.469-7.054-8.164-9.002-14.09l9.585-3.975c1.404 3.586 3.256 6.412 5.556 8.475 2.299 2.066 5.008 3.1 8.125 3.1 3.271 0 6.041-1.832 8.301-5.494 2.262-3.664 3.393-8.066 3.393-13.215 0-5.691-1.209-10.096-3.623-13.213-2.811-3.662-7.215-5.496-13.216-5.496h-4.674v-5.611l16.367-28.297h-19.755l-1.124 1.914-24.031 81.088h-1.169l-17.54-58.691-17.536 58.691h-1.168l-28.056-94.696h12.276l16.953 57.643 11.46-38.815-5.611-18.826h12.273v-0.004z' fill='%23005A9C'/%3E%3Cpath d='m196.02 24.412c-2.41 0-4.574 0.869-6.215 2.535-1.74 1.768-2.709 4.051-2.709 6.412s0.922 4.549 2.611 6.266c1.717 1.74 3.928 2.686 6.314 2.686 2.334 0 4.6-0.945 6.361-2.658 1.689-1.641 2.611-3.828 2.611-6.289 0-2.387-0.945-4.623-2.584-6.289-1.7-1.745-3.94-2.663-6.38-2.663zm7.78 9.024c0 2.064-0.799 3.979-2.26 5.393-1.543 1.494-3.457 2.289-5.57 2.289-1.986 0-3.949-0.818-5.418-2.311-1.465-1.494-2.287-3.406-2.287-5.443 0-2.039 0.846-4.027 2.361-5.566 1.416-1.443 3.328-2.211 5.416-2.211 2.139 0 4.051 0.799 5.543 2.311 1.45 1.438 2.22 3.373 2.22 5.538zm-7.53-5.321h-3.826v10.143h1.914v-4.324h1.891l2.063 4.324h2.137l-2.264-4.621c1.465-0.301 2.313-1.293 2.313-2.734 0.01-1.84-1.39-2.788-4.22-2.788zm-0.35 1.244c1.789 0 2.609 0.498 2.609 1.74 0 1.191-0.82 1.617-2.563 1.617h-1.617v-3.357h1.57z'/%3E%3Cpath d='m180.97 23.881l1.988 12.09-7.039 13.469s-2.701-5.715-7.191-8.875c-3.781-2.664-6.246-3.244-10.1-2.449-4.949 1.021-10.561 6.938-13.01 14.234-2.93 8.727-2.959 12.953-3.063 16.832-0.164 6.223 0.816 9.896 0.816 9.896s-4.275-7.906-4.234-19.486c0.027-8.268 1.328-15.764 5.152-23.16 3.365-6.504 8.367-10.408 12.807-10.867 4.59-0.473 8.215 1.738 11.02 4.131 2.941 2.516 5.916 8.01 5.916 8.01l6.92-13.825z'/%3E%3Cpath d='m181.84 92.289s-3.111 5.563-5.049 7.705c-1.939 2.145-5.408 5.918-9.691 7.807-4.283 1.887-6.529 2.24-10.764 1.836-4.229-0.406-8.16-2.855-9.537-3.877s-4.898-4.029-6.889-6.836c-1.992-2.807-5.102-8.416-5.102-8.416s1.732 5.623 2.82 8.01c0.623 1.375 2.541 5.576 5.266 9.232 2.541 3.41 7.475 9.283 14.973 10.609 7.498 1.328 12.65-2.041 13.926-2.855 1.273-0.814 3.961-3.066 5.664-4.889 1.775-1.896 3.457-4.32 4.385-5.773 0.682-1.063 1.789-3.215 1.789-3.215l-1.79-9.331z'/%3E%3C/svg%3E");
25+
width: 210px;
26+
height: 143px;
27+
}

‎tests/link-span-text/reference/2022-4-6_14258/js/link.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* This content is licensed according to the W3C Software License at
3+
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4+
*/
5+
6+
/* exported goToLink */
7+
8+
'use strict';
9+
10+
function goToLink(event, url) {
11+
var type = event.type;
12+
13+
if (type === 'click' || (type === 'keydown' && event.keyCode === 13)) {
14+
window.location.href = url;
15+
16+
event.preventDefault();
17+
event.stopPropagation();
18+
}
19+
}

‎tests/link-span-text/reference/2022-4-6_14258/link.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>Link Example 1 (span element with text content</title>
7+
8+
<!-- js and css for this example. -->
9+
<link href="css/link.css" rel="stylesheet">
10+
<script src="js/link.js" type="text/javascript"></script>
11+
</head>
12+
<body>
13+
<main>
14+
<h1>Link Example 1 (span element with text content</h1>
15+
<p>
16+
The example below demonstrates one variation of the
17+
<a href="https://w3c.github.io/aria-practices#link">design pattern for link</a>.
18+
The link pattern is used when it is necessary for elements other than the HTML <code>a</code> element to have link behaviors.
19+
</p>
20+
<section>
21+
<h2 id="ex_label">Example</h2>
22+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
23+
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
24+
<span id="link"
25+
tabindex="0"
26+
role="link"
27+
onclick="goToLink(event, 'https://www.w3.org/')"
28+
onkeydown="goToLink(event, 'https://www.w3.org/')">
29+
W3C website
30+
</span>
31+
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
32+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
33+
</section>
34+
</main>
35+
</body>
36+
</html>

‎tests/link-span-text/reference/2022-4-6_14258/link.setFocusAfterLink.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>Link Example 1 (span element with text content</title>
7+
8+
<!-- js and css for this example. -->
9+
<link href="css/link.css" rel="stylesheet">
10+
<script src="js/link.js" type="text/javascript"></script>
11+
12+
<!-- Generated by create-example-tests.js -->
13+
<script>
14+
(function() {
15+
function setupScript(testPageDocument) {
16+
// setFocusAfterLink
17+
// sets focus on a link after the 'W3C website' link
18+
testPageDocument.getElementById('afterlink').focus();
19+
20+
};
21+
document.addEventListener('click', function(event) {
22+
if (event.target.classList.contains('button-run-test-setup')) {
23+
event.target.disabled = true;
24+
setupScript(document);
25+
}
26+
});
27+
})();
28+
</script>
29+
<!-- End of generated output --></head>
30+
<body>
31+
<main>
32+
<h1>Link Example 1 (span element with text content</h1>
33+
<p>
34+
The example below demonstrates one variation of the
35+
<a href="https://w3c.github.io/aria-practices#link">design pattern for link</a>.
36+
The link pattern is used when it is necessary for elements other than the HTML <code>a</code> element to have link behaviors.
37+
</p>
38+
<section>
39+
<h2 id="ex_label">Example</h2>
40+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
41+
<a id="beforelink" href="#beforelink">Navigate forwards from here</a>
42+
<span id="link"
43+
tabindex="0"
44+
role="link"
45+
onclick="goToLink(event, 'https://www.w3.org/')"
46+
onkeydown="goToLink(event, 'https://www.w3.org/')">
47+
W3C website
48+
</span>
49+
<a id="afterlink" href="#afterlink">Navigate backwards from here</a>
50+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
51+
</section>
52+
53+
<!-- Generated by create-example-tests.js -->
54+
<div style="position: relative; left: 0; right: 0; height: 2rem;">
55+
<button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
56+
</div>
57+
<!-- End of generated output --></main>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)