fix(datetimeinput): accessibility violation in date time input

#3800
carbon-design-system · Jun 16, 2023 · 3218389 · 3218389
1 parent d690721
commit 3218389
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/packages/react/src/components/Card/__snapshots__/Card.story.storyshot b/packages/react/src/components/Card/__snapshots__/Card.story.storyshot
@@ -5426,7 +5426,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
                       aria-expanded={false}
                       aria-label="Calendar"
                       className="bx--tooltip__label"
-                      id="test-trigger-id-2"
+                      id="test-trigger-Card-toolbar"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onContextMenu={[Function]}
@@ -5586,7 +5586,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
                       aria-expanded={false}
                       aria-label="Calendar"
                       className="bx--tooltip__label"
-                      id="test-trigger-id-2"
+                      id="test-trigger-Card-toolbar"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onContextMenu={[Function]}

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
@@ -269,6 +269,8 @@ export const defaultProps = {
     relativeToLabel: 'Relative to',
     absoluteLabel: 'Absolute',
     startTimeLabel: 'Start time',
+    startAriaLabel: 'Date time start',
+    endAriaLabel: 'Date time end',
     endTimeLabel: 'End time',
     applyBtnLabel: 'Apply',
     cancelBtnLabel: 'Cancel',
@@ -1083,7 +1085,7 @@ const DateTimePicker = ({
             hideTooltip
             iconDescription={mergedI18n.calendarLabel}
             passive={false}
-            triggerId="test-trigger-id-2"
+            triggerId={`test-trigger-${id}`}
             light={light}
             menuOffset={{
               top: menuOffsetTop,
@@ -1115,7 +1117,7 @@ const DateTimePicker = ({
                   (invalidRangeStartDate ? invalidDateWarningHeight : 0) -
                   (!hasTimeInput ? timeInputHeight : 0),
               }}
-              role="listbox"
+              role="presentation"
               onClick={(event) => event.stopPropagation()} // need to stop the event so that it will not close the menu
               onKeyDown={(event) => event.stopPropagation()} // need to stop the event so that it will not close the menu
               tabIndex="-1"
@@ -1315,13 +1317,15 @@ const DateTimePicker = ({
                         >
                           <DatePickerInput
                             labelText=""
+                            aria-label={mergedI18n.startAriaLabel}
                             id={`${id}-date-picker-input-start`}
                             hideLabel
                           />
 
                           {datePickerType === 'range' ? (
                             <DatePickerInput
                               labelText=""
+                              aria-label={mergedI18n.endAriaLabel}
                               id={`${id}-date-picker-input-end`}
                               hideLabel
                             />

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx
@@ -246,6 +246,8 @@ const defaultProps = {
     absoluteLabel: 'Absolute',
     startTimeLabel: 'Start time',
     endTimeLabel: 'End time',
+    startAriaLabel: 'Date time start',
+    endAriaLabel: 'Date time end',
     applyBtnLabel: 'Apply',
     cancelBtnLabel: 'Cancel',
     backBtnLabel: 'Back',
@@ -834,7 +836,7 @@ const DateTimePicker = ({
             hideTooltip
             iconDescription={mergedI18n.calendarLabel}
             passive={false}
-            triggerId="test-trigger-id-2"
+            triggerId={`test-trigger-${id}`}
             light={light}
             menuOffset={{
               top: menuOffsetTop,
@@ -862,7 +864,7 @@ const DateTimePicker = ({
                 height: customHeight,
                 maxHeight,
               }}
-              role="listbox"
+              role="presentation"
               onClick={(event) => event.stopPropagation()} // need to stop the event so that it will not close the menu
               onKeyDown={(event) => event.stopPropagation()} // need to stop the event so that it will not close the menu
               tabIndex="-1"
@@ -1054,11 +1056,13 @@ const DateTimePicker = ({
                         >
                           <DatePickerInput
                             labelText=""
+                            aria-label={mergedI18n.startAriaLabel}
                             id={`${id}-date-picker-input-start`}
                             hideLabel
                           />
                           <DatePickerInput
                             labelText=""
+                            aria-label={mergedI18n.endAriaLabel}
                             id={`${id}-date-picker-input-end`}
                             hideLabel
                           />

diff --git a/packages/react/src/components/DateTimePicker/__snapshots__/DateTimePickerV2.story.storyshot b/packages/react/src/components/DateTimePicker/__snapshots__/DateTimePickerV2.story.storyshot
@@ -110,7 +110,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -219,7 +219,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                 aria-expanded={false}
                 aria-label="Calendar"
                 className="bx--tooltip__label"
-                id="test-trigger-id-2"
+                id="test-trigger-datetimepicker"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onContextMenu={[Function]}
@@ -349,7 +349,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -462,7 +462,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker25"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -575,7 +575,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -700,7 +700,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                   aria-expanded={false}
                   aria-label="Calendar"
                   className="bx--tooltip__label"
-                  id="test-trigger-id-2"
+                  id="test-trigger-datetimepicker"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onContextMenu={[Function]}
@@ -838,7 +838,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -951,7 +951,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -1075,7 +1075,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                 aria-expanded={false}
                 aria-label="Calendar"
                 className="bx--tooltip__label"
-                id="test-trigger-id-2"
+                id="test-trigger-datetimepicker"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onContextMenu={[Function]}
@@ -1212,7 +1212,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}
@@ -1341,7 +1341,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
               aria-expanded={false}
               aria-label="Calendar"
               className="bx--tooltip__label"
-              id="test-trigger-id-2"
+              id="test-trigger-datetimepicker"
               onBlur={[Function]}
               onClick={[Function]}
               onContextMenu={[Function]}

diff --git a/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -9720,6 +9720,7 @@ Map {
         "customRangeLabel": "Custom range",
         "customRangeLinkLabel": "Custom Range",
         "decrement": "Decrement",
+        "endAriaLabel": "Date time end",
         "endTimeLabel": "End time",
         "hours": "hours",
         "increment": "Increment",
@@ -9736,6 +9737,7 @@ Map {
         "relativeLabels": Array [],
         "relativeToLabel": "Relative to",
         "resetBtnLabel": "Clear",
+        "startAriaLabel": "Date time start",
         "startTimeLabel": "Start time",
         "timePickerInvalidText": undefined,
         "toLabel": "to",