diff --git a/packages/terra-date-picker/CHANGELOG.md b/packages/terra-date-picker/CHANGELOG.md index e6fb4d75046..a94a1ae9913 100644 --- a/packages/terra-date-picker/CHANGELOG.md +++ b/packages/terra-date-picker/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Added fix for field label SR announce. + ## 4.98.0 - (February 1, 2024) * Changed diff --git a/packages/terra-date-picker/src/DateInput.jsx b/packages/terra-date-picker/src/DateInput.jsx index 2abd0ba0baa..73b11b59cf1 100644 --- a/packages/terra-date-picker/src/DateInput.jsx +++ b/packages/terra-date-picker/src/DateInput.jsx @@ -732,7 +732,7 @@ const DatePickerInput = (props) => { size="2" pattern="\d*" aria-required={required} - aria-label={intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })} + aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}`} aria-describedby={ariaDescriptionIds} id={dayInputId} /> @@ -763,7 +763,7 @@ const DatePickerInput = (props) => { size="2" pattern="\d*" aria-required={required} - aria-label={intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })} + aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}`} aria-describedby={ariaDescriptionIds} id={monthInputId} /> @@ -794,7 +794,7 @@ const DatePickerInput = (props) => { size="4" pattern="\d*" aria-required={required} - aria-label={intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })} + aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}`} aria-describedby={ariaDescriptionIds} id={yearInputId} /> diff --git a/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap b/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap index ec13c124446..72a348f687b 100644 --- a/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap +++ b/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap @@ -1406,7 +1406,7 @@ exports[`should render a default date input with all props 1`] = ` day={
{ expect(DateTimeUtils.createSafeDate('2019-06-35T16:00:01', 'America/Test')).toEqual(undefined); }); +it('should render a default date time picker with ariaLabel', () => { + const ariaLabel = 'Select date and time'; + const datePicker = enzymeIntl.shallowWithIntl( + , + ); + expect(datePicker.prop('ariaLabel')).toBe(ariaLabel); + expect(datePicker).toMatchSnapshot(); +}); + it('correctly applies the theme context className', () => { const dateTime = enzymeIntl.shallowWithIntl( diff --git a/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap b/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap index e74a864d7a5..fc99fdd39eb 100644 --- a/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap +++ b/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap @@ -462,6 +462,50 @@ exports[`should render a default date time picker 1`] = ` /> `; +exports[`should render a default date time picker with ariaLabel 1`] = ` + +`; + exports[`should render a default date time picker with custom date input attributes 1`] = ` { { diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerDefaultDateOnly.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerDefaultDateOnly.jsx index 56c9db01831..295235af316 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerDefaultDateOnly.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerDefaultDateOnly.jsx @@ -18,6 +18,7 @@ const DateTimePickerExampleDefaultDate = () => { { { {

{

{

{ {

{

{

{

{ this.minuteInput = inputRef; }} - label={intl.formatMessage({ id: 'Terra.timeInput.minutes' })} + label={intl.formatMessage({ id: 'Terra.timeInput.minutes' }, { a11yLabel: this.a11yLabel })} className={minuteClassNames} type="text" value={this.state.minute} @@ -1112,7 +1112,7 @@ class TimeInput extends React.Component { {...inputAttributes} {...secondAttributes} refCallback={(inputRef) => { this.secondInput = inputRef; }} - label={intl.formatMessage({ id: 'Terra.timeInput.seconds' })} + label={intl.formatMessage({ id: 'Terra.timeInput.seconds' }, { a11yLabel: this.a11yLabel })} className={secondClassNames} type="text" value={this.state.second} diff --git a/packages/terra-time-input/translations/de.json b/packages/terra-time-input/translations/de.json index fbc1932bcdd..6c33c0fbf03 100644 --- a/packages/terra-time-input/translations/de.json +++ b/packages/terra-time-input/translations/de.json @@ -10,7 +10,7 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(hh:mm)", "Terra.timeInput.maskHourMinuteSecond": "(hh:mm:ss)", - "Terra.timeInput.minutes": "Minuten", + "Terra.timeInput.minutes": "{a11yLabel} Minuten", "Terra.timeInput.pm": "nachmittags", "Terra.timeInput.seconds": "Sekunden", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}", diff --git a/packages/terra-time-input/translations/en.json b/packages/terra-time-input/translations/en.json index caadead7d96..1e7e0f2cb49 100644 --- a/packages/terra-time-input/translations/en.json +++ b/packages/terra-time-input/translations/en.json @@ -10,9 +10,9 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(hh:mm)", "Terra.timeInput.maskHourMinuteSecond": "(hh:mm:ss)", - "Terra.timeInput.minutes": "Minutes", + "Terra.timeInput.minutes": "{a11yLabel} Minutes", "Terra.timeInput.pm": "p.m.", - "Terra.timeInput.seconds": "Seconds", + "Terra.timeInput.seconds": "{a11yLabel} Seconds", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}", "Terra.timeInput.textValueTwelveHourMinuteSecond": "{hour}:{minute}:{second} {meridiem}", "Terra.timeInput.textValueTwentyFourHourMinute": "{hour}:{minute}", diff --git a/packages/terra-time-input/translations/es.json b/packages/terra-time-input/translations/es.json index 1476d46f0f6..6924041a49d 100644 --- a/packages/terra-time-input/translations/es.json +++ b/packages/terra-time-input/translations/es.json @@ -10,7 +10,7 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(hh:mm)", "Terra.timeInput.maskHourMinuteSecond": "(hh:mm:ss)", - "Terra.timeInput.minutes": "Minutos", + "Terra.timeInput.minutes": "{a11yLabel} Minutos", "Terra.timeInput.pm": "p. m.", "Terra.timeInput.seconds": "Segundos", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}", diff --git a/packages/terra-time-input/translations/fr.json b/packages/terra-time-input/translations/fr.json index fc462efc501..215f54b1f72 100644 --- a/packages/terra-time-input/translations/fr.json +++ b/packages/terra-time-input/translations/fr.json @@ -10,7 +10,7 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(hh:mm)", "Terra.timeInput.maskHourMinuteSecond": "(hh:mm:ss)", - "Terra.timeInput.minutes": "Minutes", + "Terra.timeInput.minutes": "{a11yLabel} Minutes", "Terra.timeInput.pm": "après-midi", "Terra.timeInput.seconds": "Secondes", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}", diff --git a/packages/terra-time-input/translations/nl.json b/packages/terra-time-input/translations/nl.json index bc829619dac..587db2ca5a3 100755 --- a/packages/terra-time-input/translations/nl.json +++ b/packages/terra-time-input/translations/nl.json @@ -10,7 +10,7 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(uu:mm)", "Terra.timeInput.maskHourMinuteSecond": "(uu:mm:ss)", - "Terra.timeInput.minutes": "Minuten", + "Terra.timeInput.minutes": "{a11yLabel} Minuten", "Terra.timeInput.pm": "PM", "Terra.timeInput.seconds": "Seconden", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}", diff --git a/packages/terra-time-input/translations/pt.json b/packages/terra-time-input/translations/pt.json index d5ea37e171f..c3493691b00 100644 --- a/packages/terra-time-input/translations/pt.json +++ b/packages/terra-time-input/translations/pt.json @@ -10,7 +10,7 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(hh:mm)", "Terra.timeInput.maskHourMinuteSecond": "(hh:mm:ss)", - "Terra.timeInput.minutes": "Minutos", + "Terra.timeInput.minutes": "{a11yLabel} Minutos", "Terra.timeInput.pm": "p.m.", "Terra.timeInput.seconds": "Segundos", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}", diff --git a/packages/terra-time-input/translations/sv.json b/packages/terra-time-input/translations/sv.json index 969b730493a..42b83d1f383 100755 --- a/packages/terra-time-input/translations/sv.json +++ b/packages/terra-time-input/translations/sv.json @@ -10,7 +10,7 @@ "Terra.timeInput.labeledTextValue": "{a11yLabel} {a11yTimeValue}", "Terra.timeInput.maskHourMinute": "(HH:mm)", "Terra.timeInput.maskHourMinuteSecond": "(HH:mm:ss)", - "Terra.timeInput.minutes": "Minuter", + "Terra.timeInput.minutes": "{a11yLabel} Minuter", "Terra.timeInput.pm": "em", "Terra.timeInput.seconds": "sekunder", "Terra.timeInput.textValueTwelveHourMinute": "{hour}:{minute} {meridiem}",