Abstract logic to compute the common props.

WordPress · Feb 10, 2025 · 551b6cd · 551b6cd
1 parent e68f676
commit 551b6cd
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 145 deletions.
diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
@@ -93,6 +93,19 @@ Prevents keyboard interaction from wrapping around. Only used when `asButtons` i
 - Required: No
 - Default: `true`
 
+### `aria-labelledby`: `string`
+
+The ID reference list of one or more elements that label the wrapper element.
+
+- Required: No
+
+### `aria-label`: `string`
+
+The label for the wrapper element. Not used if an 'aria-labelledby' is provided.
+
+- Required: No
+- Default: `Custom color picker`
+
 ## Subcomponents
 
 ### `CircularOptionPicker.ButtonAction`

diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
@@ -9,5 +9,6 @@ export {
 	ButtonAction,
 	DropdownLinkAction,
 } from './circular-option-picker-actions';
+export { useComputeCircularOptionPickerCommonProps } from './utils';
 
 export default CircularOptionPicker;
diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx
@@ -57,6 +57,7 @@ describe( 'CircularOptionPicker', () => {
 
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'group' ) ).toBeInTheDocument();
 			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
 		} );
 	} );

diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
@@ -40,16 +40,17 @@ type CommonCircularOptionPickerProps = {
 	 * The child elements.
 	 */
 	children?: ReactNode;
-} & (
-	| {
-			'aria-label': string;
-			'aria-labelledby'?: never;
-	  }
-	| {
-			'aria-label'?: never;
-			'aria-labelledby': string;
-	  }
-);
+	/**
+	 * The ID reference list of one or more elements that label the wrapper
+	 * element.
+	 */
+	'aria-labelledby'?: string;
+	/**
+	 * The label for the wrapper element. Defaults to 'Custom color picker'. Not
+	 * used if an 'aria-labelledby' is provided.
+	 */
+	'aria-label'?: string;
+};
 
 type WithBaseId = {
 	baseId: string;

diff --git a/packages/components/src/circular-option-picker/utils.tsx b/packages/components/src/circular-option-picker/utils.tsx
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Computes the common props for the CircularOptionPicker.
+ */
+export function useComputeCircularOptionPickerCommonProps(
+	asButtons?: boolean,
+	loop?: boolean,
+	ariaLabel?: string,
+	ariaLabelledby?: string
+) {
+	const metaProps = asButtons
+		? { asButtons: true }
+		: { asButtons: false, loop };
+
+	const labelProps = {
+		'aria-labelledby': ariaLabelledby,
+		'aria-label': ariaLabelledby
+			? undefined
+			: ariaLabel || __( 'Custom color picker' ),
+	};
+
+	return { metaProps, labelProps };
+}
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
@@ -19,7 +19,9 @@ import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
  */
 import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	useComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import { VStack } from '../v-stack';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
@@ -251,50 +253,12 @@ function UnforwardedColorPalette(
 		</CircularOptionPicker.ButtonAction>
 	);
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true; 'aria-label': string }
-		| { asButtons: true; 'aria-labelledby': string };
-
-	if ( asButtons ) {
-		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,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = useComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	return (
 		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
@@ -352,6 +316,7 @@ function UnforwardedColorPalette(
 			{ ( colors.length > 0 || actions ) && (
 				<CircularOptionPicker
 					{ ...metaProps }
+					{ ...labelProps }
 					actions={ actions }
 					options={
 						hasMultipleColorOrigins ? (

diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -13,7 +13,9 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ColorListPicker from './color-list-picker';
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	useComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
@@ -127,50 +129,12 @@ function DuotonePicker( {
 		);
 	} );
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true; 'aria-label': string }
-		| { asButtons: true; 'aria-labelledby': string };
-
-	if ( asButtons ) {
-		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,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = useComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	const options = unsetable
 		? [ unsetOption, ...duotoneOptions ]
@@ -180,6 +144,7 @@ function DuotonePicker( {
 		<CircularOptionPicker
 			{ ...otherProps }
 			{ ...metaProps }
+			{ ...labelProps }
 			options={ options }
 			actions={
 				!! clearable && (

diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx
@@ -8,7 +8,9 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	useComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
@@ -128,54 +130,17 @@ function Component( props: PickerProps< any > ) {
 		<SingleOrigin { ...additionalProps } />
 	);
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true; 'aria-label': string }
-		| { asButtons: true; 'aria-labelledby': string };
-
-	if ( asButtons ) {
-		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,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = useComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	return (
 		<CircularOptionPicker
 			{ ...metaProps }
+			{ ...labelProps }
 			actions={ actions }
 			options={ options }
 		/>