feat: datepicker: focus trap to datepicker components to enhance keyb…

…oard accessibility. (#901) * feat: datepicker: add datepicker a11y support * feat: datepicker : updated buttons press for datepicker * feat: datepicker : updated test snapshots * feat: datepicker : updated test snapshots * fix: locale update * fix: test * fix: adding focustrap by default --------- Co-authored-by: Samual Krish Ravichandran <sravichandran@eightfold.ai>
EightfoldAI · Nov 10, 2024 · 9477592 · 9477592
1 parent 34a3a08
commit 9477592
Show file tree

Hide file tree

Showing 69 changed files with 2,018 additions and 45 deletions.
diff --git a/src/components/DateTimePicker/DatePicker/DatePicker.stories.tsx b/src/components/DateTimePicker/DatePicker/DatePicker.stories.tsx
@@ -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',
@@ -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} />
@@ -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 =
@@ -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',
@@ -613,6 +636,11 @@ const pickerArgs: Object = {
 
 Single_Picker.args = {
   ...pickerArgs,
+  trapFocus: false,
+};
+
+Single_Picker_TrapFocus.args = {
+  ...pickerArgs,
 };
 
 Single_Picker_Readonly.args = {

diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx
@@ -92,6 +92,7 @@ export default function generatePicker<DateType>(
         todayButtonProps,
         todayActive = true,
         todayText: defaultTodayText,
+        trapFocus = true,
         ...rest
       } = props;
       const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
@@ -263,6 +264,7 @@ export default function generatePicker<DateType>(
                 superPrevIcon={IconName.mdiChevronDoubleLeft}
                 superNextIcon={IconName.mdiChevronDoubleRight}
                 allowClear
+                trapFocus={trapFocus}
                 {...rest}
                 {...additionalOverrideProps}
                 locale={locale!.lang}

diff --git a/src/components/DateTimePicker/DatePicker/Styles/partial.scss b/src/components/DateTimePicker/DatePicker/Styles/partial.scss
@@ -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);
   }
 

diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.date.shot
@@ -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",
@@ -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,
@@ -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",
@@ -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,
@@ -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",
@@ -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,

diff --git a/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot b/src/components/DateTimePicker/DatePicker/Tests/__snapshots__/DatePicker.dateTime.shot
@@ -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",
@@ -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,
@@ -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",
@@ -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,
@@ -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",
@@ -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,