fix(a11y): add type="button" to native buttons to prevent host form submission#10863
Open
yogeshwaran-c wants to merge 1 commit into
Open
fix(a11y): add type="button" to native buttons to prevent host form submission#10863yogeshwaran-c wants to merge 1 commit into
yogeshwaran-c wants to merge 1 commit into
Conversation
…ubmission Closes swagger-api#10234 When Swagger UI is mounted inside a host application's <form> element, every native <button> without an explicit `type` attribute defaults to `type="submit"`. Clicking the operation expand arrow, the Authorize button, Execute, Try it out, the Schemas/Models toggle, etc. therefore navigates the host page or fires the host form's onSubmit handler. Adds `type="button"` to every interactive native <button> rendered by Swagger UI that previously omitted the attribute. Includes: - Jest unit tests asserting wrapper.find("button").prop("type") === "button" on AuthorizeBtn, AuthorizeOperationBtn, Clear, Execute, OperationTag, TryItOutButton (Try it out / Cancel / Reset) and ModelCollapse. - Cypress e2e regression test (test/e2e-cypress/e2e/bugs/10234.cy.js) that mounts Swagger UI inside a host <form action="/should-not-submit"> and asserts that clicking the tag expand button, opblock summary, opblock arrow, "Try it out", and the Schemas/Models toggle all leave the form un-submitted (the onsubmit sentinel stays false and the URL pathname does not change).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds
type="button"to every interactive native<button>rendered by Swagger UI that previously omitted the attribute. Without it, every such button defaults totype="submit"and triggers form submission whenever Swagger UI is rendered inside a host application's<form>.Affected components:
AuthorizeBtn,AuthorizeOperationBtn(auth)Clear,Execute,TryItOutButton(Try it out / Cancel / Reset)OperationSummary(opblock summary control + opblock arrow)OperationTag(expand-operation)ModelCollapse,ModelExampletablinks,Modelsand OAS 3.1Models(Schemas/Models toggle)RequestSnippetssnippet expand button,HighlightCodeDownload buttonDarkModeToggleButtons already covered by other open a11y/security PRs are intentionally left untouched to avoid merge conflicts.
Motivation and Context
Fixes #10234.
Issue #10234 reports that Swagger UI React, when wrapped inside a host React Hook Form /
<form>, submits the form whenever the user clicks the operation expand arrow. The reproduction confirms that the rendered DOM is<button aria-label="post /pet/{petId}/uploadImage" class="opblock-control-arrow" aria-expanded="false" tabindex="-1"></button>— notypeattribute, so the browser defaults it tosubmit. The same defect applies to every other interactive button Swagger UI renders.This is a 1.3.1 / 4.1.2 a11y concern as well: assistive tech and form integrations both rely on the
typeattribute being explicit for non-submitting controls.How Has This Been Tested?
test/unit/components/a11y/button-type.jsx) — 8 cases assertingwrapper.find("button").prop("type") === "button"onAuthorizeBtn,AuthorizeOperationBtn,Clear,Execute,OperationTag,TryItOutButton(Try it out / Cancel + Reset) andModelCollapse. Verified that the suite fails on master and passes after the fix.test/e2e-cypress/e2e/bugs/10234.cy.js, with fixture pagetest/e2e-cypress/static/pages/10234/index.html) — mounts Swagger UI inside a host<form action="/should-not-submit" onsubmit="...">. Five scenarios exercise the tag expand button, opblock summary, opblock arrow, "Try it out", and the Schemas/Models toggle, asserting after each click that the host form'sonsubmitsentinel staysfalseand the URL pathname does not change. All five fail on master and pass after the fix (verified locally withnpx cypress run --spec test/e2e-cypress/e2e/bugs/10234.cy.js).npm run test:unit) — no new failures introduced; the two pre-existing "Test suite must contain at least one test" failures onjest-shim.js/setup.jsare unrelated and present on master.Screenshots (if appropriate):
N/A — no visual changes.
Checklist
My PR contains...
My changes...
Documentation