Change ToggleSwitch ViewComponent type to button#3938
Conversation
🦋 Changeset detectedLatest commit: dad40e8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
Pull request overview
This PR updates Primer::Alpha::ToggleSwitch so its internal track <button> explicitly uses type="button", preventing accidental form submissions (and related browser validation UI) when the component is used inside a <form>.
Changes:
- Add
type: :buttonto the ToggleSwitch track button render. - Add test coverage asserting the track button’s
typeisbutton(and notsubmit).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| app/components/primer/alpha/toggle_switch.html.erb | Sets the internal track button to type="button" to avoid default submit behavior in forms. |
| test/components/alpha/toggle_switch_test.rb | Adds assertions around the track button type attribute. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Change the version of '@primer/view-components' from patch to minor.
|
Jon's out of office for the next week, tagging the review team to see about getting a faster ✅ |
Closes: #3939
What are you trying to accomplish?
Ensure
Primer::Alpha::ToggleSwitchdoes not accidentally submit its parent<form>when clicked. The ToggleSwitch track is rendered as a<button>and, without an explicittype, defaults totype="submit"inside forms. This triggers Chrome’s native required-field validation tooltips on unrelated empty required fields. This change setstype="button"on the ToggleSwitch track button.Screenshots
Before: Clicking ToggleSwitch inside a form shows native validation tooltips on other empty required fields (Chrome).
Screen.Recording.2026-02-12.at.12.27.06.PM.mov
After: Clicking ToggleSwitch no longer triggers native validation tooltips; only the toggle state changes.
Screen.Recording.2026-02-13.at.10.22.29.AM.mov
Integration
No production code updates required beyond consuming the updated component. This is a component-level change.
List the issues that this change affects.
Closes https://github.com/github/authz-exp/issues/1323
Risk Assessment
type="button") on a single internal button. Easy to observe and roll back. Adds test coverage.What approach did you choose and why?
Set
type="button"on the internal.ToggleSwitch-trackbutton unconditionally. ToggleSwitch is an interactive control (and optionally performs its own POST viasrc), so it should never behave like a form submit button by default. Making this explicit prevents accidental form submission and browser validation UI across all usages inside forms.Anything you want to highlight for special attention from reviewers?
type="button"attribute is present on the track button.Accessibility
Merge checklist