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

[date-time-picker] Update Screen reader response not to read visually hidden text with name attribute. #1986

Merged
merged 2 commits into from
Jan 22, 2024

Conversation

MadanKumarGovindaswamy
Copy link
Contributor

@MadanKumarGovindaswamy MadanKumarGovindaswamy commented Jan 17, 2024

Summary

What was changed:
Update Screen reader response not to read visually hidden text with name attribute.

Why it was changed:

When user first navigates to the date input field, then the visually hidden text with name attribute is exposed to user which is not contextual and can be confusing.

Screen.Recording.2024-01-17.at.5.13.06.PM.mov

Testing

This change was tested using:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

This PR resolves:

UXPLATFORM-10137


Thank you for contributing to Terra.
@cerner/terra

@github-actions github-actions bot temporarily deployed to preview-pr-1986 January 17, 2024 09:06 Destroyed
@MadanKumarGovindaswamy MadanKumarGovindaswamy changed the title Update: remove name attribute exposed to SR [date-time-picker] Update Screen reader response not to read visually hidden text with name attribute. Jan 17, 2024
@MadanKumarGovindaswamy MadanKumarGovindaswamy marked this pull request as ready for review January 17, 2024 11:36
@@ -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()}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Id was created to fix the issue of label not being announced by screen reader, Does this PR still ensures label announcement by screen readers..?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Id was tagged to name attribute. And even earlier visual label is announced by the screen reader. Ashish has created a PR for the label announcement.

@rbsree
Copy link

rbsree commented Jan 19, 2024

+1
Th visually hidden text is no longer exposed along with the "Month" edit field present for the "Enter Date/Time" field. Hence, the issue is fixed.

@supreethmr supreethmr merged commit 4d8e7dc into main Jan 22, 2024
22 checks passed
@supreethmr supreethmr deleted the UXPLATFORM-10137-DatePickerSRIssues branch January 22, 2024 04:50
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants