Add type="button" to vanilla <button> elements
#55125
Merged
Conversation
This file contains 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
andrewhayward
added
[Package] Components
|
Size Change: +23 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
chad1008
reviewed
Oct 6, 2023
aristath
approved these changes
Oct 9, 2023
chad1008
approved these changes
Oct 10, 2023
|
Flaky tests detected in 2d5cdc7. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6471116113
|
|
There is a test failure in However, this is also failing on trunk, so I'm confident it isn't caused by this PR. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
This PR adds a
typeattribute to various native<button>s. Test snapshots are updated where appropriate.Resolves #46814.
Why?
In Automattic/isolated-block-editor#197 it is flagged that the button element rendered by the Button component doesn't always have
type="button", which leads to forms being submitted involuntarily.#46814 goes into detail around this, and identifies several places in Gutenberg that need updating to reduce the risk of this happening.
How?
This PR takes the identified list of native
<button>s across@wordpress/components,@wordpress/block-libraryand@wordpress/edit-site, and ensures they all have a defaulttype="button", allowing for overrides where appropriate.Relevant code
gutenberg/packages/block-library/src/page-list-item/edit.js
Lines 66 to 71 in f04f5c5
gutenberg/packages/block-library/src/page-list-item/edit.js
Lines 90 to 95 in f04f5c5
gutenberg/packages/components/src/color-palette/index.tsx
Lines 292 to 302 in f04f5c5
gutenberg/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
Lines 145 to 152 in f04f5c5
gutenberg/packages/edit-site/src/components/block-editor/resize-handle.js
Lines 33 to 38 in f04f5c5
gutenberg/packages/edit-site/src/components/page-patterns/grid-item.js
Lines 172 to 204 in f04f5c5
Testing Instructions
All unit/e2e tests should pass. Individual component testing instructions below.
block-library/src/page-list-item/edit.jsThe two buttons can be can be validated by ensuring you have a nested page, then inserting a navigation block into an edit view. They will appear as dropdown toggles.
The second should appear by default, but the first requires the
openSubmenusOnClickattribute to be set totrueon the component. This can be achieved by opening the editor in code view, finding the relevant navigation block, and adjusting the JSON meta block...<!-- wp:navigation {"ref":8,"openSubmenusOnClick":true} /-->(Note, the buttons are neither actionable nor labelled, but fixing that is outside the scope of this PR.)
components/src/color-palette/index.tsxOpen StoryBook and navigate to the
ColorPalettecomponent. The button in question operates the custom colour picker, which should not change.components/src/toggle-group-control/toggle-group-control-option-base/component.tsxThis component is rendered by every option within the
ToggleGroupControlcontrol, which can be tested in Storybook.edit-site/src/components/block-editor/resize-handle.jsThe resize handle can be tested, amongst other ways, by opening the site editor, then heading to
Navigation > Navigation > Editin the Design sidebar. Once there, the drag handle should allow you to resize the navigation portal, with both mouse and keyboard.edit-site/src/components/page-patterns/grid-item.jsGrid items show up in the editor Design sidebar under
Patterns. Note that locked patterns are not actionable, and should have anaria-disabledattribute set tofalse.