react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

fix(accessibility): Field announce error message for focused field

Open majornista opened this issue 6 months ago • 18 comments

Closes #8328

✅ Pull Request Checklist:

  • [x] Included link to corresponding React Spectrum GitHub Issue #8328.
  • [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • [x] Filled out test instructions.
  • [ ] Updated documentation (if it already exists for this component).
  • [x] Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Open the Spectrum 2 Preview > Form > Example storybook example.
  2. With a screen reader running, like VoiceOver on macOS or NVDA on Windows, navigate to move focus to the Email field, which is the third field in the form.
  3. Enter an invalid email value, like "admin", and press Enter to trigger validation by submitting the form.
  4. The screen reader should announce the error message that renders politely.
  5. Type some more to modify the value to another invalid value like, "admin@", then Tab or Shift+Tab to blur the input, which again trigger validation.
  6. After the screen reader announces the input that receives keyboard focus, it should announce "Please review Email field: Please enter a part following '@'. 'admin@' is incomplete," with the name and error message for the Email field that was blurred.

🧢 Your Project:

Accessibility/SUSI/Adobe

majornista avatar May 30 '25 21:05 majornista