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

[Terra-Date-Time-Picker] - Added visual focus dashed border and SR fix #2035

Merged
merged 11 commits into from
Feb 22, 2024

Conversation

PK106552
Copy link
Contributor

@PK106552 PK106552 commented Feb 16, 2024

Summary

What was changed:

  1. Added visual focus dashed border.
  2. Added errorId prop in terra-date-time-picker example for invalid error message announcement.

Why it was changed:

  1. Previously visual focus has blue border which is not valid.
  2. Error message was not reading by screen reader.

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-XXXX


Thank you for contributing to Terra.
@cerner/terra

* If invalid error text is used, provide a string containing the IDs for error html element.
* ID must be htmlFor prop value with error text.
*/
ariaDescribedBy: PropTypes.string,
Copy link
Contributor

@sugan2416 sugan2416 Feb 21, 2024

Choose a reason for hiding this comment

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

Rename prop to something meaningful related to error message id. Since this prop was mainly introduced to announce error message. Add a11y label wherever this prop is defined.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated - 381aac0

@@ -861,7 +869,7 @@ const DatePickerInput = (props) => {
onBlur={onBlur}
onFocus={onButtonFocus}
refCallback={buttonRefCallback}
aria-label={`${calendarDate} ${intl.formatMessage({ id: 'Terra.datePicker.openCalendar' })}`}
Copy link
Contributor

Choose a reason for hiding this comment

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

If this is removed, then SR will not announce the date selected from calendar popup upon closure. This needs to discussed with a11y team. This date is to provide date context due to instant closing of calendar.

@PK106552
Copy link
Contributor Author

Hi rahul, Reverted selected announcement fixes and created new JIRA for that - https://jira2.cerner.com/browse/UXPLATFORM-10245

@github-actions github-actions bot temporarily deployed to preview-pr-2035 February 22, 2024 07:58 Destroyed
@rahulkumar8cs
Copy link

+1 for the a11y changes.

@sugan2416 sugan2416 merged commit 3c4a604 into main Feb 22, 2024
22 checks passed
@sugan2416 sugan2416 deleted the datepicker_fixes branch February 22, 2024 09:34
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