Skip to content

Commit b484555

Browse files
acamachoappomniacamachoappomni
committed
feat(a11y): add keyboard focus for calendar panel
1 parent 9b45f9c commit b484555

14 files changed

+630
-25
lines changed

‎__test__/__snapshots__/date-picker.test.js.snap

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,8 @@ exports[`DatePicker prop: formatter 1`] = `
159159
<td
160160
class="cell not-current-month"
161161
data-row-col="0,0"
162+
role="button"
163+
tabindex="0"
162164
title="2019-09-29"
163165
>
164166
<div>
@@ -168,6 +170,8 @@ exports[`DatePicker prop: formatter 1`] = `
168170
<td
169171
class="cell not-current-month"
170172
data-row-col="0,1"
173+
role="button"
174+
tabindex="0"
171175
title="2019-09-30"
172176
>
173177
<div>
@@ -177,6 +181,8 @@ exports[`DatePicker prop: formatter 1`] = `
177181
<td
178182
class="cell"
179183
data-row-col="0,2"
184+
role="button"
185+
tabindex="0"
180186
title="2019-10-01"
181187
>
182188
<div>
@@ -186,6 +192,8 @@ exports[`DatePicker prop: formatter 1`] = `
186192
<td
187193
class="cell"
188194
data-row-col="0,3"
195+
role="button"
196+
tabindex="0"
189197
title="2019-10-02"
190198
>
191199
<div>
@@ -195,6 +203,8 @@ exports[`DatePicker prop: formatter 1`] = `
195203
<td
196204
class="cell"
197205
data-row-col="0,4"
206+
role="button"
207+
tabindex="0"
198208
title="2019-10-03"
199209
>
200210
<div>
@@ -204,6 +214,8 @@ exports[`DatePicker prop: formatter 1`] = `
204214
<td
205215
class="cell"
206216
data-row-col="0,5"
217+
role="button"
218+
tabindex="0"
207219
title="2019-10-04"
208220
>
209221
<div>
@@ -213,6 +225,8 @@ exports[`DatePicker prop: formatter 1`] = `
213225
<td
214226
class="cell"
215227
data-row-col="0,6"
228+
role="button"
229+
tabindex="0"
216230
title="2019-10-05"
217231
>
218232
<div>
@@ -235,6 +249,8 @@ exports[`DatePicker prop: formatter 1`] = `
235249
<td
236250
class="cell"
237251
data-row-col="1,0"
252+
role="button"
253+
tabindex="0"
238254
title="2019-10-06"
239255
>
240256
<div>
@@ -244,6 +260,8 @@ exports[`DatePicker prop: formatter 1`] = `
244260
<td
245261
class="cell"
246262
data-row-col="1,1"
263+
role="button"
264+
tabindex="0"
247265
title="2019-10-07"
248266
>
249267
<div>
@@ -253,6 +271,8 @@ exports[`DatePicker prop: formatter 1`] = `
253271
<td
254272
class="cell"
255273
data-row-col="1,2"
274+
role="button"
275+
tabindex="0"
256276
title="2019-10-08"
257277
>
258278
<div>
@@ -262,6 +282,8 @@ exports[`DatePicker prop: formatter 1`] = `
262282
<td
263283
class="cell"
264284
data-row-col="1,3"
285+
role="button"
286+
tabindex="0"
265287
title="2019-10-09"
266288
>
267289
<div>
@@ -271,6 +293,8 @@ exports[`DatePicker prop: formatter 1`] = `
271293
<td
272294
class="cell"
273295
data-row-col="1,4"
296+
role="button"
297+
tabindex="0"
274298
title="2019-10-10"
275299
>
276300
<div>
@@ -280,6 +304,8 @@ exports[`DatePicker prop: formatter 1`] = `
280304
<td
281305
class="cell"
282306
data-row-col="1,5"
307+
role="button"
308+
tabindex="0"
283309
title="2019-10-11"
284310
>
285311
<div>
@@ -289,6 +315,8 @@ exports[`DatePicker prop: formatter 1`] = `
289315
<td
290316
class="cell"
291317
data-row-col="1,6"
318+
role="button"
319+
tabindex="0"
292320
title="2019-10-12"
293321
>
294322
<div>
@@ -311,6 +339,8 @@ exports[`DatePicker prop: formatter 1`] = `
311339
<td
312340
class="cell active"
313341
data-row-col="2,0"
342+
role="button"
343+
tabindex="0"
314344
title="2019-10-13"
315345
>
316346
<div>
@@ -320,6 +350,8 @@ exports[`DatePicker prop: formatter 1`] = `
320350
<td
321351
class="cell"
322352
data-row-col="2,1"
353+
role="button"
354+
tabindex="0"
323355
title="2019-10-14"
324356
>
325357
<div>
@@ -329,6 +361,8 @@ exports[`DatePicker prop: formatter 1`] = `
329361
<td
330362
class="cell"
331363
data-row-col="2,2"
364+
role="button"
365+
tabindex="0"
332366
title="2019-10-15"
333367
>
334368
<div>
@@ -338,6 +372,8 @@ exports[`DatePicker prop: formatter 1`] = `
338372
<td
339373
class="cell"
340374
data-row-col="2,3"
375+
role="button"
376+
tabindex="0"
341377
title="2019-10-16"
342378
>
343379
<div>
@@ -347,6 +383,8 @@ exports[`DatePicker prop: formatter 1`] = `
347383
<td
348384
class="cell"
349385
data-row-col="2,4"
386+
role="button"
387+
tabindex="0"
350388
title="2019-10-17"
351389
>
352390
<div>
@@ -356,6 +394,8 @@ exports[`DatePicker prop: formatter 1`] = `
356394
<td
357395
class="cell"
358396
data-row-col="2,5"
397+
role="button"
398+
tabindex="0"
359399
title="2019-10-18"
360400
>
361401
<div>
@@ -365,6 +405,8 @@ exports[`DatePicker prop: formatter 1`] = `
365405
<td
366406
class="cell"
367407
data-row-col="2,6"
408+
role="button"
409+
tabindex="0"
368410
title="2019-10-19"
369411
>
370412
<div>
@@ -387,6 +429,8 @@ exports[`DatePicker prop: formatter 1`] = `
387429
<td
388430
class="cell"
389431
data-row-col="3,0"
432+
role="button"
433+
tabindex="0"
390434
title="2019-10-20"
391435
>
392436
<div>
@@ -396,6 +440,8 @@ exports[`DatePicker prop: formatter 1`] = `
396440
<td
397441
class="cell"
398442
data-row-col="3,1"
443+
role="button"
444+
tabindex="0"
399445
title="2019-10-21"
400446
>
401447
<div>
@@ -405,6 +451,8 @@ exports[`DatePicker prop: formatter 1`] = `
405451
<td
406452
class="cell"
407453
data-row-col="3,2"
454+
role="button"
455+
tabindex="0"
408456
title="2019-10-22"
409457
>
410458
<div>
@@ -414,6 +462,8 @@ exports[`DatePicker prop: formatter 1`] = `
414462
<td
415463
class="cell"
416464
data-row-col="3,3"
465+
role="button"
466+
tabindex="0"
417467
title="2019-10-23"
418468
>
419469
<div>
@@ -423,6 +473,8 @@ exports[`DatePicker prop: formatter 1`] = `
423473
<td
424474
class="cell"
425475
data-row-col="3,4"
476+
role="button"
477+
tabindex="0"
426478
title="2019-10-24"
427479
>
428480
<div>
@@ -432,6 +484,8 @@ exports[`DatePicker prop: formatter 1`] = `
432484
<td
433485
class="cell"
434486
data-row-col="3,5"
487+
role="button"
488+
tabindex="0"
435489
title="2019-10-25"
436490
>
437491
<div>
@@ -441,6 +495,8 @@ exports[`DatePicker prop: formatter 1`] = `
441495
<td
442496
class="cell"
443497
data-row-col="3,6"
498+
role="button"
499+
tabindex="0"
444500
title="2019-10-26"
445501
>
446502
<div>
@@ -463,6 +519,8 @@ exports[`DatePicker prop: formatter 1`] = `
463519
<td
464520
class="cell"
465521
data-row-col="4,0"
522+
role="button"
523+
tabindex="0"
466524
title="2019-10-27"
467525
>
468526
<div>
@@ -472,6 +530,8 @@ exports[`DatePicker prop: formatter 1`] = `
472530
<td
473531
class="cell"
474532
data-row-col="4,1"
533+
role="button"
534+
tabindex="0"
475535
title="2019-10-28"
476536
>
477537
<div>
@@ -481,6 +541,8 @@ exports[`DatePicker prop: formatter 1`] = `
481541
<td
482542
class="cell"
483543
data-row-col="4,2"
544+
role="button"
545+
tabindex="0"
484546
title="2019-10-29"
485547
>
486548
<div>
@@ -490,6 +552,8 @@ exports[`DatePicker prop: formatter 1`] = `
490552
<td
491553
class="cell"
492554
data-row-col="4,3"
555+
role="button"
556+
tabindex="0"
493557
title="2019-10-30"
494558
>
495559
<div>
@@ -499,6 +563,8 @@ exports[`DatePicker prop: formatter 1`] = `
499563
<td
500564
class="cell"
501565
data-row-col="4,4"
566+
role="button"
567+
tabindex="0"
502568
title="2019-10-31"
503569
>
504570
<div>
@@ -508,6 +574,8 @@ exports[`DatePicker prop: formatter 1`] = `
508574
<td
509575
class="cell not-current-month"
510576
data-row-col="4,5"
577+
role="button"
578+
tabindex="0"
511579
title="2019-11-01"
512580
>
513581
<div>
@@ -517,6 +585,8 @@ exports[`DatePicker prop: formatter 1`] = `
517585
<td
518586
class="cell not-current-month"
519587
data-row-col="4,6"
588+
role="button"
589+
tabindex="0"
520590
title="2019-11-02"
521591
>
522592
<div>
@@ -539,6 +609,8 @@ exports[`DatePicker prop: formatter 1`] = `
539609
<td
540610
class="cell not-current-month"
541611
data-row-col="5,0"
612+
role="button"
613+
tabindex="0"
542614
title="2019-11-03"
543615
>
544616
<div>
@@ -548,6 +620,8 @@ exports[`DatePicker prop: formatter 1`] = `
548620
<td
549621
class="cell not-current-month"
550622
data-row-col="5,1"
623+
role="button"
624+
tabindex="0"
551625
title="2019-11-04"
552626
>
553627
<div>
@@ -557,6 +631,8 @@ exports[`DatePicker prop: formatter 1`] = `
557631
<td
558632
class="cell not-current-month"
559633
data-row-col="5,2"
634+
role="button"
635+
tabindex="0"
560636
title="2019-11-05"
561637
>
562638
<div>
@@ -566,6 +642,8 @@ exports[`DatePicker prop: formatter 1`] = `
566642
<td
567643
class="cell not-current-month"
568644
data-row-col="5,3"
645+
role="button"
646+
tabindex="0"
569647
title="2019-11-06"
570648
>
571649
<div>
@@ -575,6 +653,8 @@ exports[`DatePicker prop: formatter 1`] = `
575653
<td
576654
class="cell not-current-month"
577655
data-row-col="5,4"
656+
role="button"
657+
tabindex="0"
578658
title="2019-11-07"
579659
>
580660
<div>
@@ -584,6 +664,8 @@ exports[`DatePicker prop: formatter 1`] = `
584664
<td
585665
class="cell not-current-month"
586666
data-row-col="5,5"
667+
role="button"
668+
tabindex="0"
587669
title="2019-11-08"
588670
>
589671
<div>
@@ -593,6 +675,8 @@ exports[`DatePicker prop: formatter 1`] = `
593675
<td
594676
class="cell not-current-month"
595677
data-row-col="5,6"
678+
role="button"
679+
tabindex="0"
596680
title="2019-11-09"
597681
>
598682
<div>

0 commit comments

Comments
 (0)