-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathdate-picker.html
More file actions
305 lines (302 loc) · 10.8 KB
/
date-picker.html
File metadata and controls
305 lines (302 loc) · 10.8 KB
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessible Date Picker</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<style>
.dragger {
height: 1.5em;
margin: -0.5em;
margin-bottom: .5em;
border-bottom: 2px solid #999;
background-color: #ccc;
cursor: pointer;
}
#datePicker {
position: absolute;
width: 250px;
border: 2px solid #999;
padding: 0.5em;
background: #eee;
font-size: 1.1rem;
}
#datePicker h2 {
font-size: 1.5rem;
}
#datePicker .svg {
width: 15px;
height: 15px;
margin: 0;
padding: 0;
border: none;
background-color: transparent;
font-size: 0;
}
#closeDatePicker,
#forwardOneMonth,
#forwardOneYear {
float: right;
}
#backOneMonth,
#backOneYear {
float: left;
}
#datePickerCalendar h2 {
margin-top: 0;
}
#datePickerCalendar td {
padding: 1ex 0 1ex 0;
}
#datePickerCalendar th {
padding: 0;
}
#datePickerCalendar tbody tr:last-child {
border: none;
}
#datePickerCalendar tbody tr:last-child td,
#datePickerCalendar th {
padding-bottom: 0;
}
#datePickerCalendar col {
width: 14%;
}
#datePickerCalendar col:first,
#datePickerCalendar col:last {
width: 15%;
}
#datePickerCalendar th, #datePickerCalendar td {
text-align: center;
}
#datePickerCalendar [data-date=""] {
padding: 0;
}
#keyboardShortcuts {
margin: 1ex 0;
}
#keyboardShortcuts caption {
text-align: left;
}
#keyboardShortcuts tr {
border: none;
}
#keyboardShortcuts td {
border: 1px solid #b5b5a8;
padding: .5ex .5em;
}
#keyboardShortcuts th {
padding: .5ex .5em;
}
</style>
</head>
<body>
<div class="container">
<a href="#main" class="skip-link">Skip to main content</a>
<div class="page-wrapper" id="main" role="main" tabindex="-1">
<h1>Accessible Date Picker</h1>
<p><a href="http://haltersweb.github.io/Accessibility/">View the full library of accessibility solutions.</a></p>
<p><strong>NOTE: This solution is written using ES2015 and is not compatible with IE11.</strong></p>
<p>This is also written with a mixture of vanilla JS and jQuery. I would like to eventually write in all vanilla.</p>
<p>For mobile I suggest overriding this with the native date input functionality.</p>
<form action="">
<div class="form-row">
<!-- USE TYPE=DATE FOR MOBILE <label for="date">Date</label><input type="date" id="date" /> -->
<label for="date">Date</label><input id="date" aria-describedby="dateDesc" />
<button type="button" id="launchDatePicker" aria-describedby="launchDatePickerDesc">Choose Date <span class="screen-reader-text">using the date picker</span></button>
<p id="dateDesc">Type in format of MM/DD/YYYY or use the date picker to select a date</p>
<p id="launchDatePickerDesc" style="display: none;">If using date picker left and right arrows advance by day. Up and down arrows advance by week. Shift left and right advance by month. Shift up and down advance by year.</p>
</div>
<div class="form-row">
<!-- USE TYPE=TIME FOR MOBILE <label for="time">Time</label><input type="time" id="time" /> -->
</div>
<p><a href="http://www.google.com">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit. Cupiditate ab dolor mollitia ut, quibusdam quod repellendus numquam, temporibus reiciendis aperiam recusandae architecto sunt maiores eaque sit ipsum adipisci, aspernatur atque!</p>
</form>
</div>
<div id="datePicker" style="display: none;" draggable="true">
<div id="dialogDragger" class="dragger" tabindex="0" aria-label="drag date picker. use spacebar to grab." aria-grabbed="false"></div>
<div>
<button id="closeDatePicker" type="button" aria-label="close date picker" class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" focusable="false" role="presentation" class="svg-close">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M43.7,54.9L39,47.7c-1.9-2.8-3.1-4.8-4.5-7.2h-0.2c-1.1,2.3-2.3,4.4-3.9,7.2l-4.1,7.2H13l14.7-20.2 L13.5,15.1h13.2l4.5,7.3c1.6,2.5,2.6,4.4,3.9,6.7h0.2c1.2-2.5,2.2-4.4,3.4-6.7l4.4-7.3h13.2L41.8,34.5L57,54.9H43.7z"/>
</svg>
</button>
</div>
<!--
css: .dragger { cursor: move; }
.dragger:hover,.dragger:focused {background-color: peach;}
user tabs to .dragger
user hits space bar to select
.dragger changes to aria-grabbed = true
activate arrow bind
user moves with arrows (10 px) and shift+arrows (100 px)
user hits enter to drop OR on blur
.dragger changes to aria-grabbed = false
arrows are unbound
-->
<div role="application">
<table id="datePickerCalendar" role="presentation">
<caption>
<h2 id="monthAndYear"></h2>
</caption>
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th scope="col"><abbr title="Sunday">Sun</abbr></th>
<th scope="col"><abbr title="Monday">Mon</abbr></th>
<th scope="col"><abbr title="Tuesday">Tue</abbr></th>
<th scope="col"><abbr title="Wednesday">Wed</abbr></th>
<th scope="col"><abbr title="Thursday">Thr</abbr></th>
<th scope="col"><abbr title="Friday">Fri</abbr></th>
<th scope="col"><abbr title="Saturday">Sat</abbr></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div>
<button id="showKeyboardShortcuts" type="button" aria-owns="keyboardShortcuts" aria-expanded="false">keyboard shortcuts</button>
</div>
<table id="keyboardShortcuts" style="display: none;">
<caption>
<h3>Keyboard Shortcuts</h3>
<p>While inside the calendar use the following shortcuts to navigate to different dates:</p>
</caption>
<colgroup>
<col />
<col />
</colgroup>
<thead>
<tr>
<th scope="col">shortcut</th>
<th scope="col">navigates to</th>
</tr>
</thead>
<tbody>
<tr>
<td>left/right</td>
<td>previous/next day</td>
</tr>
<tr>
<td>up/down</td>
<td>previous/next week</td>
</tr>
<tr>
<td>
page up/page down<br />
(fn + up/fn + down for mac)
</td>
<td>previous/next month</td>
</tr>
<tr>
<td>
ctrl + page up/page down<br />
(cmd + fn + up/cmd + fn + down for mac)
</td>
<td>previous/next year</td>
</tr>
<tr>
<td>
home<br />
(fn + left for mac)
</td>
<td>first day of the month</td>
</tr>
<tr>
<td>
end
(fn + right for mac)
</td>
<td>last day of the month</td>
</tr>
<tr>
<td>T</td>
<td>today's date</td>
</tr>
<tr>
<td>enter or spacebar</td>
<td>accept the selected date</td>
</tr>
<tr>
<td>esc</td>
<td>close date picker without selection</td>
</tr>
</tbody>
</table>
<div style="display: none;">
<button id="goToToday" type="button">today</button>
</div>
<div>
<button id="backOneMonth" type="button" aria-label="previous month" class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" role="presentation" focusable="false" class="svg-single-left">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M18.2,35l23.1-21c1.7-1.5,4.3-1.4,5.9,0.3c1.5,1.7,1.4,4.3-0.3,5.9L30.8,35 l16.1,14c1.7,1.5,2,4.2,0.4,5.9s-4.2,2-5.9,0.4L18.2,35z"/>
</svg>
</button>
<button id="backOneYear" type="button" aria-label="previous year" class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" role="presentation" focusable="false" class="svg-double-left">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M25.9,35L49,14c1.7-1.5,4.3-1.4,5.9,0.3c1.5,1.7,1.4,4.3-0.3,5.9L38.5,35l16.1,14 c1.7,1.5,2,4.2,0.4,5.9s-4.2,2-5.9,0.4L25.9,35z"/>
<path fill="#FFFFFF" d="M6,35l23.1-21c1.7-1.5,4.3-1.4,5.9,0.3c1.5,1.7,1.4,4.3-0.3,5.9L18.6,35l16.1,14 c1.7,1.5,2,4.2,0.4,5.9s-4.2,2-5.9,0.4L6,35z"/>
</svg>
</button>
<button id="forwardOneMonth" type="button" aria-label="next month" class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" role="presentation" focusable="false" class="svg-single-right">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M51.8,35L28.7,56c-1.7,1.5-4.3,1.4-5.9-0.3c-1.5-1.7-1.4-4.3,0.3-5.9 L39.2,35L23.1,21c-1.7-1.5-2-4.2-0.4-5.9c1.5-1.7,4.2-2,5.9-0.4L51.8,35z"/>
</svg>
</button>
<button id="forwardOneYear" type="button" aria-label="next year" class="svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" role="presentation" focusable="false" class="svg-double-right">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M44.1,35L21,56c-1.7,1.5-4.3,1.4-5.9-0.3c-1.5-1.7-1.4-4.3,0.3-5.9 L31.5,35L15.4,21c-1.7-1.5-2-4.2-0.4-5.9c1.5-1.7,4.2-2,5.9-0.4L44.1,35z"/>
<path fill="#FFFFFF" d="M64,35L40.9,56c-1.7,1.5-4.3,1.4-5.9-0.3c-1.5-1.7-1.4-4.3,0.3-5.9 L51.4,35L35.3,21c-1.7-1.5-2-4.2-0.4-5.9c1.5-1.7,4.2-2,5.9-0.4L64,35z"/>
</svg>
</button>
</div>
</div>
<div class="overlay"></div>
<div class="block-screen"></div>
<div aria-live="polite" class="screen-reader-text"></div>
<div role="alert" class="screen-reader-text"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script type="text/javascript" src="js/drag-and-drop.js"></script>
<script type="text/javascript" src="js/date-picker.js"></script>
</body>
</html>
<!--
1) Date in field should match date on picker
2) button should say "choose date from date picker"
3) aria-describedby should say "type date or choose date from date picker using date picker button"
4) button should say collapsed / expanded
5) upon launch widget should say "date picker widget"
6) there should be a close button on the date picker
7) up and down arrows should navigate by week even if it jumps to previous month or year
8) arrow should navigate by day
9) shift right/left arrow should navigate by month
10) shift up/down arrow should navigate by year
11) hint should be given when date picker launches
12) H for hint
13) ESC to dismiss
14) tabbing out dismisses (may also go to close button and month/year buttons)
15) full word for day and month (i.e. not "sa" for saturday)
16) aria-live for "13 May, 2016" rather than reading number in cell (polite to cut off and read new date) <span aria-hidden="true">13</span>
17) TD role="link" tabindex="-1" for focusability
18) TR role="presentation" ?
19) Table role="application" ? and aria-label="Calendar" ? (can I use table caption?)
20) table as role="grid"?????? instead
-->