Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
[date-time-picker] Update Screen reader response not to read visually…
Browse files Browse the repository at this point in the history 
… hidden text with name attribute. (#1986)
  • Loading branch information
@MadanKumarGovindaswamy
MadanKumarGovindaswamy authored Jan 22, 2024
1 parent ab61a6d commit 4d8e7dc
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 112 deletions.
3 changes: 3 additions & 0 deletions packages/terra-date-picker/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Updated screen reader response not to announce name attribute.

## 4.95.0 - (December 18, 2023)

* Changed
Expand Down
8 changes: 3 additions & 5 deletions packages/terra-date-picker/src/DateInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,6 @@ const DatePickerInput = (props) => {

const additionalInputProps = { ...customProps, ...inputAttributes };
const momentDateFormat = useMemo(() => DateUtil.getFormatByLocale(intl.locale), [intl.locale]);
const nameLabelId = `name-label-${uuidv4()}`;
const dateValue = useMemo(() => (DateUtil.convertToISO8601(value, momentDateFormat)), [momentDateFormat, value]);
const dateFormatOrder = DateUtil.getDateFormatOrder(momentDateFormat);
const separator = DateUtil.getDateSeparator(intl.locale);
Expand Down Expand Up @@ -734,7 +733,7 @@ const DatePickerInput = (props) => {
pattern="\d*"
aria-required={required}
aria-label={intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}
aria-describedby={dateFormatOrder === DateUtil.dateOrder.DMY ? `${nameLabelId} ${ariaDescriptionIds}` : ariaDescriptionIds}
aria-describedby={ariaDescriptionIds}
id={dayInputId}
/>
);
Expand Down Expand Up @@ -765,7 +764,7 @@ const DatePickerInput = (props) => {
pattern="\d*"
aria-required={required}
aria-label={intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}
aria-describedby={dateFormatOrder === DateUtil.dateOrder.MDY ? `${nameLabelId} ${ariaDescriptionIds}` : ariaDescriptionIds}
aria-describedby={ariaDescriptionIds}
id={monthInputId}
/>
);
Expand Down Expand Up @@ -796,7 +795,7 @@ const DatePickerInput = (props) => {
pattern="\d*"
aria-required={required}
aria-label={intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}
aria-describedby={dateFormatOrder === DateUtil.dateOrder.YMD ? `${nameLabelId} ${ariaDescriptionIds}` : ariaDescriptionIds}
aria-describedby={ariaDescriptionIds}
id={yearInputId}
/>
);
Expand Down Expand Up @@ -852,7 +851,6 @@ const DatePickerInput = (props) => {
value={dateValue}
/>
<VisuallyHiddenText text={value ? `${label}, ${getLocalizedDateForScreenReader(DateUtil.createSafeDate(dateValue, initialTimeZone), { intl, locale: intl.locale })}` : label} />
<VisuallyHiddenText id={nameLabelId} text={name} />
<VisuallyHiddenText
refCallback={setVisuallyHiddenComponent}
aria-atomic="true"
Expand Down
63 changes: 12 additions & 51 deletions packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,6 @@ exports[`correctly applies the theme context className 1`] = `
Terra.datePicker.date
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
id="name-label-00000000-0000-0000-0000-000000000000"
>
<span
className="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
/>
</VisuallyHiddenText>
<VisuallyHiddenText
aria-atomic="true"
aria-live="assertive"
Expand Down Expand Up @@ -141,7 +133,7 @@ exports[`correctly applies the theme context className 1`] = `
}
month={
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand Down Expand Up @@ -194,7 +186,7 @@ exports[`correctly applies the theme context className 1`] = `
}
>
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand All @@ -215,7 +207,7 @@ exports[`correctly applies the theme context className 1`] = `
value=""
>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="form-input orion-fusion-theme date-input-month"
Expand Down Expand Up @@ -535,14 +527,6 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
Terra.datePicker.date
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
id="name-label-00000000-0000-0000-0000-000000000000"
>
<span
className="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
/>
</VisuallyHiddenText>
<VisuallyHiddenText
aria-atomic="true"
aria-live="assertive"
Expand Down Expand Up @@ -583,7 +567,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
}
month={
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand Down Expand Up @@ -636,7 +620,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
}
>
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand All @@ -657,7 +641,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
value=""
>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="form-input date-input-month"
Expand Down Expand Up @@ -936,18 +920,14 @@ exports[`should render a date input with isIncomplete and required props 1`] = `
>
Terra.datePicker.date
</span>
<span
class="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
/>
<span
aria-atomic="true"
aria-live="assertive"
aria-relevant="all"
class="visually-hidden-text"
/>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required="true"
class="form-input date-input-month"
Expand Down Expand Up @@ -1064,18 +1044,14 @@ exports[`should render a date input with isInvalid prop 1`] = `
>
Terra.datePicker.date
</span>
<span
class="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
/>
<span
aria-atomic="true"
aria-live="assertive"
aria-relevant="all"
class="visually-hidden-text"
/>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required="false"
class="form-input date-input-month"
Expand Down Expand Up @@ -1192,18 +1168,14 @@ exports[`should render a default date input 1`] = `
>
Terra.datePicker.date
</span>
<span
class="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
/>
<span
aria-atomic="true"
aria-live="assertive"
aria-relevant="all"
class="visually-hidden-text"
/>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required="false"
class="form-input date-input-month"
Expand Down Expand Up @@ -1416,17 +1388,6 @@ exports[`should render a default date input with all props 1`] = `
Aria Label text, Sunday, January 1, 2017
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
id="name-label-00000000-0000-0000-0000-000000000000"
text="date-input"
>
<span
className="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
>
date-input
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
aria-atomic="true"
aria-live="assertive"
Expand Down Expand Up @@ -1468,7 +1429,7 @@ exports[`should render a default date input with all props 1`] = `
}
month={
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand Down Expand Up @@ -1523,7 +1484,7 @@ exports[`should render a default date input with all props 1`] = `
}
>
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand All @@ -1545,7 +1506,7 @@ exports[`should render a default date input with all props 1`] = `
value="01"
>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="form-input date-input-month"
Expand Down
17 changes: 3 additions & 14 deletions packages/terra-date-picker/tests/jest/__snapshots__/DatePicker.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,17 +363,6 @@ exports[`correctly applies the theme context className 1`] = `
Terra.datePicker.date, Sunday, January 1, 2017
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
id="name-label-00000000-0000-0000-0000-000000000000"
text="date-input"
>
<span
className="visually-hidden-text"
id="name-label-00000000-0000-0000-0000-000000000000"
>
date-input
</span>
</VisuallyHiddenText>
<VisuallyHiddenText
aria-atomic="true"
aria-live="assertive"
Expand Down Expand Up @@ -414,7 +403,7 @@ exports[`correctly applies the theme context className 1`] = `
}
month={
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand Down Expand Up @@ -467,7 +456,7 @@ exports[`correctly applies the theme context className 1`] = `
}
>
<Input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="date-input-month"
Expand All @@ -488,7 +477,7 @@ exports[`correctly applies the theme context className 1`] = `
value="01"
>
<input
aria-describedby="name-label-00000000-0000-0000-0000-000000000000 terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
aria-label="Terra.datePicker.monthLabel"
aria-required={false}
className="form-input orion-fusion-theme date-input-month"
Expand Down
Loading

0 comments on commit 4d8e7dc

Please sign in to comment.