@wordpress/components 32.4.1-next.v.202603102151.0 → 32.5.0

package/src/validated-form-controls/test/number-control.tsx

@@ -0,0 +1,44 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedNumberControl } from '../components';
+
+describe( 'ValidatedNumberControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedNumberControl label="Quantity" help="Enter a quantity." />
+		);
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Quantity' } )
+		).toHaveAccessibleDescription( 'Enter a quantity.' );
+	} );
+
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedNumberControl
+					label="Quantity"
+					help="Enter a quantity."
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		const input = screen.getByRole( 'spinbutton', {
+			name: /^Quantity/,
+		} );
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		await waitFor( () => {
+			expect( input ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( input ).toHaveAccessibleDescription(
+			expect.stringContaining( 'Enter a quantity.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/radio-control.tsx

@@ -0,0 +1,61 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedRadioControl } from '../components';
+
+describe( 'ValidatedRadioControl', () => {
+	const options = [
+		{ label: 'Small', value: 'small' },
+		{ label: 'Medium', value: 'medium' },
+		{ label: 'Large', value: 'large' },
+	];
+
+	it( 'should preserve the help description on the radio group', () => {
+		render(
+			<ValidatedRadioControl
+				label="Size"
+				help="Choose a size."
+				options={ options }
+				onChange={ () => {} }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'radiogroup', { name: 'Size' } )
+		).toHaveAccessibleDescription( 'Choose a size.' );
+	} );
+
+	it( 'should append the validation error to the first radio input', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedRadioControl
+					label="Size"
+					help="Choose a size."
+					options={ options }
+					onChange={ () => {} }
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		// The validation error targets the first radio input (the validity
+		// target), while the help description stays on the radiogroup.
+		const firstRadio = screen.getByRole( 'radio', {
+			name: 'Small',
+		} );
+		await waitFor( () => {
+			expect( firstRadio ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+
+		expect(
+			screen.getByRole( 'radiogroup', { name: /^Size/ } )
+		).toHaveAccessibleDescription(
+			expect.stringContaining( 'Choose a size.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/range-control.tsx

@@ -0,0 +1,73 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState, useRef } from '@wordpress/element';
+import { ValidatedRangeControl } from '../components';
+
+describe( 'ValidatedRangeControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedRangeControl label="Opacity" help="Set the opacity." />
+		);
+
+		expect(
+			screen.getByRole( 'slider', { name: 'Opacity' } )
+		).toHaveAccessibleDescription( 'Set the opacity.' );
+	} );
+
+	// Range inputs always have a value, so `required` never fails constraint
+	// validation. Use `customValidity` to trigger the validation error.
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+
+		function TestComponent() {
+			const [ customValidity, setCustomValidity ] =
+				useState<
+					React.ComponentProps<
+						typeof ValidatedRangeControl
+					>[ 'customValidity' ]
+				>( undefined );
+			const ref = useRef< HTMLInputElement >( null );
+
+			return (
+				<>
+					<ValidatedRangeControl
+						ref={ ref }
+						label="Opacity"
+						help="Set the opacity."
+						customValidity={ customValidity }
+					/>
+					<button
+						type="button"
+						onClick={ () => {
+							setCustomValidity( {
+								type: 'invalid',
+								message: 'Value out of range.',
+							} );
+							requestAnimationFrame(
+								() => ref.current?.reportValidity()
+							);
+						} }
+					>
+						Validate
+					</button>
+				</>
+			);
+		}
+
+		render( <TestComponent /> );
+
+		const slider = screen.getByRole( 'slider', { name: 'Opacity' } );
+		expect( slider ).toHaveAccessibleDescription( 'Set the opacity.' );
+
+		await user.click( screen.getByRole( 'button', { name: 'Validate' } ) );
+
+		await waitFor( () => {
+			expect( slider ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Value out of range.' )
+			);
+		} );
+		expect( slider ).toHaveAccessibleDescription(
+			expect.stringContaining( 'Set the opacity.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/select-control.tsx

@@ -0,0 +1,57 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedSelectControl } from '../components';
+
+describe( 'ValidatedSelectControl', () => {
+	const options = [
+		{ label: 'Select a color...', value: '' },
+		{ label: 'Red', value: 'red' },
+		{ label: 'Blue', value: 'blue' },
+	];
+
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedSelectControl
+				label="Color"
+				help="Pick a color."
+				options={ options }
+				onChange={ () => {} }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'combobox', { name: 'Color' } )
+		).toHaveAccessibleDescription( 'Pick a color.' );
+	} );
+
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedSelectControl
+					label="Color"
+					help="Pick a color."
+					options={ options }
+					onChange={ () => {} }
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		const select = screen.getByRole( 'combobox', {
+			name: /^Color/,
+		} );
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		await waitFor( () => {
+			expect( select ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( select ).toHaveAccessibleDescription(
+			expect.stringContaining( 'Pick a color.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/text-control.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedTextControl } from '../components';
+
+describe( 'ValidatedTextControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedTextControl
+				label="Name"
+				help="Enter your full name."
+				onChange={ () => {} }
+				value=""
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'textbox', { name: 'Name' } )
+		).toHaveAccessibleDescription( 'Enter your full name.' );
+	} );
+
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedTextControl
+					label="Name"
+					help="Enter your full name."
+					onChange={ () => {} }
+					value=""
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		const input = screen.getByRole( 'textbox', { name: /^Name/ } );
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		await waitFor( () => {
+			expect( input ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( input ).toHaveAccessibleDescription(
+			expect.stringContaining( 'Enter your full name.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/textarea-control.tsx

@@ -0,0 +1,51 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedTextareaControl } from '../components';
+
+describe( 'ValidatedTextareaControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedTextareaControl
+				label="Bio"
+				help="A short bio."
+				onChange={ () => {} }
+				value=""
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'textbox', { name: 'Bio' } )
+		).toHaveAccessibleDescription( 'A short bio.' );
+	} );
+
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedTextareaControl
+					label="Bio"
+					help="A short bio."
+					onChange={ () => {} }
+					value=""
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		const textarea = screen.getByRole( 'textbox', {
+			name: /^Bio/,
+		} );
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		await waitFor( () => {
+			expect( textarea ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( textarea ).toHaveAccessibleDescription(
+			expect.stringContaining( 'A short bio.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/toggle-control.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ValidatedToggleControl } from '../components';
+
+describe( 'ValidatedToggleControl', () => {
+	it( 'should preserve the help description', () => {
+		render(
+			<ValidatedToggleControl
+				label="Dark mode"
+				help="Enable dark mode."
+				onChange={ () => {} }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'checkbox', { name: 'Dark mode' } )
+		).toHaveAccessibleDescription( 'Enable dark mode.' );
+	} );
+
+	it( 'should append the validation error alongside the help description', async () => {
+		const user = userEvent.setup();
+		render(
+			<form>
+				<ValidatedToggleControl
+					label="Dark mode"
+					help="Enable dark mode."
+					onChange={ () => {} }
+					required
+				/>
+				<button type="submit">Submit</button>
+			</form>
+		);
+
+		const toggle = screen.getByRole( 'checkbox', {
+			name: /^Dark mode/,
+		} );
+
+		await user.click( screen.getByRole( 'button', { name: 'Submit' } ) );
+
+		await waitFor( () => {
+			expect( toggle ).toHaveAccessibleDescription(
+				expect.stringContaining( 'Constraints not satisfied' )
+			);
+		} );
+		expect( toggle ).toHaveAccessibleDescription(
+			expect.stringContaining( 'Enable dark mode.' )
+		);
+	} );
+} );

package/src/validated-form-controls/test/toggle-group-control.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { ValidatedToggleGroupControl } from '../components';
+import { ToggleGroupControlOption } from '../../toggle-group-control';
+
+// The `help` prop is rendered visually by BaseControl but is not
+// programmatically associated with the toggle group via aria-describedby.
+// Additionally, the validity target is a hidden delegate radio input, not the
+// toggle group itself. These are pre-existing bugs, not caused by ControlWithError.
+describe( 'ValidatedToggleGroupControl', () => {
+	// eslint-disable-next-line jest/no-disabled-tests
+	it.skip( 'should preserve the help description', () => {
+		render(
+			<ValidatedToggleGroupControl
+				label="Alignment"
+				help="Choose text alignment."
+				value="left"
+				onChange={ () => {} }
+			>
+				<ToggleGroupControlOption label="Left" value="left" />
+				<ToggleGroupControlOption label="Center" value="center" />
+			</ValidatedToggleGroupControl>
+		);
+
+		expect(
+			screen.getByRole( 'radiogroup', { name: 'Alignment' } )
+		).toHaveAccessibleDescription( 'Choose text alignment.' );
+	} );
+} );

package/src/validated-form-controls/validity-indicator.tsx

@@ -15,9 +15,11 @@ import Icon from '../icon';
 import Spinner from '../spinner';
 
 export function ValidityIndicator( {
+	id,
 	type,
 	message,
 }: {
+	id?: string;
 	type: 'validating' | 'valid' | 'invalid';
 	message?: string;
 } ) {
@@ -27,6 +29,7 @@ export function ValidityIndicator( {
 	};
 	return (
 		<p
+			id={ id }
 			className={ clsx(
 				'components-validated-control__indicator',
 				`is-${ type }`