diff --git a/src/generic/datepicker-control/DatepickerControl.jsx b/src/generic/datepicker-control/DatepickerControl.jsx index dbc556521f..9e5c01d36d 100644 --- a/src/generic/datepicker-control/DatepickerControl.jsx +++ b/src/generic/datepicker-control/DatepickerControl.jsx @@ -32,9 +32,21 @@ const DatepickerControl = ({ [DATEPICKER_TYPES.date]: DATE_FORMAT, [DATEPICKER_TYPES.time]: TIME_FORMAT, }; + const isTimePicker = type === DATEPICKER_TYPES.time; + + let describedByIds; + if (isTimePicker) { + const ids = [`${controlName}-timehint`]; + if (helpText) { + ids.push(`${controlName}-helptext`); + } + describedByIds = ids.filter(Boolean).join(' ') || undefined; + } else if (helpText) { + describedByIds = `${controlName}-helptext`; + } return ( - + {label} {showUTC && ( @@ -52,6 +64,7 @@ const DatepickerControl = ({ /> )} { if (isValidDate(date)) { onChange(convertToStringFromDate(date)); @@ -74,7 +88,18 @@ const DatepickerControl = ({ }} /> - {helpText && {helpText}} + {isTimePicker && ( + + {intl.formatMessage(messages.timepickerScreenreaderHint, { + timeFormat: inputFormat[type].toLocaleUpperCase(), + })} + + )} + {helpText && ( + + {helpText} + + )} ); }; diff --git a/src/generic/datepicker-control/DatepickerControl.test.jsx b/src/generic/datepicker-control/DatepickerControl.test.jsx index 509fc0cf8b..77739b52ba 100644 --- a/src/generic/datepicker-control/DatepickerControl.test.jsx +++ b/src/generic/datepicker-control/DatepickerControl.test.jsx @@ -48,4 +48,40 @@ describe('', () => { convertToStringFromDate('06/16/2023'), ); }); + + it('renders time picker with accessibility hint', () => { + const { getByText, getByPlaceholderText } = render( + , + ); + const input = getByPlaceholderText('HH:MM'); + + expect( + getByText('Enter time in HH:MM or twelve-hour format, for example 6:00 PM.'), + ).toBeInTheDocument(); + expect(input.getAttribute('aria-describedby')).toContain('fooControlName-timehint'); + }); + + it('renders time picker with accessibility hint and help text', () => { + const { getByText, getByPlaceholderText } = render( + , + ); + const input = getByPlaceholderText('HH:MM'); + + expect( + getByText('Enter time in HH:MM or twelve-hour format, for example 6:00 PM.'), + ).toBeInTheDocument(); + expect(getByText('This is help text')).toBeInTheDocument(); + expect(input.getAttribute('aria-describedby')).toContain('fooControlName-timehint'); + expect(input.getAttribute('aria-describedby')).toContain('fooControlName-helptext'); + }); }); diff --git a/src/generic/datepicker-control/messages.js b/src/generic/datepicker-control/messages.js index b6139f7b57..38446a69ac 100644 --- a/src/generic/datepicker-control/messages.js +++ b/src/generic/datepicker-control/messages.js @@ -9,6 +9,14 @@ const messages = defineMessages({ id: 'course-authoring.schedule.schedule-section.datepicker.utc', defaultMessage: 'UTC', }, + timepickerAriaLabel: { + id: 'course-authoring.schedule.schedule-section.timepicker.aria-label', + defaultMessage: 'Time input field. Enter a time or use the arrow keys to adjust.', + }, + timepickerScreenreaderHint: { + id: 'course-authoring.schedule.schedule-section.timepicker.screenreader-hint', + defaultMessage: 'Enter time in {timeFormat} or twelve-hour format, for example 6:00 PM.', + }, }); export default messages;