From c356f0bce7f656de707c2c653196e8c95201fe49 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 4 Jul 2024 18:03:22 +0200 Subject: [PATCH 1/4] Add unit tests --- .../legacy-component/test/index.tsx | 10 ++++++++++ .../src/custom-select-control-v2/test/index.tsx | 10 ++++++++++ .../components/src/custom-select-control/test/index.js | 10 ++++++++++ 3 files changed, 30 insertions(+) diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx index 238b73ea96933c..1e361236aafd9a 100644 --- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx @@ -453,6 +453,16 @@ describe.each( [ ); } ); + it( 'Should label the component correctly even when the label is not visible', () => { + render( ); + + expect( + screen.getByRole( 'combobox', { + name: legacyProps.label, + } ) + ).toBeVisible(); + } ); + describe( 'Keyboard behavior and accessibility', () => { it( 'Captures the keypress event and does not let it propagate', async () => { const onKeyDown = jest.fn(); diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx index c697539ab12085..3ff384852be04f 100644 --- a/packages/components/src/custom-select-control-v2/test/index.tsx +++ b/packages/components/src/custom-select-control-v2/test/index.tsx @@ -436,4 +436,14 @@ describe.each( [ } ) ).toBeVisible(); } ); + + it( 'Should label the component correctly even when the label is not visible', () => { + render( ); + + expect( + screen.getByRole( 'combobox', { + name: defaultProps.label, + } ) + ).toBeVisible(); + } ); } ); diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js index 165973b09a809a..9b17c4894de400 100644 --- a/packages/components/src/custom-select-control/test/index.js +++ b/packages/components/src/custom-select-control/test/index.js @@ -440,6 +440,16 @@ describe.each( [ ); } ); + it( 'Should label the component correctly even when the label is not visible', () => { + render( ); + + expect( + screen.getByRole( 'button', { + name: props.label, + } ) + ).toBeVisible(); + } ); + describe( 'Keyboard behavior and accessibility', () => { it( 'Captures the keypress event and does not let it propagate', async () => { const user = userEvent.setup(); From ac4be95144449c4c2471af7eb47a0f07dd5158d4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 4 Jul 2024 18:03:46 +0200 Subject: [PATCH 2/4] Use ariakit's labelling logic even when the label is visually hidden --- .../custom-select-control-v2/custom-select.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx index 548153506b1424..1082040d732d2a 100644 --- a/packages/components/src/custom-select-control-v2/custom-select.tsx +++ b/packages/components/src/custom-select-control-v2/custom-select.tsx @@ -113,13 +113,17 @@ function _CustomSelect( return ( // Where should `restProps` be forwarded to?
- { hideLabelFromVision ? ( // TODO: Replace with BaseControl - { label } - ) : ( - - { label } - - ) } + + ) : undefined + } + > + { label } + Date: Thu, 4 Jul 2024 18:22:47 +0200 Subject: [PATCH 3/4] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0c1195083e30dd..dd3dce8eadf841 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,6 +35,7 @@ - `CustomSelectControlV2`: fix select popover content overflow. ([#62844](https://github.com/WordPress/gutenberg/pull/62844)) - `CustomSelectControlV2`: keep legacy arrow down behavior only for legacy wrapper. ([#62919](https://github.com/WordPress/gutenberg/pull/62919)) - `CustomSelectControlV2`: fix trigger button font size. ([#63131](https://github.com/WordPress/gutenberg/pull/63131)) +- `CustomSelectControlV2`: fix labelling with a visually hidden label. ([#63137](https://github.com/WordPress/gutenberg/pull/63137)) - Extract `TimeInput` component from `TimePicker` ([#60613](https://github.com/WordPress/gutenberg/pull/60613)). - `TimeInput`: Add `label` prop ([#63106](https://github.com/WordPress/gutenberg/pull/63106)). - Method style type signatures have been changed to function style ([#62718](https://github.com/WordPress/gutenberg/pull/62718)). From 74244424edc62cc991739a5981911a5e3c34bf0f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 5 Jul 2024 08:49:24 +0200 Subject: [PATCH 4/4] Use BaseControl.VisualLabel --- .../custom-select-control-v2/custom-select.tsx | 15 +++++++++------ .../src/custom-select-control-v2/styles.ts | 8 -------- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx index 1082040d732d2a..42fada7d7554aa 100644 --- a/packages/components/src/custom-select-control-v2/custom-select.tsx +++ b/packages/components/src/custom-select-control-v2/custom-select.tsx @@ -1,8 +1,7 @@ /** * External dependencies */ -// eslint-disable-next-line no-restricted-imports -import type * as Ariakit from '@ariakit/react'; +import * as Ariakit from '@ariakit/react'; /** * WordPress dependencies @@ -25,6 +24,7 @@ import type { } from './types'; import InputBase from '../input-control/input-base'; import SelectControlChevronDown from '../select-control/chevron-down'; +import BaseControl from '../base-control'; export const CustomSelectContext = createContext< CustomSelectContextType >( undefined ); @@ -113,17 +113,20 @@ function _CustomSelect( return ( // Where should `restProps` be forwarded to?
- - ) : undefined + + ) : ( + // @ts-expect-error `children` are passed via the render prop + + ) } > { label } - + prop !== 'hasCustomRenderProp',