From 95c1e9a9f3e4e2fc4279676e6dd15b95c517b451 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 13 Jan 2025 15:41:21 +0100 Subject: [PATCH 01/11] Render the color options as buttons. --- packages/block-library/src/cover/edit/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 1eafe99e283eb..6d9c8a790b20c 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -514,6 +514,7 @@ function CoverEdit( { value={ overlayColor.color } onChange={ onSetOverlayColor } clearable={ false } + asButtons /> From fc451088f7d1d9bfbb65e12724f264a6d5b77640 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 14 Jan 2025 15:20:23 +0100 Subject: [PATCH 02/11] Make circular option picker get a group role and optional label when rendered as buttons. --- .../block-library/src/cover/edit/index.js | 1 + .../circular-option-picker.tsx | 2 +- .../stories/index.story.tsx | 2 +- .../src/circular-option-picker/types.ts | 22 +++++++++---------- .../components/src/color-palette/index.tsx | 21 ++++++++++++++++-- .../src/duotone-picker/duotone-picker.tsx | 21 ++++++++++++++++-- .../components/src/gradient-picker/index.tsx | 21 ++++++++++++++++-- 7 files changed, 71 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index 6d9c8a790b20c..b9b7f5d567319 100644 --- 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' ) } /> diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx index 8b6be8cd2215f..c4309ecf4dda3 100644 --- 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 ( -
+
{ 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 index 9d45c9bb92f7d..6b564929fd8eb 100644 --- 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: `} />`, diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts index 411782aed575b..6576009222099 100644 --- 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 index de4e4f4206fe3..68c4d339120a3 100644 --- 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 index 8764b401c3829..ee8319b16183f 100644 --- 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 index 28491d8a56010..544faee848173 100644 --- 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, From 373b0d81151738b9c244740c511b47f6fbd70e96 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 14 Jan 2025 16:18:12 +0100 Subject: [PATCH 03/11] Adjust tests. --- packages/block-library/src/cover/test/edit.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js index 0a18d2cf3f9f8..16695f53f6746 100644 --- a/packages/block-library/src/cover/test/edit.js +++ b/packages/block-library/src/cover/test/edit.js @@ -47,7 +47,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) { async function createAndSelectBlock() { await userEvent.click( - screen.getByRole( 'option', { + screen.getByRole( 'button', { name: 'Black', } ) ); @@ -72,7 +72,7 @@ describe( 'Cover block', () => { test( 'can set overlay color using color picker on block placeholder', async () => { const { container } = await setup(); - const colorPicker = screen.getByRole( 'option', { + const colorPicker = screen.getByRole( 'button', { name: 'Black', } ); await userEvent.click( colorPicker ); @@ -96,7 +96,7 @@ describe( 'Cover block', () => { await setup(); await userEvent.click( - screen.getByRole( 'option', { + screen.getByRole( 'button', { name: 'Black', } ) ); @@ -389,7 +389,7 @@ describe( 'Cover block', () => { describe( 'isDark settings', () => { test( 'should toggle is-light class if background changed from light to dark', async () => { await setup(); - const colorPicker = screen.getByRole( 'option', { + const colorPicker = screen.getByRole( 'button', { name: 'White', } ); await userEvent.click( colorPicker ); @@ -413,7 +413,7 @@ describe( 'Cover block', () => { } ); test( 'should remove is-light class if overlay color is removed', async () => { await setup(); - const colorPicker = screen.getByRole( 'option', { + const colorPicker = screen.getByRole( 'button', { name: 'White', } ); await userEvent.click( colorPicker ); @@ -426,7 +426,7 @@ describe( 'Cover block', () => { } ) ); await userEvent.click( screen.getByText( 'Overlay' ) ); - // The default color is black, so clicking the black color option will remove the background color, + // The default color is black, so clicking the black color button will remove the background color, // which should remove the isDark setting and assign the is-light class. const popupColorPicker = screen.getByRole( 'option', { name: 'White', From 187e8673f1fc1ea9e193cd71b7005bdb7c32131c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 15 Jan 2025 12:32:26 +0100 Subject: [PATCH 04/11] Adjust more tests. --- test/e2e/specs/editor/blocks/cover.spec.js | 10 +++++----- test/e2e/specs/editor/various/list-view.spec.js | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index 87c244a7306dc..bee2548c2305d 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -33,7 +33,7 @@ test.describe( 'Cover', () => { } ); // Locate the Black color swatch. - const blackColorSwatch = coverBlock.getByRole( 'option', { + const blackColorSwatch = coverBlock.getByRole( 'button', { name: 'Black', } ); await expect( blackColorSwatch ).toBeVisible(); @@ -105,7 +105,7 @@ test.describe( 'Cover', () => { // Choose a color swatch to transform the placeholder block into // a functioning block. await coverBlock - .getByRole( 'option', { + .getByRole( 'button', { name: 'Black', } ) .click(); @@ -128,7 +128,7 @@ test.describe( 'Cover', () => { name: 'Block: Cover', } ); await coverBlock - .getByRole( 'option', { + .getByRole( 'button', { name: 'Black', } ) .click(); @@ -240,7 +240,7 @@ test.describe( 'Cover', () => { // Choose a color swatch to transform the placeholder block into // a functioning block. await coverBlock - .getByRole( 'option', { + .getByRole( 'button', { name: 'Black', } ) .click(); @@ -266,7 +266,7 @@ test.describe( 'Cover', () => { // Choose a color swatch to transform the placeholder block into // a functioning block. await secondCoverBlock - .getByRole( 'option', { + .getByRole( 'button', { name: 'Black', } ) .click(); diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js index 988683c8d11aa..6d92877fd9006 100644 --- a/test/e2e/specs/editor/various/list-view.spec.js +++ b/test/e2e/specs/editor/various/list-view.spec.js @@ -162,10 +162,10 @@ test.describe( 'List View', () => { // make the inner blocks appear. await editor.canvas .getByRole( 'document', { name: 'Block: Cover' } ) - .getByRole( 'listbox', { - name: 'Custom color picker.', + .getByRole( 'group', { + name: 'Background color', } ) - .getByRole( 'option' ) + .getByRole( 'button' ) .first() .click(); From a26c12560d7f06f1b8aeae41c98f032bd60bd689 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 7 Feb 2025 10:07:15 +0100 Subject: [PATCH 05/11] Abstract logic to compute the common props. --- .../src/circular-option-picker/README.md | 13 +++++ .../src/circular-option-picker/index.tsx | 1 + .../src/circular-option-picker/test/index.tsx | 1 + .../src/circular-option-picker/types.ts | 21 +++---- .../src/circular-option-picker/utils.tsx | 27 +++++++++ .../components/src/color-palette/index.tsx | 55 ++++--------------- .../src/duotone-picker/duotone-picker.tsx | 55 ++++--------------- .../components/src/gradient-picker/index.tsx | 55 ++++--------------- 8 files changed, 83 insertions(+), 145 deletions(-) create mode 100644 packages/components/src/circular-option-picker/utils.tsx diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md index b6db6f06daf45..8a4d5ac3cf5ca 100644 --- 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 index ef975c21ee654..0eca8b025d92c 100644 --- 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 index a6e9f2c45a05c..7d58ed3920f9b 100644 --- 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 index 6576009222099..54fae3ab2e798 100644 --- 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 new file mode 100644 index 0000000000000..2496ee6478ef0 --- /dev/null +++ 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 index 68c4d339120a3..39a143c7c8bf0 100644 --- 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( ); - 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 ( @@ -352,6 +316,7 @@ function UnforwardedColorPalette( { ( colors.length > 0 || actions ) && ( ) { ); - 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 ( From fcf3311aa73d7650a06d261f608cb32cdda05990 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 7 Feb 2025 10:36:42 +0100 Subject: [PATCH 06/11] Update snapshot. --- .../components/color-palette/test/__snapshots__/control.js.snap | 2 +- 1 file changed, 1 insertion(+), 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 index 3d082a14a92bf..eb665ced62079 100644 --- 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 @@ -203,7 +203,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` class="components-circular-option-picker" >
From cbf0929d4896f3d020feedc7a9ac4399807ef15b Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 7 Feb 2025 10:37:25 +0100 Subject: [PATCH 07/11] Fix OptionGroup ARIA role. --- .../circular-option-picker-option-group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx index a4a8da1b62b58..2911140c60a19 100644 --- a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx +++ b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx @@ -15,7 +15,7 @@ export function OptionGroup( { }: OptionGroupProps ) { const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps - ? 'group' + ? 'listbox' : undefined; return ( From 7599ff30fb7c1e05481ce4a67d6ed979618a9b5b Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 7 Feb 2025 11:55:21 +0100 Subject: [PATCH 08/11] Rename. --- packages/components/src/circular-option-picker/index.tsx | 2 +- packages/components/src/circular-option-picker/utils.tsx | 2 +- packages/components/src/color-palette/index.tsx | 4 ++-- packages/components/src/duotone-picker/duotone-picker.tsx | 4 ++-- packages/components/src/gradient-picker/index.tsx | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx index 0eca8b025d92c..ef379994b476f 100644 --- a/packages/components/src/circular-option-picker/index.tsx +++ b/packages/components/src/circular-option-picker/index.tsx @@ -9,6 +9,6 @@ export { ButtonAction, DropdownLinkAction, } from './circular-option-picker-actions'; -export { useComputeCircularOptionPickerCommonProps } from './utils'; +export { getComputeCircularOptionPickerCommonProps } from './utils'; export default CircularOptionPicker; diff --git a/packages/components/src/circular-option-picker/utils.tsx b/packages/components/src/circular-option-picker/utils.tsx index 2496ee6478ef0..fcb3b2bcac369 100644 --- a/packages/components/src/circular-option-picker/utils.tsx +++ b/packages/components/src/circular-option-picker/utils.tsx @@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n'; /** * Computes the common props for the CircularOptionPicker. */ -export function useComputeCircularOptionPickerCommonProps( +export function getComputeCircularOptionPickerCommonProps( asButtons?: boolean, loop?: boolean, ariaLabel?: string, diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index 39a143c7c8bf0..d598c6e78c581 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -20,7 +20,7 @@ import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element'; import Dropdown from '../dropdown'; import { ColorPicker } from '../color-picker'; import CircularOptionPicker, { - useComputeCircularOptionPickerCommonProps, + getComputeCircularOptionPickerCommonProps, } from '../circular-option-picker'; import { VStack } from '../v-stack'; import { Truncate } from '../truncate'; @@ -253,7 +253,7 @@ function UnforwardedColorPalette( ); - const { metaProps, labelProps } = useComputeCircularOptionPickerCommonProps( + const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps( asButtons, loop, ariaLabel, diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx index cf50fe85c356b..a21d12b73a65c 100644 --- a/packages/components/src/duotone-picker/duotone-picker.tsx +++ b/packages/components/src/duotone-picker/duotone-picker.tsx @@ -14,7 +14,7 @@ import { __, sprintf } from '@wordpress/i18n'; */ import ColorListPicker from './color-list-picker'; import CircularOptionPicker, { - useComputeCircularOptionPickerCommonProps, + getComputeCircularOptionPickerCommonProps, } from '../circular-option-picker'; import { VStack } from '../v-stack'; @@ -129,7 +129,7 @@ function DuotonePicker( { ); } ); - const { metaProps, labelProps } = useComputeCircularOptionPickerCommonProps( + const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps( asButtons, loop, ariaLabel, diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx index 1321fce4b6fa0..63867f5e970a4 100644 --- a/packages/components/src/gradient-picker/index.tsx +++ b/packages/components/src/gradient-picker/index.tsx @@ -9,7 +9,7 @@ import { useCallback, useMemo } from '@wordpress/element'; * Internal dependencies */ import CircularOptionPicker, { - useComputeCircularOptionPickerCommonProps, + getComputeCircularOptionPickerCommonProps, } from '../circular-option-picker'; import CustomGradientPicker from '../custom-gradient-picker'; import { VStack } from '../v-stack'; @@ -130,7 +130,7 @@ function Component( props: PickerProps< any > ) { ); - const { metaProps, labelProps } = useComputeCircularOptionPickerCommonProps( + const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps( asButtons, loop, ariaLabel, From abfed4ec0a86210cf3d8772083301223403636a6 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 7 Feb 2025 12:04:53 +0100 Subject: [PATCH 09/11] Adjust tests. --- packages/components/src/border-box-control/test/index.tsx | 2 +- packages/components/src/border-control/test/index.js | 2 +- packages/components/src/color-palette/index.tsx | 2 +- packages/components/src/color-palette/test/index.tsx | 2 +- test/e2e/specs/editor/blocks/buttons.spec.js | 4 ++-- test/e2e/specs/editor/blocks/heading.spec.js | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx index fb536656453f4..74501f7fccc7a 100644 --- a/packages/components/src/border-box-control/test/index.tsx +++ b/packages/components/src/border-box-control/test/index.tsx @@ -202,7 +202,7 @@ describe( 'BorderBoxControl', () => { await waitFor( () => expect( screen.getByRole( 'button', { - name: 'Custom color picker.', + name: 'Custom color picker', } ) ).toBeVisible() ); diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index ff9007be28f1a..c3e3987ed1351 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -138,7 +138,7 @@ describe( 'BorderControl', () => { const customColorPicker = getButton( /Custom color picker/ ); const circularOptionPicker = screen.getByRole( 'listbox', { - name: 'Custom color picker.', + name: 'Custom color picker', } ); const colorSwatchButtons = within( circularOptionPicker ).getAllByRole( 'option' ); diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index d598c6e78c581..eb981e8b9acc7 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -235,7 +235,7 @@ function UnforwardedColorPalette( buttonLabelName, displayValue ) - : __( 'Custom color picker.' ); + : __( 'Custom color picker' ); const paletteCommonProps = { clearColor, diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx index dcdd16e53ee83..5401b9d7a1343 100644 --- a/packages/components/src/color-palette/test/index.tsx +++ b/packages/components/src/color-palette/test/index.tsx @@ -258,7 +258,7 @@ describe( 'ColorPalette', () => { expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument(); expect( screen.getByRole( 'button', { - name: /^Custom color picker.$/, + name: /^Custom color picker$/, } ) ).toBeInTheDocument(); } ); diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index 554bd8947f0bf..7830a934529aa 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -324,13 +324,13 @@ test.describe( 'Buttons', () => { await page.click( 'role=region[name="Editor settings"i] >> role=button[name="Text"i]' ); - await page.click( 'role=button[name="Custom color picker."i]' ); + await page.click( 'role=button[name="Custom color picker"i]' ); await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' ); await page.click( 'role=region[name="Editor settings"i] >> role=button[name="Background"i]' ); - await page.click( 'role=button[name="Custom color picker."i]' ); + await page.click( 'role=button[name="Custom color picker"i]' ); await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' ); // Check the content. diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js index 906095cad9d08..6ff7e11bb334e 100644 --- a/test/e2e/specs/editor/blocks/heading.spec.js +++ b/test/e2e/specs/editor/blocks/heading.spec.js @@ -184,7 +184,7 @@ test.describe( 'Heading', () => { await textColor.click(); await page - .getByRole( 'button', { name: /Custom color picker./i } ) + .getByRole( 'button', { name: /Custom color picker/i } ) .click(); await page From 142a5862930bc42decc99b42272f57b19838463d Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 10 Feb 2025 11:33:11 +0100 Subject: [PATCH 10/11] Restore group ARIA role on OptionGroup. --- .../circular-option-picker-option-group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx index 2911140c60a19..a4a8da1b62b58 100644 --- a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx +++ b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx @@ -15,7 +15,7 @@ export function OptionGroup( { }: OptionGroupProps ) { const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps - ? 'listbox' + ? 'group' : undefined; return ( From 61e82289d7e4bdc94b8a180762ee23a5703d3a54 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 17 Feb 2025 09:59:38 +0100 Subject: [PATCH 11/11] Change Background color label to Overlay color. --- packages/block-library/src/cover/edit/index.js | 2 +- test/e2e/specs/editor/various/list-view.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index b9b7f5d567319..b09093e312211 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -515,7 +515,7 @@ function CoverEdit( { onChange={ onSetOverlayColor } clearable={ false } asButtons - aria-label={ __( 'Background color' ) } + aria-label={ __( 'Overlay color' ) } />
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js index 6d92877fd9006..98dfe5e304f80 100644 --- a/test/e2e/specs/editor/various/list-view.spec.js +++ b/test/e2e/specs/editor/various/list-view.spec.js @@ -163,7 +163,7 @@ test.describe( 'List View', () => { await editor.canvas .getByRole( 'document', { name: 'Block: Cover' } ) .getByRole( 'group', { - name: 'Background color', + name: 'Overlay color', } ) .getByRole( 'button' ) .first()