-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
175 lines (151 loc) · 6.06 KB
/
index.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
174
175
<!DOCTYPE HTML>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>ARIA Buttons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<link rel="stylesheet" href="https://scottaohara.github.io/a11y_styled_form_controls/src/assets/css/--demo-only--.css">
<link rel="stylesheet" href="https://scottaohara.github.io/a11y_styled_form_controls/src/assets/css/--shared--.css">
<link rel="stylesheet" href="css/button.css">
</head>
<body id="body">
<div id="page" class="demo-wrap">
<main>
<div class="demo">
<div class="demo-wrap__header">
<h1 style="margin-top: 0;">
<abbr title="Accessible Rich Internet Applications">ARIA</abbr> Buttons demonstration
</h1>
<p>Published: <span>November 26, 2016</span></p>
<p>Last updated: <span>December 11, 2021</span></p>
<div>
<a href="https://github.com/scottaohara/aria_buttons">See source on GitHub</a>
</div>
</div>
<h2>
Pattern Demos
</h2>
<p>
Using an <code><a href></code> as a base to make a button:
</p>
<div>
<a id="test1" href="#" role="button">Do a thing</a>
<output style="margin-left: 1em;"></output>
</div>
<p>
Using a <code><span></code> as a base to make a toggle button:
</p>
<div>
<span id="test2" role="button" aria-pressed="false">
Bold Text
</span>
<span style="margin-left: 1em;">
<span id=test2result>I'm some text</span>
</span>
</div>
<p>
Using a <code><c-button></code> custom element to make a toggle button:
</p>
<div id="test3result">
<c-button id="test3" role="button" aria-pressed="false">
Enable Dark Mode
</c-button>
</div>
<p>
Using a <code><span></code> as a base for a disabled button:
</p>
<div>
<span id="test4" tabindex="0" role="button" aria-disabled="true">
Can't do anything
</span>
</div>
<section class="demo-details">
<h3>
Pattern Details
</h3>
<details>
<summary>Pattern Markup</summary>
<pre><code><a id="test1" href="#" role="button">Do a thing</a>
<output></output>
<span id="test2" role="button" aria-pressed="false">
Enable a setting
</span>
<c-button id="test3" role="button" aria-pressed="false">
Enable Dark Mode
</c-button>
<span id="test4" tabindex="0" role="button" aria-disabled="true">
Can't do anything
</span></code></pre>
</details>
<p>This script simply runs through the DOM and looks for instances of <code>role=button</code> and then does the following:</p>
<ul>
<li>If they lack a <code>tabindex</code>, one is assigned so the buttons are keyboard focusable, <strong>unless</strong> there is a <code>aria-disabled=true</code>.</li>
<li>If a <code>role=button</code> also has an <code>aria-pressed</code> attribute, then a toggle event is added to those buttons with an "click" event.</li>
<li>A <code>keydown</code> event listener is added to all the faux buttons. It ensures that <kbd>Space</kbd> and <kbd>Enter</kbd> keys will activate the button. If those keys are pressed, a <code>click()</code> is used to simulate the click event for the buttons.</li>
</ul>
<p>
You should really just use a <code><button></code> element instead. You won't need the majority of this script then, and you'd get automatic Windows High Contrast Mode styling (which I have not done anything to provide for with these demos).
</p>
</section>
<h3>
Continue reading
</h3>
<ul>
<li><a href="https://w3c.github.io/aria-practices/#button">ARIA Authoring Practices 1.2: Button</a></li>
<li><a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">Styling for Windows High Contrast Mode</a></li>
</ul>
</div>
</main>
</div>
<script src="index.js"></script>
<script>
const selector = '[role="button"]';
const els = document.querySelectorAll(selector);
for ( let i = 0; i < els.length; i++ ) {
const dis = new ariaButton( els[i] );
}
// demos
const doc = document;
var html = doc.getElementsByTagName('HTML')[0];
var body = doc.getElementsByTagName('BODY')[0];
const t1 = doc.getElementById('test1');
const output = doc.querySelector('output');
const msg1 = "I did a thing";
const msg2 = "I did another thing";
let currentMsg = msg1;
t1.addEventListener('click', function () {
output.textContent = currentMsg;
currentMsg = currentMsg == msg1 ? msg2 : msg1;
});
const t2 = doc.getElementById('test2');
const t2r = doc.getElementById('test2result');
let isBold = false;
t2.addEventListener('click', function () {
if ( isBold ) {
t2r.style = 'font-weight: normal;';
isBold = false;
}
else {
t2r.style = 'font-weight: bold;';
isBold = true;
}
});
const t3 = doc.getElementById('test3');
const t3r = doc.getElementById('test3result');
let isDark = false;
t3.addEventListener('click', function () {
if ( isDark ) {
t3r.style = 'background: transparent;';
isDark = false;
}
else {
t3r.style = 'background: #000; box-shadow: 0 0 0 8px #000';
isDark = true;
}
});
</script>
</body>
</html>