@wordpress/components 39.0.0 → 40.1.0

package/src/form-token-field/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,4 +1,4 @@
-/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectTokensToBeInTheDocument", "expectTokensNotToBeInTheDocument", "expectVisibleSuggestionsToBe", "expectEscapedProperly"] }] */
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
 	render,
 	screen,
@@ -12,6 +12,10 @@ import { useState } from '@wordpress/element';
 import { logged } from '@wordpress/deprecated';
 import FormTokenField from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockScrollIntoView();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
@@ -119,7 +123,7 @@ describe( 'FormTokenField', () => {
 		it( "should add tokens with the input's value when pressing the enter key", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onChange={ onChangeSpy } /> );
 
@@ -144,7 +148,7 @@ describe( 'FormTokenField', () => {
 		it( "should add a token with the input's value when pressing the comma key", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onChange={ onChangeSpy } /> );
 
@@ -160,7 +164,7 @@ describe( 'FormTokenField', () => {
 		it( 'should add a token with the input value when pressing the space key and the `tokenizeOnSpace` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -204,7 +208,7 @@ describe( 'FormTokenField', () => {
 		it( 'should add a token with the input value with onBlur when `tokenizeOnBlur` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -239,7 +243,7 @@ describe( 'FormTokenField', () => {
 		it( "should not add a token with the input's value when tokenizeOnBlur is not set and pressing the tab key", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onChange={ onChangeSpy } /> );
 
@@ -255,7 +259,7 @@ describe( 'FormTokenField', () => {
 		it( 'should remove the last token when pressing the backspace key', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -283,7 +287,7 @@ describe( 'FormTokenField', () => {
 		it( 'should remove a token when clicking the token\'s "remove" button', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -325,7 +329,7 @@ describe( 'FormTokenField', () => {
 		it( 'should remove a token when by focusing on the token\'s "remove" button and pressing space bar', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -360,7 +364,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not add a new token if a token with the same value already exists', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -387,7 +391,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not add a new token if the text input is blank', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -407,7 +411,7 @@ describe( 'FormTokenField', () => {
 		it( 'should allow moving the cursor through the tokens when pressing the arrow keys, and should remove the token in front of the cursor when pressing the delete key', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -534,7 +538,7 @@ describe( 'FormTokenField', () => {
 		it( 'should fire the `onFocus` callback when the input is focused', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			render( <FormTokenFieldWithState onFocus={ onFocusSpy } /> );
 
@@ -556,7 +560,7 @@ describe( 'FormTokenField', () => {
 		it( "should fire the `onInputChange` callback when the input's value changes", async () => {
 			const user = userEvent.setup();
 
-			const onInputChangeSpy = jest.fn();
+			const onInputChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState onInputChange={ onInputChangeSpy } />
@@ -674,7 +678,7 @@ describe( 'FormTokenField', () => {
 		it( "should use the value of the `placeholder` prop as the input's placeholder only when there are no tokens", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -703,7 +707,7 @@ describe( 'FormTokenField', () => {
 		it( 'should handle accents and special characters in tokens and input value', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -748,7 +752,7 @@ describe( 'FormTokenField', () => {
 		it( 'should render suggestions when receiving focus if the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Cobalt', 'Blue', 'Octane' ];
 
@@ -791,7 +795,7 @@ describe( 'FormTokenField', () => {
 		it( 'should render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -823,7 +827,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `false` or not defined', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -854,7 +858,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not render suggestions after the input is blurred', async () => {
 			const user = userEvent.setup();
 
-			const onFocusSpy = jest.fn();
+			const onFocusSpy = vi.fn();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -951,7 +955,7 @@ describe( 'FormTokenField', () => {
 		it( 'should allow the user to use the keyboard to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [
 				'Pink',
@@ -1027,10 +1031,48 @@ describe( 'FormTokenField', () => {
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 		} );
 
+		it( 'should select the last suggestion when pressing the up arrow with no suggestion selected', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [ 'Pink', 'Salmon', 'Carnation', 'Neon' ];
+
+			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Typing "on" will show the "Salmon", "Carnation" and "Neon" suggestions
+			await user.type( input, 'on' );
+
+			const suggestionList = screen.getByRole( 'listbox' );
+
+			expectVisibleSuggestionsToBe( suggestionList, [
+				'Salmon',
+				'Carnation',
+				'Neon',
+			] );
+
+			// Currently, none of the suggestions are selected
+			expect(
+				within( suggestionList ).queryByRole( 'option', {
+					selected: true,
+				} )
+			).not.toBeInTheDocument();
+
+			// Pressing the up arrow from an empty selection wraps to the end of
+			// the list and selects "Neon"
+			await user.keyboard( '[ArrowUp]' );
+
+			expect(
+				within( suggestionList ).getByRole( 'option', {
+					selected: true,
+				} )
+			).toHaveAccessibleName( 'Neon' );
+		} );
+
 		it( 'should allow the user to use the mouse to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Tiger', 'Tangerine', 'Orange' ];
 
@@ -1100,7 +1142,7 @@ describe( 'FormTokenField', () => {
 		it( 'should hide the suggestion list when the Escape key is pressed', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Black', 'Ash', 'Onyx', 'Ebony' ];
 
@@ -1453,7 +1495,7 @@ describe( 'FormTokenField', () => {
 		it( 'should accept tokens in their object format', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1493,8 +1535,8 @@ describe( 'FormTokenField', () => {
 		it( 'should trigger mouse callbacks if the `onMouseEnter` and/or the `onMouseLeave` properties are set on a token data object', async () => {
 			const user = userEvent.setup();
 
-			const onMouseEnterSpy = jest.fn();
-			const onMouseLeaveSpy = jest.fn();
+			const onMouseEnterSpy = vi.fn();
+			const onMouseLeaveSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -1575,7 +1617,7 @@ describe( 'FormTokenField', () => {
 		it( "by default, it should trim the input's value from extra white spaces before attempting to add it as a token", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1639,7 +1681,7 @@ describe( 'FormTokenField', () => {
 		it( "should allow to modify the input's value when saving it as a token", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1702,7 +1744,7 @@ describe( 'FormTokenField', () => {
 		it( 'is applied to the search value when matching it against the list of suggestions', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Expensive food', 'Free food' ];
 
@@ -1740,7 +1782,7 @@ describe( 'FormTokenField', () => {
 		it( 'should allow to modify the text rendered in the browser for each token', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState
@@ -1796,7 +1838,7 @@ describe( 'FormTokenField', () => {
 		it( "is applied to each suggestions, but doesn't influence the matching against the search value", async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const suggestions = [ 'Hot coffee', 'Hot tea' ];
 
@@ -1874,7 +1916,7 @@ describe( 'FormTokenField', () => {
 		it( 'should add a token only if it passes the validation set via `__experimentalValidateInput`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -1917,8 +1959,8 @@ describe( 'FormTokenField', () => {
 		it( 'should still preventDefault on Enter when validation rejects the value', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
-			const onSubmitSpy = jest.fn( ( e: React.FormEvent ) =>
+			const onChangeSpy = vi.fn();
+			const onSubmitSpy = vi.fn( ( e: React.FormEvent ) =>
 				e.preventDefault()
 			);
 			const startsWithCapitalLetter = ( tokenText: string ) =>
@@ -1946,7 +1988,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not preventDefault on space when validation fails and `tokenizeOnSpace` is true', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -1984,7 +2026,7 @@ describe( 'FormTokenField', () => {
 		it( 'should filter out invalid tokens when pasting with separators', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2012,7 +2054,7 @@ describe( 'FormTokenField', () => {
 		it( 'should leave all segments in the input when none pass validation on paste', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2035,7 +2077,7 @@ describe( 'FormTokenField', () => {
 		it( 'should commit a trailing valid segment and leave only failed segments in the input when pasting without a trailing separator', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2059,7 +2101,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -2081,7 +2123,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values with `__experimentalValidateInput`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
 				/^[A-Z]/.test( tokenText );
 
@@ -2108,7 +2150,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not allow adding new tokens beyond the value defined by the `maxLength` prop', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState
@@ -2176,7 +2218,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not affect tokens that were added before the limit was imposed', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -2219,7 +2261,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not allow adding tokens when the `disabled` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const { rerender } = render(
 				<FormTokenFieldWithState onChange={ onChangeSpy } />
@@ -2247,7 +2289,7 @@ describe( 'FormTokenField', () => {
 		it( 'should not allow removing tokens when the `disable` prop is `true`', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<FormTokenFieldWithState

package/src/gradient-picker/README.md

@@ -54,15 +54,6 @@ const MyGradientPicker = () => {
 
 Whether this is rendered in the sidebar.
 
-### `asButtons`
-
- - Type: `boolean`
- - Required: No
- - Default: `false`
-
-Whether the control should present as a set of buttons,
-each with its own tab stop.
-
 ### `aria-label`
 
  - Type: `string`
@@ -137,7 +128,7 @@ contains two or more items).
  - Default: `true`
 
 Prevents keyboard interaction from wrapping around.
-Only used when `asButtons` is not true.
+Only used with the `listbox` presentation.
 
 ### `onChange`
 
@@ -149,6 +140,24 @@ the `currentGradient` as an argument. When a predefined gradient is
 selected, the second argument is its index (or, for multiple-origin
 gradients, the origin index) and the third argument is its slug.
 
+### `presentation`
+
+ - Type: `"listbox" | "toggle-buttons" | "command-buttons"`
+ - Required: No
+ - Default: `'listbox'`
+
+How predefined gradient swatches behave and are exposed to assistive
+technology.
+
+- `listbox` uses one tab stop and arrow-key navigation, and exposes
+  selection with `aria-selected`.
+- `toggle-buttons` gives each swatch a tab stop and exposes selection with
+  `aria-pressed`.
+- `command-buttons` gives each swatch a tab stop and exposes no selection
+  state. `value` and `selectedSlug` do not mark predefined swatches as
+  selected, and activating a swatch always calls `onChange` with that
+  swatch. `value` still controls the custom gradient picker.
+
 ### `selectedSlug`
 
  - Type: `string`

package/src/gradient-picker/index.tsx

@@ -3,10 +3,12 @@ import { useInstanceId } from '@wordpress/compose';
 import { useCallback, useMemo } from '@wordpress/element';
 import CircularOptionPicker, {
 	getComputeCircularOptionPickerCommonProps,
+	warnIfCircularOptionPickerAsButtonsIsSet,
 } from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
-import { ColorHeading } from '../color-palette/styles';
+import { Heading } from '../heading';
+import colorPaletteStyles from '../color-palette/style.module.scss';
 import type {
 	GradientPickerComponentProps,
 	PickerProps,
@@ -35,6 +37,7 @@ function SingleOrigin( {
 	onChange,
 	value,
 	selectedSlug,
+	presentation,
 	...additionalProps
 }: PickerProps< GradientObject > ) {
 	const gradientOptions = useMemo( () => {
@@ -43,9 +46,9 @@ function SingleOrigin( {
 			// strictly by slug, which keeps two entries with the same gradient
 			// value apart. Otherwise selection falls back to matching the
 			// gradient value.
-			const isSelected = selectedSlug
-				? slug === selectedSlug
-				: value === gradient;
+			const isSelected =
+				presentation !== 'command-buttons' &&
+				( selectedSlug ? slug === selectedSlug : value === gradient );
 			return (
 				<CircularOptionPicker.Option
 					key={ slug }
@@ -75,7 +78,14 @@ function SingleOrigin( {
 				/>
 			);
 		} );
-	}, [ gradients, value, onChange, clearGradient, selectedSlug ] );
+	}, [
+		gradients,
+		value,
+		onChange,
+		clearGradient,
+		selectedSlug,
+		presentation,
+	] );
 	return (
 		<CircularOptionPicker.OptionGroup
 			className={ className }
@@ -93,6 +103,7 @@ function MultipleOrigin( {
 	value,
 	selectedSlug,
 	headingLevel,
+	presentation,
 }: PickerProps< OriginObject > ) {
 	const instanceId = useInstanceId( MultipleOrigin );
 
@@ -102,9 +113,13 @@ function MultipleOrigin( {
 				const id = `color-palette-${ instanceId }-${ index }`;
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading level={ headingLevel } id={ id }>
+						<Heading
+							className={ colorPaletteStyles[ 'color-heading' ] }
+							level={ headingLevel }
+							id={ id }
+						>
 							{ name }
-						</ColorHeading>
+						</Heading>
 						<SingleOrigin
 							clearGradient={ clearGradient }
 							gradients={ gradientSet }
@@ -113,6 +128,7 @@ function MultipleOrigin( {
 							}
 							value={ value }
 							selectedSlug={ selectedSlug }
+							presentation={ presentation }
 							aria-labelledby={ id }
 						/>
 					</VStack>
@@ -125,6 +141,7 @@ function MultipleOrigin( {
 function Component( props: PickerProps< any > ) {
 	const {
 		asButtons,
+		presentation,
 		loop,
 		actions,
 		headingLevel,
@@ -132,17 +149,27 @@ function Component( props: PickerProps< any > ) {
 		'aria-labelledby': ariaLabelledby,
 		...additionalProps
 	} = props;
+	warnIfCircularOptionPickerAsButtonsIsSet( 'GradientPicker', asButtons );
+
+	const { metaProps, labelProps, resolvedPresentation } =
+		getComputeCircularOptionPickerCommonProps(
+			asButtons,
+			loop,
+			ariaLabel,
+			ariaLabelledby,
+			presentation
+		);
 	const options = isMultipleOriginArray( props.gradients ) ? (
-		<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />
+		<MultipleOrigin
+			headingLevel={ headingLevel }
+			{ ...additionalProps }
+			presentation={ resolvedPresentation }
+		/>
 	) : (
-		<SingleOrigin { ...additionalProps } />
-	);
-
-	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
-		asButtons,
-		loop,
-		ariaLabel,
-		ariaLabelledby
+		<SingleOrigin
+			{ ...additionalProps }
+			presentation={ resolvedPresentation }
+		/>
 	);
 
 	return (

package/src/gradient-picker/stories/index.story.tsx

@@ -147,6 +147,11 @@ export const DuplicateGradients: GradientPickerStory = {
 };
 
 export const MultipleOrigins: GradientPickerStory = {
+	parameters: {
+		// FIXME: Multiple Origins: origin groups are missing required ARIA children (aria-required-children).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
+	},
 	render: Template,
 	args: {
 		gradients: [