Make circular option picker get a group role and optional label when …

…rendered as buttons.
WordPress · Jan 14, 2025 · e1515e0 · e1515e0
1 parent b2f40e5
commit e1515e0
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 19 deletions.
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
@@ -515,6 +515,7 @@ function CoverEdit( {
 								onChange={ onSetOverlayColor }
 								clearable={ false }
 								asButtons
+								aria-label={ __( 'Background color' ) }
 							/>
 						</div>
 					</CoverPlaceholder>

diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx
@@ -132,7 +132,7 @@ function ButtonsCircularOptionPicker(
 	);
 
 	return (
-		<div { ...additionalProps } id={ baseId }>
+		<div { ...additionalProps } role="group" id={ baseId }>
 			<CircularOptionPickerContext.Provider value={ contextValue }>
 				{ options }
 				{ children }

diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -131,7 +131,7 @@ WithLoopingDisabled.parameters = {
 	docs: {
 		source: {
 			code: `<CircularOptionPicker
-  aria-label="${ WithLoopingDisabled.args[ 'aria-label' ] }"
+  'aria-label': 'Circular Option Picker',
   loop={false}
   options={<DefaultOptions />}
 />`,

diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
@@ -40,7 +40,16 @@ type CommonCircularOptionPickerProps = {
 	 * The child elements.
 	 */
 	children?: ReactNode;
-};
+} & (
+	| {
+			'aria-label': string;
+			'aria-labelledby'?: never;
+	  }
+	| {
+			'aria-label'?: never;
+			'aria-labelledby': string;
+	  }
+);
 
 type WithBaseId = {
 	baseId: string;
@@ -59,16 +68,7 @@ type FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {
 	 * @default true
 	 */
 	loop?: boolean;
-} & (
-		| {
-				'aria-label': string;
-				'aria-labelledby'?: never;
-		  }
-		| {
-				'aria-label'?: never;
-				'aria-labelledby': string;
-		  }
-	);
+};
 
 export type ListboxCircularOptionPickerProps = WithBaseId &
 	Omit< FullListboxCircularOptionPickerProps, 'asButtons' >;

diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
@@ -254,10 +254,27 @@ function UnforwardedColorPalette(
 	let metaProps:
 		| { asButtons: false; loop?: boolean; 'aria-label': string }
 		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
+		| { asButtons: true; 'aria-label': string }
+		| { asButtons: true; 'aria-labelledby': string };
 
 	if ( asButtons ) {
-		metaProps = { asButtons: true };
+		const _metaProps: { asButtons: true } = {
+			asButtons: true,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
 	} else {
 		const _metaProps: { asButtons: false; loop?: boolean } = {
 			asButtons: false,

diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -130,10 +130,27 @@ function DuotonePicker( {
 	let metaProps:
 		| { asButtons: false; loop?: boolean; 'aria-label': string }
 		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
+		| { asButtons: true; 'aria-label': string }
+		| { asButtons: true; 'aria-labelledby': string };
 
 	if ( asButtons ) {
-		metaProps = { asButtons: true };
+		const _metaProps: { asButtons: true } = {
+			asButtons: true,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
 	} else {
 		const _metaProps: { asButtons: false; loop?: boolean } = {
 			asButtons: false,

diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx
@@ -131,10 +131,27 @@ function Component( props: PickerProps< any > ) {
 	let metaProps:
 		| { asButtons: false; loop?: boolean; 'aria-label': string }
 		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
+		| { asButtons: true; 'aria-label': string }
+		| { asButtons: true; 'aria-labelledby': string };
 
 	if ( asButtons ) {
-		metaProps = { asButtons: true };
+		const _metaProps: { asButtons: true } = {
+			asButtons: true,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
 	} else {
 		const _metaProps: { asButtons: false; loop?: boolean } = {
 			asButtons: false,