@wordpress/components 28.2.0 → 28.3.0

package/src/disclosure/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/divider/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 

package/src/divider/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { SeparatorProps } from '@ariakit/react';
 
 /**

package/src/dropdown-menu/index.tsx

@@ -199,6 +199,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 											? control.role
 											: 'menuitem'
 									}
+									accessibleWhenDisabled
 									disabled={ control.isDisabled }
 								>
 									{ control.title }

package/src/dropdown-menu-v2/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/dropdown-menu-v2/styles.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';

package/src/dropdown-menu-v2/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 import type { Placement } from '@floating-ui/react-dom';
 

package/src/font-size-picker/font-size-picker-select.tsx

@@ -6,7 +6,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '../custom-select-control';
+import CustomSelectControl from '../custom-select-control-v2/legacy-component';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import type {
 	FontSizePickerSelectProps,

package/src/font-size-picker/index.tsx

@@ -262,7 +262,7 @@ const UnforwardedFontSizePicker = (
 							<FlexItem>
 								<Button
 									disabled={ isDisabled }
-									__experimentalIsFocusable
+									accessibleWhenDisabled
 									onClick={ () => {
 										onChange?.( undefined );
 									} }

package/src/font-size-picker/test/index.tsx

@@ -94,7 +94,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
-				screen.getByRole( 'button', { name: 'Font size' } )
+				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 8 );
@@ -148,7 +148,7 @@ describe( 'FontSizePicker', () => {
 					/>
 				);
 				await user.click(
-					screen.getByRole( 'button', { name: 'Font size' } )
+					screen.getByRole( 'combobox', { name: 'Font size' } )
 				);
 				await user.click(
 					screen.getByRole( 'option', { name: option } )
@@ -200,7 +200,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
-				screen.getByRole( 'button', { name: 'Font size' } )
+				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 8 );
@@ -225,7 +225,7 @@ describe( 'FontSizePicker', () => {
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
-					screen.getByRole( 'button', { name: 'Font size' } )
+					screen.getByRole( 'combobox', { name: 'Font size' } )
 				).toHaveTextContent( option );
 			}
 		);
@@ -291,7 +291,7 @@ describe( 'FontSizePicker', () => {
 					/>
 				);
 				await user.click(
-					screen.getByRole( 'button', { name: 'Font size' } )
+					screen.getByRole( 'combobox', { name: 'Font size' } )
 				);
 				await user.click(
 					screen.getByRole( 'option', { name: option } )
@@ -509,7 +509,7 @@ describe( 'FontSizePicker', () => {
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
-				screen.getByRole( 'button', { name: 'Font size' } )
+				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			await user.click(
 				screen.getByRole( 'option', { name: 'Custom' } )

package/src/font-size-picker/utils.ts

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */

package/src/form-token-field/token.tsx

@@ -74,6 +74,8 @@ export default function Token( {
 				className="components-form-token-field__remove-token"
 				icon={ closeSmall }
 				onClick={ ! disabled ? onClick : undefined }
+				// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.
+				// eslint-disable-next-line no-restricted-syntax
 				disabled={ disabled }
 				label={ messages.remove }
 				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }

package/src/higher-order/navigate-regions/style.scss

@@ -1,22 +1,35 @@
 // Allow the position to be easily overridden to e.g. fixed.
+
+@mixin region-selection-outline {
+	outline: 4px solid $components-color-accent;
+	outline-offset: -4px;
+}
+
+@mixin region-selection-focus {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	content: "";
+	pointer-events: none;
+	@include region-selection-outline;
+	z-index: z-index(".is-focusing-regions {region} :focus::after");
+}
+
 [role="region"] {
 	position: relative;
+
+	// Handles the focus when we programatically send focus to this region
+	&.interface-interface-skeleton__content:focus-visible::after {
+		@include region-selection-focus;
+	}
 }
 
 .is-focusing-regions {
 	[role="region"]:focus::after {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		content: "";
-		pointer-events: none;
-		outline: 4px solid $components-color-accent;
-		outline-offset: -4px;
-		z-index: z-index(".is-focusing-regions {region} :focus::after");
+		@include region-selection-focus;
 	}
-
 	// Fixes for edge cases.
 	// Some of the regions are currently used for layout purposes as 'interface skeleton'
 	// items. When they're absolutely positioned or when they contain absolutely
@@ -33,7 +46,6 @@
 	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
 	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
-		outline: 4px solid $components-color-accent;
-		outline-offset: -4px;
+		@include region-selection-outline;
 	}
 }

package/src/higher-order/with-spoken-messages/index.tsx

@@ -7,8 +7,7 @@ import { speak } from '@wordpress/a11y';
 /** @typedef {import('react').ComponentType} ComponentType */
 
 /**
- * A Higher Order Component used to be provide speak and debounced speak
- * functions.
+ * A Higher Order Component used to provide speak and debounced speak functions.
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
  *

package/src/menu-items-choice/types.ts

@@ -20,7 +20,8 @@ export type MenuItemsChoiceProps = {
 	 * Callback function to be called with the selected choice when user
 	 * selects a new choice.
 	 */
-	onSelect( value: string ): void;
+	onSelect: ( value: string ) => void;
+
 	/**
 	 * Callback function to be called with a choice when user
 	 * hovers over a new choice (will be empty on mouse leave).

package/src/palette-edit/test/index.tsx

@@ -16,6 +16,7 @@ async function clearInput( input: HTMLInputElement ) {
 	await click( input );
 
 	// Press backspace as many times as the input's current value
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	for ( const _ of Array( input.value.length ) ) {
 		await press.Backspace();
 	}

package/src/popover/index.tsx

@@ -13,9 +13,7 @@ import {
 	offset as offsetMiddleware,
 	size,
 } from '@floating-ui/react-dom';
-// eslint-disable-next-line no-restricted-imports
 import type { HTMLMotionProps, MotionProps } from 'framer-motion';
-// eslint-disable-next-line no-restricted-imports
 import { motion } from 'framer-motion';
 
 /**

package/src/popover/utils.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
 import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 

package/src/private-apis.ts

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
 /**
  * Internal dependencies
  */
@@ -14,6 +9,7 @@ import {
 	useCompositeStore as useCompositeStoreV2,
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
+import { default as CustomSelectControlV2Legacy } from './custom-select-control-v2/legacy-component';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
 import {
@@ -39,6 +35,7 @@ lock( privateApis, {
 	CompositeItemV2,
 	CompositeRowV2,
 	useCompositeStoreV2,
+	CustomSelectControlV2Legacy,
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,

package/src/progress-bar/styles.ts

@@ -4,19 +4,28 @@
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../utils';
 
-const animateProgressBar = keyframes( {
-	'0%': {
-		left: '-50%',
-	},
-	'100%': {
-		left: '100%',
-	},
-} );
+function animateProgressBar( isRtl = false ) {
+	const animationDirection = isRtl ? 'right' : 'left';
+
+	return keyframes( {
+		'0%': {
+			[ animationDirection ]: '-50%',
+		},
+		'100%': {
+			[ animationDirection ]: '100%',
+		},
+	} );
+}
 
 // Width of the indicator for the indeterminate progress bar
 export const INDETERMINATE_TRACK_WIDTH = 50;
@@ -67,7 +76,7 @@ export const Indicator = styled.div< {
 					animationDuration: '1.5s',
 					animationTimingFunction: 'ease-in-out',
 					animationIterationCount: 'infinite',
-					animationName: animateProgressBar,
+					animationName: animateProgressBar( isRTL() ),
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
 			: css( {

package/src/radio-group/context.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 
 /**

package/src/radio-group/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/radio-group/radio.tsx

@@ -6,7 +6,6 @@ import { forwardRef, useContext } from '@wordpress/element';
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/range-control/index.tsx

@@ -326,6 +326,8 @@ function UnforwardedRangeControl(
 					<ActionRightWrapper>
 						<Button
 							className="components-range-control__reset"
+							// If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
+							accessibleWhenDisabled={ ! disabled }
 							disabled={ disabled || value === undefined }
 							variant="secondary"
 							size="small"

package/src/range-control/styles/range-control-styles.ts

@@ -168,13 +168,17 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 
 export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
-	left: 0;
 	font-size: 11px;
 	position: absolute;
 	top: 12px;
-	transform: translateX( -50% );
 	white-space: nowrap;
 
+	${ rtl( { left: 0 } ) };
+	${ rtl(
+		{ transform: 'translateX( -50% )' },
+		{ transform: 'translateX( 50% )' }
+	) };
+
 	${ markLabelFill };
 `;
 

package/src/resizable-box/resize-tooltip/utils.ts

@@ -25,7 +25,7 @@ interface UseResizeLabelProps {
 interface UseResizeLabelArgs {
 	axis?: Axis;
 	fadeTimeout: number;
-	onResize( data: { width: number | null; height: number | null } ): void;
+	onResize: ( data: { width: number | null; height: number | null } ) => void;
 	position: Position;
 	showPx: boolean;
 }

package/src/select-control/index.tsx

@@ -13,8 +13,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import InputBase from '../input-control/input-base';
-import { Select } from './styles/select-control-styles';
+import { Select, StyledInputBase } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
@@ -82,7 +81,7 @@ function UnforwardedSelectControl(
 			id={ id }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 		>
-			<InputBase
+			<StyledInputBase
 				className={ classes }
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -127,7 +126,7 @@ function UnforwardedSelectControl(
 							);
 						} ) }
 				</Select>
-			</InputBase>
+			</StyledInputBase>
 		</BaseControl>
 	);
 }

package/src/select-control/styles/select-control-styles.ts

@@ -12,6 +12,7 @@ import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 import { fontSizeStyles } from '../../input-control/styles/input-control-styles';
+import InputBase from '../../input-control/input-base';
 
 interface SelectProps
 	extends Pick<
@@ -28,11 +29,19 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 		return '';
 	}
 
-	return css( {
-		color: COLORS.ui.textDisabled,
-	} );
+	return css`
+		color: ${ COLORS.ui.textDisabled };
+		cursor: default;
+	`;
 };
 
+export const StyledInputBase = styled( InputBase )`
+	color: ${ COLORS.theme.foreground };
+	cursor: pointer;
+
+	${ disabledStyles }
+`;
+
 const sizeStyles = ( {
 	__next40pxDefaultSize,
 	multiple,
@@ -128,17 +137,15 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.gray[ 900 ] };
+		cursor: inherit;
 		display: block;
 		font-family: inherit;
 		margin: 0;
 		width: 100%;
 		max-width: none;
-		cursor: pointer;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 
-		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
 		${ sizePaddings };
@@ -149,6 +156,10 @@ export const Select = styled.select< SelectProps >`
 export const DownArrowWrapper = styled.div`
 	margin-inline-end: ${ space( -1 ) }; // optically adjust the icon
 	line-height: 0;
+
+	path {
+		fill: currentColor;
+	}
 `;
 
 export const InputControlSuffixWrapperWithClickThrough = styled(

package/src/tab-panel/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
 import type { ForwardedRef } from 'react';

package/src/tabs/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/tabs/stories/index.story.tsx

@@ -16,6 +16,8 @@ import Tabs from '..';
 import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
 import DropdownMenu from '../../dropdown-menu';
 import Button from '../../button';
+import Tooltip from '../../tooltip';
+import Icon from '../../icon';
 
 const meta: Meta< typeof Tabs > = {
 	title: 'Components (Experimental)/Tabs',
@@ -110,24 +112,29 @@ const WithTabIconsAndTooltipsTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	return (
 		<Tabs { ...props }>
 			<Tabs.TabList>
-				<Tabs.Tab
-					tabId="tab1"
-					render={
-						<Button icon={ wordpress } label="Tab 1" showTooltip />
-					}
-				/>
-				<Tabs.Tab
-					tabId="tab2"
-					render={
-						<Button icon={ link } label="Tab 2" showTooltip />
-					}
-				/>
-				<Tabs.Tab
-					tabId="tab3"
-					render={
-						<Button icon={ more } label="Tab 3" showTooltip />
-					}
-				/>
+				{ [
+					{
+						id: 'tab1',
+						label: 'Tab one',
+						icon: wordpress,
+					},
+					{
+						id: 'tab2',
+						label: 'Tab two',
+						icon: link,
+					},
+					{
+						id: 'tab3',
+						label: 'Tab three',
+						icon: more,
+					},
+				].map( ( { id, label, icon } ) => (
+					<Tooltip text={ label } key={ id }>
+						<Tabs.Tab tabId={ id } aria-label={ label }>
+							<Icon icon={ icon } />
+						</Tabs.Tab>
+					</Tooltip>
+				) ) }
 			</Tabs.TabList>
 			<Tabs.TabPanel tabId="tab1">
 				<p>Selected tab: Tab 1</p>

package/src/tabs/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**
@@ -16,9 +15,13 @@ export const TabListWrapper = styled.div`
 	display: flex;
 	align-items: stretch;
 	flex-direction: row;
+	text-align: center;
+
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
+		text-align: start;
 	}
+
 	@media not ( prefers-reduced-motion: reduce ) {
 		&.is-animation-enabled::after {
 			transition-property: left, top, width, height;
@@ -36,22 +39,20 @@ export const TabListWrapper = styled.div`
 		outline-offset: -1px;
 	}
 	&:not( [aria-orientation='vertical'] )::after {
-		left: var( --indicator-left );
 		bottom: 0;
+		left: var( --indicator-left );
 		width: var( --indicator-width );
 		height: 0;
 		border-bottom: var( --wp-admin-border-width-focus ) solid
 			${ COLORS.theme.accent };
 	}
 	&[aria-orientation='vertical']::after {
-		/* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */
-		opacity: 0;
-
-		right: 0;
+		z-index: -1;
+		left: 0;
+		width: 100%;
 		top: var( --indicator-top );
 		height: var( --indicator-height );
-		border-right: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+		background-color: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;
 
@@ -61,14 +62,19 @@ export const Tab = styled( Ariakit.Tab )`
 		align-items: center;
 		position: relative;
 		border-radius: 0;
-		height: ${ space( 12 ) };
+		min-height: ${ space(
+			12
+		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+		height: auto;
 		background: transparent;
 		border: none;
 		box-shadow: none;
 		cursor: pointer;
-		padding: 3px ${ space( 4 ) }; // Use padding to offset the [aria-selected="true"] border, this benefits Windows High Contrast mode
+		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
+		padding: ${ space( 4 ) };
 		margin-left: 0;
 		font-weight: 500;
+		text-align: inherit;
 
 		&[aria-disabled='true'] {
 			cursor: default;
@@ -96,7 +102,8 @@ export const Tab = styled( Ariakit.Tab )`
 			pointer-events: none;
 
 			// Draw the indicator.
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			// Outline works for Windows high contrast mode as well.
+			outline: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
 			border-radius: 2px;
 
@@ -110,9 +117,6 @@ export const Tab = styled( Ariakit.Tab )`
 
 		&:focus-visible::before {
 			opacity: 1;
-
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
 		}
 	}
 `;