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 character count component's SR experience #2550

Merged
merged 8 commits into from
Aug 10, 2023

Conversation

kleinschmidtj
Copy link
Contributor

@kleinschmidtj kleinschmidtj commented Aug 7, 2023

Summary

Character count includes a brief pause on input before announcing the status.

Related Issues or PRs

Closes #2509

Related PR in USWDS repo: uswds/uswds#4976

How To Test

  1. Go to http://localhost:9009/?path=/story/components-charactercount--text-input
  2. Open screen reader
  3. Start typing. The SR should announce number of characters left.
  4. Type over limit. The message should be bold and in red. (New invalid styling.)

The SR message for the number of characters left works in:

  • NVDA
  • JAWS
  • Narrator
  • VoiceOver

Screenshots (optional)

Screenshot 2023-08-07 at 2 39 06 PM

@github-actions
Copy link
Contributor

github-actions bot commented Aug 7, 2023

Warnings
⚠️ This PR does not include changes to storybook, even though it affects component code.

Generated by 🚫 dangerJS against 05d3514

@werdnanoslen
Copy link
Contributor

On mac/firefox, I did not get any announcement of characters left, just the total limit:
Aug-08-2023 09-15-17

@kleinschmidtj
Copy link
Contributor Author

On mac/firefox, I did not get any announcement of characters left, just the total limit: Aug-08-2023 09-15-17

Yeah, still investigating why Voiceover is not reading the updates out here. I can see it working here in the USWDS preview: https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.sites.pages.cloud.gov/preview/uswds/uswds/jm-a11y-character-count/iframe.html?args=&id=components-form-inputs-character-count--character-count&viewMode=story

@kleinschmidtj
Copy link
Contributor Author

@werdnanoslen I pushed an update that should now work with VoiceOver. Let me know if you can test it.

@werdnanoslen
Copy link
Contributor

werdnanoslen commented Aug 9, 2023

huzzah 🎉 , and i've approved happo diffs

Aug-09-2023 08-33-04

brandonlenz
brandonlenz previously approved these changes Aug 9, 2023
Copy link
Contributor

@brandonlenz brandonlenz left a comment

Choose a reason for hiding this comment

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

1 rec, 1 question. Lemme know if you need re-approval

Comment on lines +88 to +90
if (srMessageRef.current) srMessageRef.current.textContent = message
}, 1000)
return () => clearTimeout(timer)
Copy link
Contributor

Choose a reason for hiding this comment

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

question: Does a useState/setState not work for Voiceover?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It does not! Very weird that it didn't. It did work with every other SR I tested.

@kleinschmidtj
Copy link
Contributor Author

@werdnanoslen Ah sorry I need another happo approval!

@kleinschmidtj kleinschmidtj enabled auto-merge (squash) August 10, 2023 13:52
@kleinschmidtj kleinschmidtj merged commit c612a1b into main Aug 10, 2023
5 checks passed
@kleinschmidtj kleinschmidtj deleted the jfk-character-count-sr-2509 branch August 10, 2023 14:02
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.

[fix] Improve screen reader experience of character count component
3 participants