Skip to content

Feat(a11y): Fix focus keyboard a11y #757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Feat(a11y): Fix focus keyboard a11y #757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bfc21e3
fix(a11y): add aria label to icon button
acamachoappomni Oct 17, 2023
9b45f9c
Merge pull request #1 from iknox27/fix-a11y
iknox27 Oct 19, 2023
b484555
feat(a11y): add keyboard focus for calendar panel
acamachoappomni Oct 18, 2023
6c73d06
feat(a11y): add keyboard focus for month and year
acamachoappomni Oct 19, 2023
9885da5
feat(a11y): add keyboard focus for time and datetime
acamachoappomni Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 84 additions & 0 deletions __test__/__snapshots__/date-picker.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="0,0"
role="button"
tabindex="0"
title="2019-09-29"
>
<div>
Expand All @@ -168,6 +170,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="0,1"
role="button"
tabindex="0"
title="2019-09-30"
>
<div>
Expand All @@ -177,6 +181,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="0,2"
role="button"
tabindex="0"
title="2019-10-01"
>
<div>
Expand All @@ -186,6 +192,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="0,3"
role="button"
tabindex="0"
title="2019-10-02"
>
<div>
Expand All @@ -195,6 +203,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="0,4"
role="button"
tabindex="0"
title="2019-10-03"
>
<div>
Expand All @@ -204,6 +214,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="0,5"
role="button"
tabindex="0"
title="2019-10-04"
>
<div>
Expand All @@ -213,6 +225,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="0,6"
role="button"
tabindex="0"
title="2019-10-05"
>
<div>
Expand All @@ -235,6 +249,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,0"
role="button"
tabindex="0"
title="2019-10-06"
>
<div>
Expand All @@ -244,6 +260,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,1"
role="button"
tabindex="0"
title="2019-10-07"
>
<div>
Expand All @@ -253,6 +271,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,2"
role="button"
tabindex="0"
title="2019-10-08"
>
<div>
Expand All @@ -262,6 +282,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,3"
role="button"
tabindex="0"
title="2019-10-09"
>
<div>
Expand All @@ -271,6 +293,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,4"
role="button"
tabindex="0"
title="2019-10-10"
>
<div>
Expand All @@ -280,6 +304,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,5"
role="button"
tabindex="0"
title="2019-10-11"
>
<div>
Expand All @@ -289,6 +315,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="1,6"
role="button"
tabindex="0"
title="2019-10-12"
>
<div>
Expand All @@ -311,6 +339,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell active"
data-row-col="2,0"
role="button"
tabindex="0"
title="2019-10-13"
>
<div>
Expand All @@ -320,6 +350,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="2,1"
role="button"
tabindex="0"
title="2019-10-14"
>
<div>
Expand All @@ -329,6 +361,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="2,2"
role="button"
tabindex="0"
title="2019-10-15"
>
<div>
Expand All @@ -338,6 +372,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="2,3"
role="button"
tabindex="0"
title="2019-10-16"
>
<div>
Expand All @@ -347,6 +383,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="2,4"
role="button"
tabindex="0"
title="2019-10-17"
>
<div>
Expand All @@ -356,6 +394,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="2,5"
role="button"
tabindex="0"
title="2019-10-18"
>
<div>
Expand All @@ -365,6 +405,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="2,6"
role="button"
tabindex="0"
title="2019-10-19"
>
<div>
Expand All @@ -387,6 +429,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,0"
role="button"
tabindex="0"
title="2019-10-20"
>
<div>
Expand All @@ -396,6 +440,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,1"
role="button"
tabindex="0"
title="2019-10-21"
>
<div>
Expand All @@ -405,6 +451,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,2"
role="button"
tabindex="0"
title="2019-10-22"
>
<div>
Expand All @@ -414,6 +462,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,3"
role="button"
tabindex="0"
title="2019-10-23"
>
<div>
Expand All @@ -423,6 +473,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,4"
role="button"
tabindex="0"
title="2019-10-24"
>
<div>
Expand All @@ -432,6 +484,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,5"
role="button"
tabindex="0"
title="2019-10-25"
>
<div>
Expand All @@ -441,6 +495,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="3,6"
role="button"
tabindex="0"
title="2019-10-26"
>
<div>
Expand All @@ -463,6 +519,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="4,0"
role="button"
tabindex="0"
title="2019-10-27"
>
<div>
Expand All @@ -472,6 +530,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="4,1"
role="button"
tabindex="0"
title="2019-10-28"
>
<div>
Expand All @@ -481,6 +541,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="4,2"
role="button"
tabindex="0"
title="2019-10-29"
>
<div>
Expand All @@ -490,6 +552,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="4,3"
role="button"
tabindex="0"
title="2019-10-30"
>
<div>
Expand All @@ -499,6 +563,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell"
data-row-col="4,4"
role="button"
tabindex="0"
title="2019-10-31"
>
<div>
Expand All @@ -508,6 +574,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="4,5"
role="button"
tabindex="0"
title="2019-11-01"
>
<div>
Expand All @@ -517,6 +585,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="4,6"
role="button"
tabindex="0"
title="2019-11-02"
>
<div>
Expand All @@ -539,6 +609,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,0"
role="button"
tabindex="0"
title="2019-11-03"
>
<div>
Expand All @@ -548,6 +620,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,1"
role="button"
tabindex="0"
title="2019-11-04"
>
<div>
Expand All @@ -557,6 +631,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,2"
role="button"
tabindex="0"
title="2019-11-05"
>
<div>
Expand All @@ -566,6 +642,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,3"
role="button"
tabindex="0"
title="2019-11-06"
>
<div>
Expand All @@ -575,6 +653,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,4"
role="button"
tabindex="0"
title="2019-11-07"
>
<div>
Expand All @@ -584,6 +664,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,5"
role="button"
tabindex="0"
title="2019-11-08"
>
<div>
Expand All @@ -593,6 +675,8 @@ exports[`DatePicker prop: formatter 1`] = `
<td
class="cell not-current-month"
data-row-col="5,6"
role="button"
tabindex="0"
title="2019-11-09"
>
<div>
Expand Down
Loading