Add type="button" to vanilla <button> elements (#55125)

* Adding `type="button` to buttons as needed * Updating test snapshots * Updating `CHANGELOG.md`
WordPress · Oct 11, 2023 · e125803 · e125803
1 parent a7d0c6f
commit e125803
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -175,6 +175,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                     aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
                     class="components-color-palette__custom-color-button"
                     style="background: rgb(255, 0, 0);"
+                    type="button"
                   />
                   <div
                     class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"

diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
@@ -64,6 +64,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 			{ hasChildren && context.openSubmenusOnClick ? (
 				<>
 					<button
+						type="button"
 						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
 						aria-expanded="false"
 					>
@@ -90,6 +91,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 							<button
 								className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
 								aria-expanded="false"
+								type="button"
 							>
 								<ItemSubmenuIcon />
 							</button>

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `Notice`: Remove margins from `Notice` component ([#54800](https://github.com/WordPress/gutenberg/pull/54800)).
+-   `ColorPalette`/`ToggleGroupControl/ToggleGroupControlOptionBase`: add `type="button"` attribute to native `<button>`s ([#55125](https://github.com/WordPress/gutenberg/pull/55125)).
 
 ### Bug Fix
 
@@ -52,7 +53,7 @@
 
 ### Experimental
 
-- Introduce `Tabs`, an experimental v2 of `TabPanel`: ([#53960](https://github.com/WordPress/gutenberg/pull/53960)).
+-   Introduce `Tabs`, an experimental v2 of `TabPanel`: ([#53960](https://github.com/WordPress/gutenberg/pull/53960)).
 
 ## 25.8.0 (2023-09-20)
 

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
@@ -299,6 +299,7 @@ function UnforwardedColorPalette(
 								style={ {
 									background: value,
 								} }
+								type="button"
 							/>
 							<VStack
 								className="components-color-palette__custom-color-text-wrapper"

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -255,6 +255,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-8-20"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -292,6 +293,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-8-21"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -500,6 +502,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-7-18"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -521,6 +524,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-7-19"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -796,6 +800,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-1-2"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -833,6 +838,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-1-3"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -1035,6 +1041,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-0-0"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"
@@ -1056,6 +1063,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-0-1"
             role="radio"
+            type="button"
           >
             <div
               class="emotion-13 emotion-14"

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -143,6 +143,7 @@ function ToggleGroupControlOptionBase(
 					<Ariakit.Radio
 						render={
 							<button
+								type="button"
 								{ ...commonProps }
 								onFocus={ ( event ) => {
 									onFocusProp?.( event );

diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/edit-site/src/components/block-editor/resize-handle.js
@@ -35,6 +35,7 @@ export default function ResizeHandle( {
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }
+				type="button"
 			/>
 			<VisuallyHidden
 				id={ `resizable-editor__resize-help-${ direction }` }

diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -174,6 +174,7 @@ function GridItem( { categoryId, item, ...props } ) {
 				// Even though still incomplete, passing ids helps performance.
 				// @see https://reakit.io/docs/composite/#performance.
 				id={ `edit-site-patterns-${ item.name }` }
+				type="button"
 				{ ...props }
 				onClick={
 					item.type !== PATTERN_TYPES.theme ? onClick : undefined