/
skip-link-pass.html
69 lines (63 loc) · 1.93 KB
/
skip-link-pass.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="en" id="pass1">
<head>
<title>skip-link test</title>
<meta charset="utf8" />
<link
rel="stylesheet"
type="text/css"
href="/node_modules/mocha/mocha.css"
/>
<script src="/node_modules/mocha/mocha.js"></script>
<script src="/node_modules/chai/chai.js"></script>
<script src="/axe.js"></script>
<style type="text/css">
.sr-only {
border: 0;
clip: rect(0 0 0 0);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
</style>
<script>
mocha.setup({
timeout: 10000,
ui: 'bdd'
});
var assert = chai.assert;
</script>
</head>
<body>
<div id="pass1-tgt"></div>
<a href="#pass1-tgt" class="sr-only" id="pass1">Link</a>
<a href="#pass2-tgt" style="position: absolute; left: -10000px" id="pass2"
>Link</a
>
<div id="pass3-tgt"></div>
<a href="/#pass3-tgt" class="sr-only" id="pass3">Link (angular)</a>
<div id="canttell1-tgt" style="display: none"></div>
<a href="#canttell1-tgt" class="sr-only" id="canttell1">Link</a>
<!-- since these elements are page links, they needs to be at the bottom
of the test so all the prior links are considered skip links -->
<header>
<ul>
<li><a id="ignore1" href="/#about">About</a></li>
<li><a id="ignore2" href="/#contact">Contact</a></li>
</ul>
</header>
<h2 name="pass2-tgt">Heading</h2>
<a href="foo#bar" id="ignore3">link</a>
<a href="#" id="ignore4">link</a>
<div id="mocha"></div>
<script src="/test/testutils.js"></script>
<script src="skip-link-pass.js"></script>
<script src="/test/integration/adapter.js"></script>
</body>
</html>