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 autofocus behavior for radio button and check box groups #2629

Merged
merged 2 commits into from
Feb 26, 2024

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Feb 23, 2024

What are you trying to accomplish?

This PR fixes autofocus behavior for radio button and check box groups. According to Primer's form guidelines, "the first invalid input should be focused and scrolled into the viewport". There are two problems with the current implementation:

  1. The validation message is attached to a wrapping <div> element and should instead be attached to the wrapping <fieldset> element. This is causing screen readers to skip announcing the validation message.
  2. The autofocus attribute is not present on any element.

This PR fixes both issues. See this Slack discussion (internal only) for additional details.

Integration

No changes necessary in production.

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

See the linked Slack discussion above.

Accessibility

  • No new axe scan violation - This change does not introduce any new axe scan violations.

This PR does not fix an axe scan violation, but it does address two accessibility audit issues, see (internal only):

  1. https://github.com/github/accessibility-audits/issues/7568
  2. https://github.com/github/accessibility-audits/issues/7569

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Copy link

changeset-bot bot commented Feb 23, 2024

🦋 Changeset detected

Latest commit: f53fd5d

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

This PR includes changesets to release 1 package
Name Type
@primer/view-components 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

Copy link

@acbreton acbreton left a comment

Choose a reason for hiding this comment

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

Thanks for the help on this!

@jonrohan jonrohan merged commit 862f05a into main Feb 26, 2024
35 checks passed
@jonrohan jonrohan deleted the radio_check_group_autofocus branch February 26, 2024 23:12
@primer primer bot mentioned this pull request Feb 26, 2024
@primer primer bot mentioned this pull request Mar 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants