blob: d62c000cb720e0433ca00f294bfee2008c8f898a (
plain)
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<html>
<head>
<title>Traversal Rule test document</title>
<meta charset="utf-8" />
<script>
var frameContents = '<html>' +
'<head><title>such app</title></head>' +
'<body>' +
'<h1>wow</h1>' +
'<ul>' +
'<li><label><input type="checkbox">many option</label></li>' +
'</ul>' +
'<label for="r">much range</label>' +
'<input min="0" max="10" value="5" type="range" id="r">' +
'</body>' +
'</html>';
function showAlert() {
document.getElementById('alert').hidden = false;
}
function hideAlert() {
document.getElementById('alert').hidden = true;
}
function ariaShowBack() {
document.getElementById('back').setAttribute('aria-hidden', false);
}
function ariaHideBack() {
document.getElementById('back').setAttribute('aria-hidden', true);
}
function ariaShowIframe() {
document.getElementById('iframe').setAttribute('aria-hidden', false);
}
function ariaHideIframe() {
document.getElementById('iframe').setAttribute('aria-hidden', true);
}
function renameFruit() {
document.getElementById('fruit').setAttribute('aria-label', 'banana');
}
function renameSlider() {
document.getElementById('slider').setAttribute(
'aria-label', 'mover');
}
function changeSliderValue() {
document.getElementById('slider').setAttribute('aria-valuenow', '5');
document.getElementById('slider').setAttribute(
'aria-valuetext', 'medium');
}
function toggleLight() {
var lightSwitch = document.getElementById('light');
lightSwitch.setAttribute('aria-checked',
lightSwitch.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
}
</script>
<style>
#windows {
position: relative;
width: 320px;
height: 480px;
}
#windows > iframe {
z-index: 1;
}
#windows > div[role='dialog'] {
z-index: 2;
background-color: pink;
}
#windows > * {
position: absolute;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>Phone status bar</div>
<div id="windows">
<button id="back">Back</button>
<div role="dialog" id="alert" hidden>
<h1>This is an alert!</h1>
<p>Do you agree?</p>
<button onclick="setTimeout(hideAlert, 500)">Yes</button>
<button onclick="hideAlert()">No</button>
</div>
<div id="appframe"></div>
</div>
<button id="home">Home</button>
<button id="fruit" aria-label="apple"></button>
<span id="light" role="switch" aria-label="Light" aria-checked="false" onclick="toggleLight()"></span>
<div id="live" aria-live="polite" aria-label="live">
<div id="slider" role="slider" aria-label="slider" aria-valuemin="0"
aria-valuemax="10" aria-valuenow="0"></div>
</div>
</body>
</html>
|
