@wordpress/components 25.0.0 → 25.1.1

package/build-types/toolbar/toolbar-item/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement, ReactNode, ElementType, HTMLAttributes, RefAttributes } from 'react';
+export type ToolbarItemProps = Omit<HTMLAttributes<any>, 'children'> & {
+    /**
+     * Component type that will be used to render the toolbar item.
+     */
+    as?: ElementType;
+    /**
+     * A function that receives the props that should be spread onto the element
+     * that will be rendered as a toolbar item. If the `as` prop is not provided,
+     * this prop will accept a ReactNode instead.
+     */
+    children?: ReactNode | ((props: HTMLAttributes<any> & RefAttributes<any>) => ReactElement | null);
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/toolbar/toolbar-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar-item/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,SAAS,EACT,WAAW,EACX,cAAc,EACd,aAAa,EACb,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAE,cAAc,CAAE,GAAG,CAAE,EAAE,UAAU,CAAE,GAAG;IAC1E;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EACN,SAAS,GACT,CAAE,CACF,KAAK,EAAE,cAAc,CAAE,GAAG,CAAE,GAAG,aAAa,CAAE,GAAG,CAAE,KAC9C,YAAY,GAAG,IAAI,CAAE,CAAC;CAC9B,CAAC"}

package/build-types/ui/context/index.d.ts

@@ -1,5 +1,5 @@
 export { ContextSystemProvider, useComponentsContext, } from './context-system-provider';
-export { contextConnect, hasConnectNamespace, getConnectNamespace, } from './context-connect';
+export { contextConnect, contextConnectWithoutRef, hasConnectNamespace, getConnectNamespace, } from './context-connect';
 export { useContextSystem } from './use-context-system';
 export * from './wordpress-component';
 //# sourceMappingURL=index.d.ts.map

package/build-types/ui/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,oBAAoB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,oBAAoB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,cAAc,EACd,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,cAAc,uBAAuB,CAAC"}

package/build-types/unit-control/index.d.ts

@@ -1,7 +1,4 @@
-/**
- * External dependencies
- */
-import type { FocusEventHandler } from 'react';
+/// <reference types="react" />
 import type { UnitControlOnChangeCallback } from './types';
 /**
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
@@ -25,8 +22,8 @@ export declare const UnitControl: import("react").ForwardRefExoticComponent<Omit
     onUnitChange?: UnitControlOnChangeCallback | undefined;
     unit?: string | undefined;
     value?: string | number | undefined;
-    onBlur?: FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
-    onFocus?: FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement | HTMLSelectElement> | undefined;
 } & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "defaultValue" | "onChange" | "value" | "name" | "color" | "height" | "translate" | "width" | "hidden" | "size" | "style" | "help" | "multiple" | "disabled" | "key" | "children" | "form" | "label" | "slot" | "title" | "pattern" | "as" | "id" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "max" | "min" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "required" | "src" | "alt" | "accept" | "capture" | "checked" | "enterKeyHint" | "__next36pxDefaultSize" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer" | "hideHTMLArrows" | "isShiftStepEnabled" | "shiftStep" | "disableUnits" | "unit" | "isUnitSelectTabbable" | "units" | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
 export { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';
 export default UnitControl;

package/build-types/unit-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAwBf,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AA8P7E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;y+KAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AA0BA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAkM7E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;y+KAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}

package/build-types/unit-control/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/unit-control/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAkB5C,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,WAAW,CAC7B,CAAC;AAK5B;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAE,OAAO,WAAW,CACxC,CAAC;AAU5B;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,cAAc,CAAE,OAAO,WAAW,CAC5C,CAAC;AAS5B;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAE,OAAO,WAAW,CACpC,CAAC;AAM5B;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAE,OAAO,WAAW,CAgB/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/unit-control/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAkB5C,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,WAAW,CAC7B,CAAC;AAK5B;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAE,OAAO,WAAW,CACxC,CAAC;AAM5B;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,cAAc,CAAE,OAAO,WAAW,CAC5C,CAAC;AAS5B;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAE,OAAO,WAAW,CACpC,CAAC;AAM5B;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAE,OAAO,WAAW,CAgB/D,CAAC"}

package/build-types/unit-control/unit-select-control.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-/**
- * Internal dependencies
- */
-import type { WordPressComponentProps } from '../ui/context';
-import type { UnitSelectControlProps } from './types';
-export default function UnitSelectControl({ className, isUnitSelectTabbable: isTabbable, onChange, size, unit, units, ...props }: WordPressComponentProps<UnitSelectControlProps, 'select', false>): JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../input-control/types").InputControlProps, "size"> & {
+    isUnitSelectTabbable?: boolean | undefined;
+    onChange?: import("./types").UnitControlOnChangeCallback | undefined;
+    unit?: string | undefined;
+    units?: import("./types").WPUnitControlUnit[] | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "key" | keyof import("react").SelectHTMLAttributes<HTMLSelectElement>>, "onChange" | "size" | "children" | "as" | "unit" | "isUnitSelectTabbable" | "units"> & import("react").RefAttributes<any>>;
+export default _default;
 //# sourceMappingURL=unit-select-control.d.ts.map

package/build-types/unit-control/unit-select-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unit-select-control.d.ts","sourceRoot":"","sources":["../../src/unit-control/unit-select-control.tsx"],"names":[],"mappings":";AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,SAAS,EACT,oBAAoB,EAAE,UAAiB,EACvC,QAAQ,EACR,IAAgB,EAChB,IAAW,EACX,KAAiB,EACjB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAE,eAqCpE"}
+{"version":3,"file":"unit-select-control.d.ts","sourceRoot":"","sources":["../../src/unit-control/unit-select-control.tsx"],"names":[],"mappings":";;;;;;;AAqEA,wBAA+C"}

package/build-types/utils/config-values.d.ts

@@ -51,6 +51,7 @@ declare const _default: {
     cardPaddingSmall: string;
     cardPaddingMedium: string;
     cardPaddingLarge: string;
+    popoverShadow: string;
     surfaceBackgroundColor: "#fff";
     surfaceBackgroundSubtleColor: string;
     surfaceBackgroundTintColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.0.0",
+	"version": "25.1.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,6 +30,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
+		"@ariakit/react": "^0.2.10",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -40,23 +41,23 @@
 		"@floating-ui/react-dom": "1.0.0",
 		"@radix-ui/react-dropdown-menu": "^2.0.4",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.34.0",
-		"@wordpress/compose": "^6.11.0",
-		"@wordpress/date": "^4.34.0",
-		"@wordpress/deprecated": "^3.34.0",
-		"@wordpress/dom": "^3.34.0",
-		"@wordpress/element": "^5.11.0",
-		"@wordpress/escape-html": "^2.34.0",
-		"@wordpress/hooks": "^3.34.0",
-		"@wordpress/html-entities": "^3.34.0",
-		"@wordpress/i18n": "^4.34.0",
-		"@wordpress/icons": "^9.25.0",
-		"@wordpress/is-shallow-equal": "^4.34.0",
-		"@wordpress/keycodes": "^3.34.0",
-		"@wordpress/primitives": "^3.32.0",
-		"@wordpress/private-apis": "^0.16.0",
-		"@wordpress/rich-text": "^6.11.0",
-		"@wordpress/warning": "^2.34.0",
+		"@wordpress/a11y": "^3.35.1",
+		"@wordpress/compose": "^6.12.1",
+		"@wordpress/date": "^4.35.1",
+		"@wordpress/deprecated": "^3.35.1",
+		"@wordpress/dom": "^3.35.1",
+		"@wordpress/element": "^5.12.1",
+		"@wordpress/escape-html": "^2.35.1",
+		"@wordpress/hooks": "^3.35.1",
+		"@wordpress/html-entities": "^3.35.1",
+		"@wordpress/i18n": "^4.35.1",
+		"@wordpress/icons": "^9.26.1",
+		"@wordpress/is-shallow-equal": "^4.35.1",
+		"@wordpress/keycodes": "^3.35.1",
+		"@wordpress/primitives": "^3.33.1",
+		"@wordpress/private-apis": "^0.17.1",
+		"@wordpress/rich-text": "^6.12.1",
+		"@wordpress/warning": "^2.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
+	"gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
 }

package/src/autocomplete/autocompleter-ui.tsx

@@ -13,7 +13,9 @@ import {
 	useState,
 } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,7 +25,7 @@ import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
 import { createPortal } from 'react-dom';
-import type { AutocompleterUIProps, WPCompleter } from './types';
+import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
 export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 	const useItems = autocompleter.useItems
@@ -69,8 +71,48 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 
 		useOnClickOutside( popoverRef, reset );
 
+		const debouncedSpeak = useDebounce( speak, 500 );
+
+		function announce( options: Array< KeyedOption > ) {
+			if ( ! debouncedSpeak ) {
+				return;
+			}
+			if ( !! options.length ) {
+				if ( filterValue ) {
+					debouncedSpeak(
+						sprintf(
+							/* translators: %d: number of results. */
+							_n(
+								'%d result found, use up and down arrow keys to navigate.',
+								'%d results found, use up and down arrow keys to navigate.',
+								options.length
+							),
+							options.length
+						),
+						'assertive'
+					);
+				} else {
+					debouncedSpeak(
+						sprintf(
+							/* translators: %d: number of results. */
+							_n(
+								'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+								'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+								options.length
+							),
+							options.length
+						),
+						'assertive'
+					);
+				}
+			} else {
+				debouncedSpeak( __( 'No results.' ), 'assertive' );
+			}
+		}
+
 		useLayoutEffect( () => {
 			onChangeOptions( items );
+			announce( items );
 			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
 			// See https://github.com/WordPress/gutenberg/pull/41820
 			// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/autocomplete/index.tsx

@@ -13,13 +13,8 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	useInstanceId,
-	useDebounce,
-	useMergeRefs,
-	useRefEffect,
-} from '@wordpress/compose';
+import { __, _n } from '@wordpress/i18n';
+import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
 	create,
 	slice,
@@ -27,7 +22,6 @@ import {
 	isCollapsed,
 	getTextContent,
 } from '@wordpress/rich-text';
-import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -54,7 +48,6 @@ export function useAutocomplete( {
 	completers,
 	contentRef,
 }: UseAutocompleteProps ) {
-	const debouncedSpeak = useDebounce( speak, 500 );
 	const instanceId = useInstanceId( useAutocomplete );
 	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
 
@@ -137,28 +130,6 @@ export function useAutocomplete( {
 		setAutocompleterUI( null );
 	}
 
-	function announce( options: Array< KeyedOption > ) {
-		if ( ! debouncedSpeak ) {
-			return;
-		}
-		if ( !! options.length ) {
-			debouncedSpeak(
-				sprintf(
-					/* translators: %d: number of results. */
-					_n(
-						'%d result found, use up and down arrow keys to navigate.',
-						'%d results found, use up and down arrow keys to navigate.',
-						options.length
-					),
-					options.length
-				),
-				'assertive'
-			);
-		} else {
-			debouncedSpeak( __( 'No results.' ), 'assertive' );
-		}
-	}
-
 	/**
 	 * Load options for an autocompleter.
 	 *
@@ -169,7 +140,6 @@ export function useAutocomplete( {
 			options.length === filteredOptions.length ? selectedIndex : 0
 		);
 		setFilteredOptions( options );
-		announce( options );
 	}
 
 	function handleKeyDown( event: KeyboardEvent ) {

package/src/border-control/border-control-dropdown/component.tsx

@@ -29,6 +29,15 @@ import { isMultiplePaletteArray } from '../../color-palette/utils';
 import type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';
 import type { ColorProps, DropdownProps } from '../types';
 
+const getAriaLabelColorValue = ( colorValue: string ) => {
+	const isHex = colorValue.startsWith( '#' );
+
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	const displayValue = colorValue.replace( /^var\((.+)\)$/, '$1' );
+
+	return isHex ? displayValue.split( '' ).join( '-' ) : displayValue;
+};
+
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
 	colors: ColorProps[ 'colors' ] | undefined
@@ -67,34 +76,36 @@ const getToggleAriaLabel = (
 ) => {
 	if ( isStyleEnabled ) {
 		if ( colorObject ) {
+			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
 						colorObject.name,
-						colorObject.color,
+						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 						colorObject.name,
-						colorObject.color
+						ariaLabelValue
 				  );
 		}
 
 		if ( colorValue ) {
+			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
-						colorValue,
+						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:".
+						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 						'Border color and style picker. The currently selected color has a value of "%1$s".',
-						colorValue
+						ariaLabelValue
 				  );
 		}
 
@@ -103,18 +114,18 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
+			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 			colorObject.name,
-			colorObject.color
+			getAriaLabelColorValue( colorObject.color )
 		);
 	}
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code e.g.: "#f00:".
+			// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
 			'Border color picker. The currently selected color has a value of "%1$s".',
-			colorValue
+			getAriaLabelColorValue( colorValue )
 		);
 	}
 

package/src/border-control/test/index.js

@@ -215,7 +215,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -226,7 +226,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#4b1d80".'
+						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -239,7 +239,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6". The currently selected style is "dotted".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6". The currently selected style is "dotted".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -252,7 +252,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#4b1d80". The currently selected style is "dashed".'
+						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0". The currently selected style is "dashed".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -280,7 +280,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
+						'Border color picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -294,7 +294,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color has a value of "#4b1d80".'
+						'Border color picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
 					)
 				).toBeInTheDocument();
 			} );

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

@@ -46,15 +46,10 @@ describe( 'BoxControl', () => {
 				name: 'Box Control',
 			} );
 
-			await user.type( input, '100%' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect(
-				screen.getByRole( 'combobox', {
-					name: 'Select unit',
-				} )
-			).toHaveValue( '%' );
 		} );
 	} );
 
@@ -67,20 +62,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled', async () => {
@@ -91,20 +81,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
@@ -115,20 +100,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should persist cleared value when focus changes', async () => {
@@ -141,15 +121,10 @@ describe( 'BoxControl', () => {
 				name: 'Box Control',
 			} );
 
-			await user.type( input, '100%' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect(
-				screen.getByRole( 'combobox', {
-					name: 'Select unit',
-				} )
-			).toHaveValue( '%' );
 
 			await user.clear( input );
 			expect( input ).toHaveValue( '' );
@@ -178,9 +153,8 @@ describe( 'BoxControl', () => {
 
 			await user.type(
 				screen.getByRole( 'textbox', { name: 'Top' } ),
-				'100px'
+				'100'
 			);
-			await user.keyboard( '{Enter}' );
 
 			expect(
 				screen.getByRole( 'textbox', { name: 'Top' } )
@@ -194,12 +168,6 @@ describe( 'BoxControl', () => {
 			expect(
 				screen.getByRole( 'textbox', { name: 'Left' } )
 			).not.toHaveValue();
-
-			screen
-				.getAllByRole( 'combobox', { name: 'Select unit' } )
-				.forEach( ( combobox ) => {
-					expect( combobox ).toHaveValue( 'px' );
-				} );
 		} );
 
 		it( 'should update a whole axis when value is changed when unlinked', async () => {
@@ -215,9 +183,8 @@ describe( 'BoxControl', () => {
 				screen.getByRole( 'textbox', {
 					name: 'Vertical',
 				} ),
-				'100px'
+				'100'
 			);
-			await user.keyboard( '{Enter}' );
 
 			expect(
 				screen.getByRole( 'textbox', { name: 'Vertical' } )
@@ -225,12 +192,6 @@ describe( 'BoxControl', () => {
 			expect(
 				screen.getByRole( 'textbox', { name: 'Horizontal' } )
 			).not.toHaveValue();
-
-			screen
-				.getAllByRole( 'combobox', { name: 'Select unit' } )
-				.forEach( ( combobox ) => {
-					expect( combobox ).toHaveValue( 'px' );
-				} );
 		} );
 	} );
 
@@ -321,23 +282,30 @@ describe( 'BoxControl', () => {
 	describe( 'onChange updates', () => {
 		it( 'should call onChange when values contain more than just CSS units', async () => {
 			const user = userEvent.setup();
-			const setState = jest.fn();
+			const onChangeSpy = jest.fn();
 
-			render( <BoxControl onChange={ setState } /> );
+			render( <BoxControl onChange={ onChangeSpy } /> );
 
-			await user.type(
-				screen.getByRole( 'textbox', {
-					name: 'Box Control',
-				} ),
-				'7.5rem'
-			);
-			await user.keyboard( '{Enter}' );
+			const valueInput = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
-			expect( setState ).toHaveBeenCalledWith( {
-				top: '7.5rem',
-				right: '7.5rem',
-				bottom: '7.5rem',
-				left: '7.5rem',
+			// Typing the first letter of a unit blurs the input and focuses the combobox.
+			await user.type( valueInput, '7r' );
+
+			expect( unitSelect ).toHaveFocus();
+
+			// The correct expected behavior would be for the values to have "rem"
+			// as their unit, but the test environment doesn't seem to change
+			// values on `select` elements when using the keyboard.
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( {
+				top: '7px',
+				right: '7px',
+				bottom: '7px',
+				left: '7px',
 			} );
 		} );