Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix] Improve screen reader experience of character count component #2509

Closed
kleinschmidtj opened this issue Jul 21, 2023 · 0 comments · Fixed by #2550
Closed

[fix] Improve screen reader experience of character count component #2509

kleinschmidtj opened this issue Jul 21, 2023 · 0 comments · Fixed by #2550
Assignees
Labels
type: bug Something isn't working like it's supposed to uswds update Update to a new USWDS version

Comments

@kleinschmidtj
Copy link
Contributor

ReactUSWDS Version & USWDS Version:

ReactUSWDS 5.1.1

Describe the bug

The character count component contains a hint that announces how many characters are left. For screen readers, this announcement (since it has aria-live) can be disruptive as it announces immediately and doesn't wait for SR users to stop typing.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://trussworks.github.io/react-uswds/?path=/story/components-charactercount--text-input
  2. Start NVDA in Firefox. (Or use another screen reader.)
  3. Start typing "test" in the input field
  4. See that the screenreader needs to announce each character limit update. The output below:

Example output text from NVDA:
t
24 characters left
24 characters left This is an input with a character counter.
e
23 characters left
23 characters left This is an input with a character counter.
s
22 characters left
22 characters left This is an input with a character counter.
t
21 characters left
21 characters left This is an input with a character counter.

Expected behavior

Using the approach outlined in uswds/uswds#4976, we can use a 1 second delay so that the screen reader reads the update after the user is done typing.

Screenshots

Additional context

uswds/uswds#4976

Device and Browser Information (please complete the following information if describing a UI bug):

@kleinschmidtj kleinschmidtj added type: bug Something isn't working like it's supposed to uswds update Update to a new USWDS version labels Jul 21, 2023
@kleinschmidtj kleinschmidtj self-assigned this Aug 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working like it's supposed to uswds update Update to a new USWDS version
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant