Skip to content
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

Jump to bottom

feat: datepicker: focus trap to datepicker components to enhance keyboard accessibility. #901

Merged
merged 8 commits into from
Nov 10, 2024
Merged

feat: datepicker: focus trap to datepicker components to enhance keyboard accessibility. #901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bbb1efc
feat: datepicker: add datepicker a11y support
krane-c-eightfold Oct 25, 2024
37d3b15
Merge branch 'main' into fix-a11y-datepicker
krane-c-eightfold Nov 4, 2024
0e0712b
feat: datepicker : updated buttons press for datepicker
krane-c-eightfold Nov 4, 2024
f28e114
feat: datepicker : updated test snapshots
krane-c-eightfold Nov 4, 2024
3f36c67
feat: datepicker : updated test snapshots
krane-c-eightfold Nov 4, 2024
543fa6b
fix: locale update
sravichandran-eightfold Nov 9, 2024
e6aaa01
fix: test
sravichandran-eightfold Nov 9, 2024
b8e6daa
fix: adding focustrap by default
sravichandran-eightfold Nov 9, 2024
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
28 changes: 28 additions & 0 deletions src/components/DateTimePicker/DatePicker/DatePicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import DatePicker, { DatePickerShape, DatePickerSize } from './';
import type { DatePickerProps, RangePickerProps } from './';
import { ButtonVariant } from '../../Button';
import { Stack } from '../../Stack';
import { ConfigProvider } from '../../ConfigProvider';

export default {
title: 'Date Picker',
Expand Down Expand Up @@ -94,6 +95,26 @@ const Single_Picker_Story: ComponentStory<typeof DatePicker> = (args) => {
console.log(date, dateString);
};

return (
<ConfigProvider themeOptions={{ name: 'blue' }}>
<Stack direction="vertical" flexGap="m">
<DatePicker {...args} onChange={onChange} />
<DatePicker {...args} onChange={onChange} picker="week" />
<DatePicker {...args} onChange={onChange} picker="month" />
<DatePicker {...args} onChange={onChange} picker="quarter" />
<DatePicker {...args} onChange={onChange} picker="year" />
</Stack>
</ConfigProvider>
);
};

const Single_Picker_TrapFocus_Story: ComponentStory<typeof DatePicker> = (
args
) => {
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(date, dateString);
};

return (
<Stack direction="vertical" flexGap="m">
<DatePicker {...args} onChange={onChange} />
Expand Down Expand Up @@ -537,6 +558,7 @@ const Range_Status_Story: ComponentStory<typeof RangePicker> = (args) => {
};

export const Single_Picker = Single_Picker_Story.bind({});
export const Single_Picker_TrapFocus = Single_Picker_TrapFocus_Story.bind({});
export const Single_Picker_Readonly = Single_Picker_Readonly_Story.bind({});
export const Single_Picker_Disabled = Single_Picker_Disabled_Story.bind({});
export const Single_Picker_Disabled_Date_and_Time =
Expand Down Expand Up @@ -572,6 +594,7 @@ export const Range_Status = Range_Status_Story.bind({});
// See https://www.npmjs.com/package/babel-plugin-named-exports-order
export const __namedExportsOrder = [
'Single_Picker',
'Single_Picker_TrapFocus',
'Single_Picker_Readonly',
'Single_Picker_Disabled',
'Single_Picker_Disabled_Date_and_Time',
Expand Down Expand Up @@ -613,6 +636,11 @@ const pickerArgs: Object = {

Single_Picker.args = {
...pickerArgs,
trapFocus: false,
};

Single_Picker_TrapFocus.args = {
...pickerArgs,
};

Single_Picker_Readonly.args = {
Expand Down
2 changes: 2 additions & 0 deletions src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export default function generatePicker<DateType>(
todayButtonProps,
todayActive = true,
todayText: defaultTodayText,
trapFocus = true,
...rest
} = props;
const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
Expand Down Expand Up @@ -263,6 +264,7 @@ export default function generatePicker<DateType>(
superPrevIcon={IconName.mdiChevronDoubleLeft}
superNextIcon={IconName.mdiChevronDoubleRight}
allowClear
trapFocus={trapFocus}
{...rest}
{...additionalOverrideProps}
locale={locale!.lang}
Expand Down
1 change: 1 addition & 0 deletions src/components/DateTimePicker/DatePicker/Styles/partial.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ $picker-time-partial-cell-height: 28px;
&-in-view.picker-cell-range-start,
&-in-view.picker-cell-range-end {
background: var(--picker-cell-background-color-active);
border: 1px solid var(--picker-cell-border-color-active);
color: var(--picker-cell-foreground-color-active);
}

Expand Down
36 changes: 36 additions & 0 deletions src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@ LoadedCheerio {
"children": Array [
Node {
"attribs": Object {
"aria-controls": "dp-dialog-1",
"aria-expanded": "false",
"aria-haspopup": "dialog",
"autocomplete": "off",
"placeholder": "Select date",
"readonly": "",
"role": "combobox",
"size": "12",
"title": "2000-01-01",
"value": "2000-01-01",
Expand Down Expand Up @@ -213,17 +217,25 @@ LoadedCheerio {
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
},
"x-attribsPrefix": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
Expand Down Expand Up @@ -407,9 +419,13 @@ LoadedCheerio {
"parent": [Circular],
"prev": Node {
"attribs": Object {
"aria-controls": "dp-dialog-1",
"aria-expanded": "false",
"aria-haspopup": "dialog",
"autocomplete": "off",
"placeholder": "Select date",
"readonly": "",
"role": "combobox",
"size": "12",
"title": "2000-01-01",
"value": "2000-01-01",
Expand All @@ -422,17 +438,25 @@ LoadedCheerio {
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
},
"x-attribsPrefix": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
Expand Down Expand Up @@ -612,9 +636,13 @@ LoadedCheerio {
"parent": [Circular],
"prev": Node {
"attribs": Object {
"aria-controls": "dp-dialog-1",
"aria-expanded": "false",
"aria-haspopup": "dialog",
"autocomplete": "off",
"placeholder": "Select date",
"readonly": "",
"role": "combobox",
"size": "12",
"title": "2000-01-01",
"value": "2000-01-01",
Expand All @@ -627,17 +655,25 @@ LoadedCheerio {
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
},
"x-attribsPrefix": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
Expand Down
36 changes: 36 additions & 0 deletions src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@ LoadedCheerio {
"children": Array [
Node {
"attribs": Object {
"aria-controls": "dp-dialog-1",
"aria-expanded": "false",
"aria-haspopup": "dialog",
"autocomplete": "off",
"placeholder": "Select date",
"readonly": "",
"role": "combobox",
"size": "21",
"title": "2000-01-01 00:00:00",
"value": "2000-01-01 00:00:00",
Expand Down Expand Up @@ -213,17 +217,25 @@ LoadedCheerio {
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
},
"x-attribsPrefix": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
Expand Down Expand Up @@ -407,9 +419,13 @@ LoadedCheerio {
"parent": [Circular],
"prev": Node {
"attribs": Object {
"aria-controls": "dp-dialog-1",
"aria-expanded": "false",
"aria-haspopup": "dialog",
"autocomplete": "off",
"placeholder": "Select date",
"readonly": "",
"role": "combobox",
"size": "21",
"title": "2000-01-01 00:00:00",
"value": "2000-01-01 00:00:00",
Expand All @@ -422,17 +438,25 @@ LoadedCheerio {
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
},
"x-attribsPrefix": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
Expand Down Expand Up @@ -612,9 +636,13 @@ LoadedCheerio {
"parent": [Circular],
"prev": Node {
"attribs": Object {
"aria-controls": "dp-dialog-1",
"aria-expanded": "false",
"aria-haspopup": "dialog",
"autocomplete": "off",
"placeholder": "Select date",
"readonly": "",
"role": "combobox",
"size": "21",
"title": "2000-01-01 00:00:00",
"value": "2000-01-01 00:00:00",
Expand All @@ -627,17 +655,25 @@ LoadedCheerio {
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
},
"x-attribsPrefix": Object {
"aria-controls": undefined,
"aria-expanded": undefined,
"aria-haspopup": undefined,
"autocomplete": undefined,
"placeholder": undefined,
"readonly": undefined,
"role": undefined,
"size": undefined,
"title": undefined,
"value": undefined,
Expand Down
Loading
Loading