Skip to content

USWDS - Time picker: Add clarity to hint text#6147

Merged
annepetersen merged 3 commits into
developfrom
al-time-picker-hint-text
Nov 6, 2024
Merged

USWDS - Time picker: Add clarity to hint text#6147
annepetersen merged 3 commits into
developfrom
al-time-picker-hint-text

Conversation

@amyleadem

@amyleadem amyleadem commented Oct 23, 2024

Copy link
Copy Markdown
Contributor

Summary

Updated the time picker hint text to improve clarity. This update allows the component to meet the success criteria in WCAG 3.3.2.

Markup change

To incorporate this update, teams should replace the hint text content in the time picker from "hh:mm" to "Select a time from the dropdown. Type into the input to filter options.":

- <div class="usa-hint">hh:mm</div>
+ <div class="usa-hint">Select a time from the dropdown. Type into the input to filter options.</div>

Note that this content update is not required if your project has already added instructional hint text that meets WCAG 3.3.2 criteria.

Breaking change

This is not a breaking change.

Related issue

Closes #6061

Related pull requests

Changelog PR

Note

The related test on the accessibility test page should be marked as conditional after this change is implemented.

Preview link

Time picker component

Problem statement

The existing visible instructions for time picker aren't sufficient to prevent errors; we need to add clarity to the format and options to prevent users from typing in potentially invalid times.
See https://www.w3.org/TR/WCAG20/#minimize-error-cues for clarification on 3.3.2

Solution

This PR updates the hint text to give instructions for how to interact with the component.

image

Testing and review

  1. Confirm the updated hint meets the criteria for 3.3.2
  2. Confirm no grammatical or spelling errors
  3. Confirm the hint text is updated in all locations

- Add clarity to example hint instructions
@amyleadem

Copy link
Copy Markdown
Contributor Author

@finekatie and/or @JaymeCharles, can you review this hint text and let me know if you have any recommendations for improvement?

@amyleadem amyleadem requested review from JaymeCharles and finekatie and removed request for JaymeCharles October 23, 2024 23:58
Comment thread packages/usa-form/src/test/test-pattern/test-usa-form.twig Outdated

@finekatie finekatie left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Looks good to me. Might be worth checking for feedback

@jaclinec jaclinec left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

LGTM! Hint text seems clear.

@amyleadem amyleadem requested a review from mahoneycm October 24, 2024 19:14

@mahoneycm mahoneycm left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

lgtm!

@annepetersen annepetersen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The tiny phrasing improvement we could make in the future might be figuring out a better word than "input," which might be jargon-y for some people. Also noting "input" wasn't in the original text proposed over here.

But this is better than what we have currently, so I'm putting this one through. @finekatie , if you could put this in your backlog to discuss at some point with a low priority since we have a more immediate fix live, that would be great. Thanks!

@finekatie

Copy link
Copy Markdown

The tiny phrasing improvement we could make in the future might be figuring out a better word than "input," which might be jargon-y for some people. Also noting "input" wasn't in the original text proposed over here.

But this is better than what we have currently, so I'm putting this one through. @finekatie , if you could put this in your backlog to discuss at some point with a low priority since we have a more immediate fix live, that would be great. Thanks!

Thinking of adding a sub task to that issue. Make sense to you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

USWDS - Bug: Time picker instructions need more specificity to pass WCAG

6 participants