react icon indicating copy to clipboard operation
react copied to clipboard

Published 20 hours ago • verified publisher icon primer

Add improved live-region to `FormControl` validation

Open TylerJDev opened this issue 1 year ago • 5 comments

https://github.com/github/accessibility-audits/issues/6883, https://github.com/github/accessibility-audits/issues/6881

Currently, our validation message is rendered conditionally based on if slots.validation is present at the time. This may mean the live region is not added on page load, potentially preventing some screen readers from announcing the content within that region.

This PR aims to introduce our new <Status> element, and replace the live region that lives inside of InputValidation. In the future, we may want to rely solely on the aria-describedby attached to the input, but for now, this ensures that the live region works as expected.

Changelog

New

Changed

Removed

Rollout strategy

  • [x] Patch release
  • [ ] Minor release
  • [ ] Major release; if selected, include a written rollout or migration plan
  • [ ] None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

  • [ ] Added/updated tests
  • [ ] Added/updated documentation
  • [x] Added/updated previews (Storybook)
  • [ ] Changes are SSR compatible
  • [x] Tested in Chrome
  • [ ] Tested in Firefox
  • [ ] Tested in Safari
  • [ ] Tested in Edge
  • [ ] (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

TylerJDev avatar Mar 27 '24 23:03 TylerJDev

🦋 Changeset detected

Latest commit: 443b7618f66588f26e34cd5d4fe538b5f255915e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Mar 27 '24 23:03 changeset-bot[bot]

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 90.95 KB (-0.03% 🔽)
packages/react/dist/browser.umd.js 91.35 KB (+0.11% 🔺)

github-actions[bot] avatar Mar 27 '24 23:03 github-actions[bot]

@TylerJDev Hiya! Do we have a status on this PR?

lindseywild avatar May 16 '24 14:05 lindseywild

@lindseywild, this PR is waiting on https://github.com/primer/react/pull/4590 to be merged as it fixes a bug that's breaking CI in this PR. Once it's merged I'll be able to set this one to ready for review!

TylerJDev avatar May 16 '24 14:05 TylerJDev

Thank you!!

lindseywild avatar May 16 '24 15:05 lindseywild

Going to close this PR for now, but may reopen it in the future if we decide we want to add live region support to FormControl validation!

TylerJDev avatar Jul 24 '24 22:07 TylerJDev