/
focus-source.example.html
173 lines (152 loc) · 5.4 KB
/
focus-source.example.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
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ally.style.focusSource Example</title>
<link rel="jsbin" href="https://jsbin.com/ziduzu/">
<style id="example-css">
body :focus {
/* default styling in case JS broke */
background: yellow;
}
html[data-focus-source="initial"] > body :focus {
/* styling for when focus was given by pointer */
background: green;
}
html[data-focus-source="pointer"] > body :focus {
/* styling for when focus was given by pointer */
background: red;
}
html[data-focus-source="key"] > body :focus {
/* styling for when focus was given by keyboard */
background: blue;
}
html[data-focus-source="script"] > body :focus {
/* styling for when focus was given by neither pointer nor keyboard */
background: orange;
}
p[data-had-focus] {
display: none;
}
html.focus-source-pointer p[data-had-focus="pointer"],
html.focus-source-key p[data-had-focus="key"],
html.focus-source-script p[data-had-focus="script"] {
display: block;
}
/* separate blocks because ">>>" or "/deep/" might not be supported and thus render the selector void */
.example >>> :focus {
/* default styling in case JS broke */
background: yellow;
}
html[data-focus-source="initial"] .example >>> :focus {
/* styling for when focus was given by pointer */
background: green;
}
html[data-focus-source="pointer"] .example >>> :focus {
/* styling for when focus was given by pointer */
background: red;
}
html[data-focus-source="key"] .example >>> :focus {
/* styling for when focus was given by keyboard */
background: blue;
}
html[data-focus-source="script"] .example >>> :focus {
/* styling for when focus was given by neither pointer nor keyboard */
background: orange;
}
.example /deep/ :focus {
/* default styling in case JS broke */
background: yellow;
}
html[data-focus-source="initial"] .example /deep/ :focus {
/* styling for when focus was given by pointer */
background: green;
}
html[data-focus-source="pointer"] .example /deep/ :focus {
/* styling for when focus was given by pointer */
background: red;
}
html[data-focus-source="key"] .example /deep/ :focus {
/* styling for when focus was given by keyboard */
background: blue;
}
html[data-focus-source="script"] .example /deep/ :focus {
/* styling for when focus was given by neither pointer nor keyboard */
background: orange;
}
</style>
</head>
<body>
<article id="example-introduction">
<h1><code>ally.style.focusSource</code> Example</h1>
<p>Use <kbd>Tab</kbd> and the mouse (or touch) as well as the buttons to focus the input elements to see them styled differently depending on the input method used.</p>
</article>
<div id="example-html">
<main>
<button type="button" id="focus-pass">loading…</button>
<button type="button" id="focus-lock" aria-pressed="false">loading…</button>
<hr>
<label for="before-input">click me</label>
<input id="before-input" type="text" value="before styled">
<div class="example">
<div id="first-shadow-host"></div>
<div>
<input id="outer-input" type="text" value="outer input">
</div>
</div>
<input id="after-input" type="text" value="after styled">
<hr>
<p data-had-focus="pointer">focus was set by pointer at least once</p>
<p data-had-focus="key">focus was set by keyboard at least once</p>
<p data-had-focus="script">focus was set by script at least once</p>
</main>
</div>
<script src="https://cdn.jsdelivr.net/ally.js/1.4.1/ally.min.js"></script>
<script id="example-js">
var buttonPass = document.getElementById('focus-pass');
var buttonLock = document.getElementById('focus-lock');
var focusSource = ally.style.focusSource();
var input = document.getElementById('before-input');
input.focus();
buttonPass.textContent = 'focus';
buttonPass.addEventListener('click', function() {
// passing focus to another element
input.focus();
}, false);
buttonLock.textContent = 'focus (lock)';
buttonLock.addEventListener('click', function() {
if (this.getAttribute('aria-pressed') !== 'true') {
this.setAttribute('aria-pressed', 'true');
buttonLock.textContent = 'unlock';
// passing focus while the method of input is locked
focusSource.lock(focusSource.current());
input.focus();
} else {
this.setAttribute('aria-pressed', 'false');
buttonLock.textContent = 'focus (lock)';
focusSource.lock(false);
}
}, false);
// create shadow dom structure:
if (document.body.createShadowRoot !== undefined) {
var shadowed = createShadowedContent(
document.getElementById('first-shadow-host'),
'<div id="second-shadow-host"></div><div id="third-shadow-host"></div>'
);
createShadowedContent(
shadowed.getElementById('second-shadow-host'),
'<input id="first-input" type="text" value="::shadow ::shadow input">'
);
createShadowedContent(
shadowed.getElementById('third-shadow-host'),
'<input id="second-input" type="text" value="::shadow ::shadow input">'
);
}
function createShadowedContent(host, html) {
var root = host.createShadowRoot();
root.innerHTML = html;
return root;
}
</script>
</body>
</html>