diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9e9b804346b62c..bf938caac0d59a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -24,6 +24,7 @@
 -   `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)).
 -   `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196))
 -   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201))
+-   `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681)
 
 ### Experimental
 
diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index 5beccbeebfb85a..0fce9bd60f73f0 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -89,7 +89,7 @@ export function getNameForPosition( elements, slugPrefix ) {
 	);
 }
 
-function ColorPickerPopover( {
+export function ColorPickerPopover( {
 	isGradient,
 	element,
 	onChange,
@@ -101,6 +101,11 @@ function ColorPickerPopover( {
 			offset={ 20 }
 			className="components-palette-edit__popover"
 			onClose={ onClose }
+			aria-label={
+				! isGradient
+					? __( 'Select a new color' )
+					: __( 'Select a new gradient' )
+			}
 		>
 			{ ! isGradient && (
 				<ColorPicker
diff --git a/packages/components/src/palette-edit/test/index.js b/packages/components/src/palette-edit/test/index.js
index f13b324efac3de..123d1d386a0d5e 100644
--- a/packages/components/src/palette-edit/test/index.js
+++ b/packages/components/src/palette-edit/test/index.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent, screen } from '@testing-library/react';
+
 /**
  * Internal dependencies
  */
-import { getNameForPosition } from '../';
+import PaletteEdit, { getNameForPosition } from '../';
 
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
@@ -61,3 +66,46 @@ describe( 'getNameForPosition', () => {
 		);
 	} );
 } );
+
+describe( 'PaletteEdit', () => {
+	const defaultProps = {
+		gradients: false,
+		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],
+		onChange: jest.fn(),
+		paletteLabel: 'Test label',
+		emptyMessage: 'Test empty message',
+		canOnlyChangeValues: true,
+		canReset: true,
+		slugPrefix: '',
+	};
+
+	it( 'opens color selector for color palettes', async () => {
+		render( <PaletteEdit { ...defaultProps } /> );
+		fireEvent.click( screen.getByLabelText( 'Color: Base' ) );
+		expect(
+			screen.getByLabelText( 'Select a new color' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'opens gradient selector for gradient palettes', () => {
+		const gradientProps = {
+			...defaultProps,
+			colors: undefined,
+			gradients: [
+				{
+					gradient:
+						'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+					name: 'Vivid cyan blue to vivid purple',
+					slug: 'vivid-cyan-blue-to-vivid-purple',
+				},
+			],
+		};
+		render( <PaletteEdit { ...gradientProps } /> );
+		fireEvent.click(
+			screen.getByLabelText( 'Gradient: Vivid cyan blue to vivid purple' )
+		);
+		expect(
+			screen.getByLabelText( 'Select a new gradient' )
+		).toBeInTheDocument();
+	} );
+} );