@wordpress/components 26.0.4 → 27.1.0

package/src/popover/test/index.tsx

@@ -182,10 +182,7 @@ describe( 'Popover', () => {
 		describe( 'focus behavior', () => {
 			it( 'should focus the popover container when opened', async () => {
 				render(
-					<Popover
-						focusOnMount={ true }
-						data-testid="popover-element"
-					>
+					<Popover focusOnMount data-testid="popover-element">
 						Popover content
 					</Popover>
 				);

package/src/progress-bar/stories/index.story.tsx

@@ -14,6 +14,7 @@ const meta: Meta< typeof ProgressBar > = {
 	argTypes: {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		badges: [ 'private' ],
 		controls: {

package/src/progress-bar/styles.ts

@@ -30,7 +30,7 @@ export const Track = styled.div`
 	/* Text color at 10% opacity */
 	background-color: color-mix(
 		in srgb,
-		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+		${ COLORS.theme.foreground },
 		transparent 90%
 	);
 	border-radius: ${ CONFIG.radiusBlockUi };
@@ -52,7 +52,7 @@ export const Indicator = styled.div< {
 	/* Text color at 90% opacity */
 	background-color: color-mix(
 		in srgb,
-		var( --wp-components-color-foreground, ${ COLORS.gray[ 900 ] } ),
+		${ COLORS.theme.foreground },
 		transparent 10%
 	);
 

package/src/query-controls/index.native.js

@@ -69,7 +69,7 @@ const QueryControls = memo(
 						value={ `${ orderBy }/${ order }` }
 						options={ options }
 						onChange={ onChange }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 				) }
 				{ onCategoryChange && (
@@ -79,7 +79,7 @@ const QueryControls = memo(
 						noOptionLabel={ _x( 'All', 'categories' ) }
 						selectedCategoryId={ selectedCategoryId }
 						onChange={ onCategoryChange }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 				) }
 				{ onNumberOfItemsChange && (

package/src/radio-group/stories/index.story.tsx

@@ -16,6 +16,7 @@ import { useState } from '@wordpress/element';
 
 const meta: Meta< typeof RadioGroup > = {
 	title: 'Components (Deprecated)/RadioGroup',
+	id: 'components-radiogroup',
 	component: RadioGroup,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Radio },

package/src/range-control/index.tsx

@@ -253,7 +253,7 @@ function UnforwardedRangeControl(
 						value={ inputSliderValue ?? undefined }
 					/>
 					<RangeRail
-						aria-hidden={ true }
+						aria-hidden
 						disabled={ disabled }
 						marks={ marks }
 						max={ max }
@@ -263,7 +263,7 @@ function UnforwardedRangeControl(
 						value={ rangeFillValue }
 					/>
 					<Track
-						aria-hidden={ true }
+						aria-hidden
 						className="components-range-control__track"
 						disabled={ disabled }
 						style={ { width: fillValueOffset } }
@@ -275,7 +275,7 @@ function UnforwardedRangeControl(
 						disabled={ disabled }
 					>
 						<Thumb
-							aria-hidden={ true }
+							aria-hidden
 							isFocused={ isThumbFocused }
 							disabled={ disabled }
 						/>

package/src/range-control/test/index.tsx

@@ -297,7 +297,7 @@ describe( 'RangeControl', () => {
 			render(
 				<RangeControl
 					initialPosition={ 10 }
-					allowReset={ true }
+					allowReset
 					onChange={ spy }
 					resetFallbackValue={ 33 }
 				/>
@@ -320,7 +320,7 @@ describe( 'RangeControl', () => {
 					initialPosition={ undefined }
 					min={ 0 }
 					max={ 100 }
-					allowReset={ true }
+					allowReset
 					resetFallbackValue={ undefined }
 				/>
 			);

package/src/search-control/index.native.js

@@ -235,7 +235,7 @@ function SearchControl( {
 				<Text
 					onPress={ onCancel }
 					style={ cancelButtonTextStyle }
-					accessible={ true }
+					accessible
 					accessibilityRole={ 'button' }
 					accessibilityLabel={ __( 'Cancel search' ) }
 					accessibilityHint={ __( 'Cancel search' ) }

package/src/snackbar/index.tsx

@@ -138,9 +138,12 @@ function UnforwardedSnackbar(
 			className={ classes }
 			onClick={ ! explicitDismiss ? dismissMe : undefined }
 			tabIndex={ 0 }
-			role={ ! explicitDismiss ? 'button' : '' }
+			role={ ! explicitDismiss ? 'button' : undefined }
 			onKeyPress={ ! explicitDismiss ? dismissMe : undefined }
-			aria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }
+			aria-label={
+				! explicitDismiss ? __( 'Dismiss this notice' ) : undefined
+			}
+			data-testid="snackbar"
 		>
 			<div className={ snackbarContentClassnames }>
 				{ icon && (

package/src/snackbar/list.tsx

@@ -73,7 +73,12 @@ export function SnackbarList( {
 		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
 			onRemove?.( notice.id );
 	return (
-		<div className={ className } tabIndex={ -1 } ref={ listRef }>
+		<div
+			className={ className }
+			tabIndex={ -1 }
+			ref={ listRef }
+			data-testid="snackbar-list"
+		>
 			{ children }
 			<AnimatePresence>
 				{ notices.map( ( notice ) => {

package/src/snackbar/stories/list.story.tsx

@@ -70,7 +70,6 @@ Default.args = {
 				},
 			],
 			content: 'Post published.',
-			isDismissible: true,
 			explicitDismiss: false,
 		},
 		{
@@ -83,7 +82,6 @@ Default.args = {
 				},
 			],
 			content: 'Post updated.',
-			isDismissible: true,
 			explicitDismiss: false,
 		},
 		{
@@ -91,7 +89,6 @@ Default.args = {
 			spokenMessage: 'All content copied.',
 			actions: [],
 			content: 'All content copied.',
-			isDismissible: true,
 			explicitDismiss: false,
 		},
 	],

package/src/snackbar/test/index.tsx

@@ -0,0 +1,267 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import { click } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import Snackbar from '../index';
+
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
+describe( 'Snackbar', () => {
+	const testId = 'snackbar';
+
+	beforeEach( () => {
+		mockedSpeak.mockReset();
+	} );
+
+	it( 'should render correctly', () => {
+		render( <Snackbar>Message</Snackbar> );
+
+		const snackbar = screen.getByTestId( testId );
+
+		expect( snackbar ).toBeVisible();
+		expect( snackbar ).toHaveTextContent( 'Message' );
+	} );
+
+	it( 'should render with an additional className', () => {
+		render( <Snackbar className="gutenberg">Message</Snackbar> );
+
+		expect( screen.getByTestId( testId ) ).toHaveClass( 'gutenberg' );
+	} );
+
+	it( 'should render with an icon', () => {
+		const testIcon = (
+			<SVG data-testid="icon">
+				<Path />
+			</SVG>
+		);
+
+		render( <Snackbar icon={ testIcon }>Message</Snackbar> );
+
+		const snackbar = screen.getByTestId( testId );
+		const icon = within( snackbar ).getByTestId( 'icon' );
+
+		expect( icon ).toBeVisible();
+	} );
+
+	it( 'should be dismissible by clicking the snackbar', async () => {
+		const onRemove = jest.fn();
+		const onDismiss = jest.fn();
+
+		render(
+			<Snackbar onRemove={ onRemove } onDismiss={ onDismiss }>
+				Message
+			</Snackbar>
+		);
+
+		const snackbar = screen.getByTestId( testId );
+
+		expect( snackbar ).toHaveAttribute( 'role', 'button' );
+		expect( snackbar ).toHaveAttribute(
+			'aria-label',
+			'Dismiss this notice'
+		);
+
+		await click( snackbar );
+
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+		expect( onDismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should not be dismissible by clicking the snackbar when the `explicitDismiss` prop is set to `true`', async () => {
+		const onRemove = jest.fn();
+		const onDismiss = jest.fn();
+
+		render(
+			<Snackbar
+				explicitDismiss
+				onRemove={ onRemove }
+				onDismiss={ onDismiss }
+			>
+				Message
+			</Snackbar>
+		);
+
+		const snackbar = screen.getByTestId( testId );
+
+		expect( snackbar ).not.toHaveAttribute( 'role', 'button' );
+		expect( snackbar ).not.toHaveAttribute(
+			'aria-label',
+			'Dismiss this notice'
+		);
+		expect( snackbar ).toHaveClass(
+			'components-snackbar-explicit-dismiss'
+		);
+
+		await click( snackbar );
+
+		expect( onRemove ).not.toHaveBeenCalled();
+		expect( onDismiss ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should be dismissible by clicking the close button when the `explicitDismiss` prop is set to `true`', async () => {
+		const onRemove = jest.fn();
+		const onDismiss = jest.fn();
+
+		render(
+			<Snackbar
+				explicitDismiss
+				onRemove={ onRemove }
+				onDismiss={ onDismiss }
+			>
+				Message
+			</Snackbar>
+		);
+
+		const snackbar = screen.getByTestId( testId );
+		const closeButton = within( snackbar ).getByRole( 'button', {
+			name: 'Dismiss this notice',
+		} );
+
+		await click( closeButton );
+
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+		expect( onDismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	describe( 'actions', () => {
+		it( 'should render only the first action with a warning when multiple actions are passed', () => {
+			render(
+				<Snackbar
+					actions={ [
+						{ label: 'One', url: 'https://example.com' },
+						{ label: 'Two', url: 'https://example.com' },
+						{ label: 'Three', url: 'https://example.com' },
+					] }
+				>
+					Message
+				</Snackbar>
+			);
+
+			expect( console ).toHaveWarnedWith(
+				'Snackbar can only have one action. Use Notice if your message requires many actions.'
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const action = within( snackbar ).getByRole( 'link' );
+
+			expect( action ).toBeVisible();
+			expect( action ).toHaveTextContent( 'One' );
+		} );
+
+		it( 'should be rendered as a link when the `url` prop is set', () => {
+			render(
+				<Snackbar
+					actions={ [
+						{ label: 'View post', url: 'https://example.com' },
+					] }
+				>
+					Post updated.
+				</Snackbar>
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const link = within( snackbar ).getByRole( 'link', {
+				name: 'View post',
+			} );
+
+			expect( link ).toHaveAttribute( 'href', 'https://example.com' );
+		} );
+
+		it( 'should be rendered as a button and call `onClick` when the `onClick` prop is set', async () => {
+			const onClick = jest.fn();
+
+			render(
+				<Snackbar actions={ [ { label: 'View post', onClick } ] }>
+					Post updated.
+				</Snackbar>
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const button = within( snackbar ).getByRole( 'button', {
+				name: 'View post',
+			} );
+
+			await click( button );
+
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should be rendered as a link when the `url` prop and the `onClick` are set', () => {
+			render(
+				<Snackbar
+					actions={ [
+						{
+							label: 'View post',
+							url: 'https://example.com',
+							onClick: () => {},
+						},
+					] }
+				>
+					Post updated.
+				</Snackbar>
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const link = within( snackbar ).getByRole( 'link', {
+				name: 'View post',
+			} );
+			expect( link ).toBeVisible();
+		} );
+	} );
+
+	describe( 'useSpokenMessage', () => {
+		it( 'should speak the given message', () => {
+			render( <Snackbar>FYI</Snackbar> );
+
+			expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
+		} );
+
+		it( 'should speak the given message by explicit politeness', () => {
+			render( <Snackbar politeness="assertive">Uh oh!</Snackbar> );
+
+			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
+		} );
+
+		it( 'should coerce a message to a string', () => {
+			// This test assumes that `@wordpress/a11y` is capable of handling
+			// markup strings appropriately.
+			render(
+				<Snackbar>
+					With <em>emphasis</em> this time.
+				</Snackbar>
+			);
+
+			expect( speak ).toHaveBeenCalledWith(
+				'With <em>emphasis</em> this time.',
+				'polite'
+			);
+		} );
+
+		it( 'should not re-speak an effectively equivalent element message', () => {
+			const { rerender } = render(
+				<Snackbar>
+					With <em>emphasis</em> this time.
+				</Snackbar>
+			);
+			rerender(
+				<Snackbar>
+					With <em>emphasis</em> this time.
+				</Snackbar>
+			);
+
+			expect( speak ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );

package/src/snackbar/test/list.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { click } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import SnackbarList from '../list';
+
+window.scrollTo = jest.fn();
+
+describe( 'SnackbarList', () => {
+	afterEach( () => {
+		jest.resetAllMocks();
+	} );
+
+	it( 'should get focus after a snackbar is dismissed', async () => {
+		render(
+			<SnackbarList
+				notices={ [
+					{
+						id: 'ID_1',
+						content: 'Post published.',
+						explicitDismiss: true,
+					},
+					{
+						id: 'ID_2',
+						content: 'Post updated.',
+						explicitDismiss: true,
+					},
+				] }
+				onRemove={ () => {} }
+			/>
+		);
+
+		await click(
+			screen.getAllByRole( 'button', {
+				name: 'Dismiss this notice',
+			} )[ 0 ]
+		);
+
+		expect( screen.getByTestId( 'snackbar-list' ) ).toHaveFocus();
+	} );
+} );

package/src/snackbar/types.ts

@@ -6,7 +6,11 @@ import type { MutableRefObject, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { NoticeProps, NoticeChildren } from '../notice/types';
+import type {
+	NoticeProps,
+	NoticeChildren,
+	NoticeAction,
+} from '../notice/types';
 
 type SnackbarOnlyProps = {
 	/**
@@ -28,8 +32,32 @@ type SnackbarOnlyProps = {
 	listRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
-export type SnackbarProps = Omit< NoticeProps, '__unstableHTML' > &
-	SnackbarOnlyProps;
+export type SnackbarProps = Pick<
+	NoticeProps,
+	| 'className'
+	| 'children'
+	| 'spokenMessage'
+	| 'onRemove'
+	| 'politeness'
+	| 'onDismiss'
+> &
+	SnackbarOnlyProps & {
+		/**
+		 * An array of action objects. Each member object should contain:
+		 *
+		 * - `label`: `string` containing the text of the button/link
+		 * - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify
+		 *    what the action does.
+		 *
+		 * The default appearance of an action button is inferred based on whether
+		 * `url` or `onClick` are provided, rendering the button as a link if
+		 * appropriate. If both props are provided, `url` takes precedence, and the
+		 * action button will render as an anchor tag.
+		 *
+		 * @default []
+		 */
+		actions?: Pick< NoticeAction, 'label' | 'url' | 'onClick' >[];
+	};
 
 export type SnackbarListProps = {
 	notices: Array<

package/src/tab-panel/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, hover, click } from '@ariakit/test';
+import { press, hover, click, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -155,6 +155,7 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused, and that the
 			// corresponding tooltip is shown.
 			expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
+			await sleep();
 			await press.Tab();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByText( 'Alpha' ) ).toBeInTheDocument();
@@ -626,6 +627,7 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
+			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -663,6 +665,7 @@ describe.each( [
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
+			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -700,6 +703,7 @@ describe.each( [
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
+			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -795,6 +799,7 @@ describe.each( [
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
+			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
@@ -836,6 +841,7 @@ describe.each( [
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
+			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -843,6 +849,7 @@ describe.each( [
 
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
+			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )