From 3218389d2a1923c849f43afd50b29c90e3e19136 Mon Sep 17 00:00:00 2001 From: Abhishek Paul Date: Fri, 16 Jun 2023 12:21:39 +0530 Subject: [PATCH] fix(datetimeinput): accessibility violation in date time input #3800 --- .../Card/__snapshots__/Card.story.storyshot | 4 ++-- .../DateTimePickerV2WithTimeSpinner.jsx | 8 +++++-- .../DateTimePickerV2WithoutTimeSpinner.jsx | 8 +++++-- .../DateTimePickerV2.story.storyshot | 22 +++++++++---------- .../__snapshots__/publicAPI.test.js.snap | 2 ++ 5 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/react/src/components/Card/__snapshots__/Card.story.storyshot b/packages/react/src/components/Card/__snapshots__/Card.story.storyshot index d47ebc7afd..6e5f8901d8 100644 --- 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 index 9edff191fe..e352b10873 100644 --- 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,6 +1317,7 @@ const DateTimePicker = ({ > @@ -1322,6 +1325,7 @@ const DateTimePicker = ({ {datePickerType === 'range' ? ( diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx index 8a6bf6cf3f..d5daf882b8 100644 --- 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 = ({ > diff --git a/packages/react/src/components/DateTimePicker/__snapshots__/DateTimePickerV2.story.storyshot b/packages/react/src/components/DateTimePicker/__snapshots__/DateTimePickerV2.story.storyshot index 287cc668ac..d9c23c04b6 100644 --- 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 index 2a211d1a1f..ac68334327 100644 --- 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",