-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmulti.html
169 lines (156 loc) · 6.98 KB
/
multi.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
<html>
<head>
<title>Proof of Concept: Accessible Single/Multi-Select Dropdown</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="a11y-semantics.css">
<!-- Taken from https://github.com/NothingAG/a11y-semantics-css -->
<!-- <link rel="stylesheet" href="https://raw.githack.com/NothingAG/a11y-semantics-css/master/a11y-semantics-visible.css?v=123"> -->
</head>
<body>
<p>
<button>Focusable element before</button>
</p>
<hr>
<form>
<div class="widget--container">
<label for="hobbies" class="widget--filter-label" data-inline-block>Hobbies</label>
<span class="widget--filter-and-options-container" data-inline-block>
<span class="widget--filter-container" data-inline-block>
<input class="widget--filter-input"
id="hobbies"
type="text"
role="combobox"
aria-expanded="false"
type="text"
autocomplete="off"
placeholder="Enter filter term"
aria-describedby="hobbies-x-options-selected"
></span
><button class="widget--unselect-all-button" type="button">
<span id="hobbies-x-options-selected">
<span class="widget--x-selected-count">3</span>
<span data-visually-hidden>Hobbies selected:
<span class="widget--x-selected-labels">Soccer, Hiking, Coding</span>,
</span>
</span>
<img src="clear.svg" alt="unselect all" />
</button
><button class="widget--toggle-options-button" type="button">
<img src="close.svg" class="widget--toggle-options-button-icon" alt="Open Hobbies options" />
</button>
<fieldset class="widget--available-options-container" hidden>
<!-- We wanna show all info visually so that visual users also have the benefit of seeing it. If you need some specific help for ie. screen reader users only, you should think about whether you are doing something overly complex. We could place also other important info there, ie. a spinner when elements are loaded through AJAX ("Loading options, please wait") or additional instructions, ie. "Type at least two characters to display options". -->
<legend class="widget--available-options-legend">
<span data-visually-hidden>Available Hobbies:</span>
<span class="widget--x-of-y-for-filter-text" data-live-region>
12 of 12 options for empty filter<span data-visually-hidden>, starting with "Soccer"</span>
</span>
</legend>
<ol class="widget--available-options-list">
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="soccer" checked>
<span>Soccer<span class="check"></span></span>
</label></li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="badminton">
<span> Badminton<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="movies">
<span> Movies<span class="check"></span>
</span>
</label></li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="gardening">
<span> Gardening<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="kickboxing">
<span> Kickboxing<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="hiking" checked>
<span> Hiking<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="dancing">
<span> Dancing<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="painting">
<span> Painting<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="cooking" checked>
<span> Cooking<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="reading">
<span> Reading<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="sleeping">
<span> Sleeping<span class="check"></span></span>
</label>
</li>
<li class="widget--available-options-list-item">
<label data-inline-block>
<input type="checkbox" name="hobbies" value="programming">
<span> Programming<span class="check"></span></span>
</label>
</li>
</ol>
</fieldset>
</span>
<fieldset class="widget--selected-options-container">
<legend data-visually-hidden>Selected Hobbies</legend>
<ol class="widget--selected-options-list">
<li>
<button class="widget--selected-options-button" type="button">
Soccer
<img src="clear.svg" alt="unselect" />
</button>
</li>
<li>
<button class="widget--selected-options-button" type="button">
Hiking
<img src="clear.svg" alt="unselect" />
</button>
</li>
<li>
<button class="widget--selected-options-button" type="button">
Cooking
<img src="clear.svg" alt="unselect" />
</button>
</li>
</ol>
</fieldset>
</div>
</form>
<hr>
<p>
<button>Focusable element after</button>
</p>
<div class="event-logger"></div>
</body>
<script src="scripts.js"></script>
</html>