VisuallyHidden: Recommend @wordpress/ui and migrate usages

packages/block-directory/package.json

@@ -60,6 +60,7 @@
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/ui": "file:../ui",
 		"@wordpress/url": "file:../url",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1"

packages/block-directory/src/components/downloadable-block-list-item/index.js

@@ -7,16 +7,12 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	Tooltip,
-	Spinner,
-	VisuallyHidden,
-	Composite,
-} from '@wordpress/components';
+import { Tooltip, Spinner, Composite } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies

packages/block-editor/src/components/background-image-control/index.js

@@ -16,7 +16,6 @@ import {
 	FlexBlock,
 	FocalPointPicker,
 	MenuItem,
-	VisuallyHidden,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
@@ -25,6 +24,7 @@ import {
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { reset as resetIcon } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -162,7 +162,7 @@ function InspectorImagePreviewItem( {
 					>
 						{ label }
 					</Truncate>
-					<VisuallyHidden as="span">
+					<VisuallyHidden render={ <span /> }>
 						{ imgUrl
 							? sprintf(
 									/* translators: %s: file name */

packages/block-editor/src/components/block-mover/button.js

@@ -7,7 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { Button, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';

packages/block-editor/src/components/block-pattern-setup/index.js

@@ -3,7 +3,8 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-import { Composite, VisuallyHidden } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';

packages/block-editor/src/components/block-patterns-list/index.js

@@ -10,10 +10,10 @@ import { cloneBlock } from '@wordpress/blocks';
 import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	Composite,
-	VisuallyHidden,
 	Tooltip,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, symbol } from '@wordpress/icons';

packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js

@@ -6,13 +6,8 @@ import { useState } from '@wordpress/element';
 import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
-import {
-	Composite,
-	MenuGroup,
-	MenuItem,
-	Popover,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { Composite, MenuGroup, MenuItem, Popover } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies

packages/block-editor/src/components/block-variation-transforms/index.js

@@ -7,9 +7,9 @@ import {
 	Button,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-	VisuallyHidden,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 
@@ -30,7 +30,7 @@ function VariationsButtons( {
 } ) {
 	return (
 		<fieldset className={ className }>
-			<VisuallyHidden as="legend">
+			<VisuallyHidden render={ <legend /> }>
 				{ __( 'Transform to variation' ) }
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (

packages/block-editor/src/components/date-format-picker/index.js

@@ -7,11 +7,11 @@ import { useState, createInterpolateElement } from '@wordpress/element';
 import {
 	TextControl,
 	ExternalLink,
-	VisuallyHidden,
 	ToggleControl,
 	__experimentalVStack as VStack,
 	CustomSelectControl,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 // So that we illustrate the different formats in the dropdown properly, show a date that is
 // somewhat recent, has a day greater than 12, and a month with more than three letters.
@@ -45,7 +45,9 @@ export default function DateFormatPicker( {
 			spacing={ 4 }
 			className="block-editor-date-format-picker"
 		>
-			<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
+			<VisuallyHidden render={ <legend /> }>
+				{ __( 'Date format' ) }
+			</VisuallyHidden>
 			<ToggleControl
 				label={ __( 'Default format' ) }
 				help={ `${ __( 'Example:' ) }  ${ dateI18n(

packages/block-editor/src/components/grid/grid-item-movers.js

@@ -7,11 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import {
-	VisuallyHidden,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import {
 	chevronLeft,
 	chevronUp,

packages/block-editor/src/components/inserter/menu.js

@@ -14,7 +14,8 @@ import {
 	useRef,
 	useLayoutEffect,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
+import { SearchControl, Popover } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -235,7 +236,7 @@ function InserterMenu(
 				</div>
 				{ showInserterHelpPanel && (
 					<div className="block-editor-inserter__tips">
-						<VisuallyHidden as="h2">
+						<VisuallyHidden render={ <h2 /> }>
 							{ __( 'A tip for using the block editor' ) }
 						</VisuallyHidden>
 						<Tips />

packages/block-editor/src/components/inserter/search-results.js

@@ -3,7 +3,7 @@
  */
 import { useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';

packages/block-editor/src/components/link-control/settings.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 
 const noop = () => {};
 
@@ -58,7 +59,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
+			<VisuallyHidden render={ <legend /> }>
 				{ __( 'Currently selected link settings' ) }
 			</VisuallyHidden>
 			{ theSettings }

packages/block-editor/src/components/link-picker/link-picker.js

@@ -5,9 +5,9 @@ import {
 	BaseControl,
 	Button,
 	Popover,
-	VisuallyHidden,
 	useBaseControlProps,
 } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { useState, useId, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

packages/block-editor/src/components/list-view/index.js

@@ -11,10 +11,8 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import {
-	__experimentalTreeGrid as TreeGrid,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import {

packages/block-editor/src/components/responsive-block-control/label.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
 import { _x, sprintf } from '@wordpress/i18n';
 
 export default function ResponsiveBlockControlLabel( {
@@ -27,7 +27,10 @@ export default function ResponsiveBlockControlLabel( {
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
-			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
+			<VisuallyHidden
+				id={ `rbc-desc-${ instanceId }` }
+				render={ <span /> }
+			>
 				{ accessibleLabel }
 			</VisuallyHidden>
 		</>

packages/block-editor/src/utils/test/dom.js

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Required for testing
 import { VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';
-// eslint-disable-next-line @wordpress/use-recommended-components -- Only for testing
 import { VisuallyHidden } from '@wordpress/ui';
 import {
 	getElementBounds,

packages/block-library/package.json

@@ -127,6 +127,7 @@
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
+		"@wordpress/ui": "file:../ui",
 		"@wordpress/upload-media": "file:../upload-media",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",

packages/block-library/src/categories/edit.js

@@ -11,7 +11,6 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
-	VisuallyHidden,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -26,6 +25,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
+import { VisuallyHidden } from '@wordpress/ui';
 import { store as noticeStore } from '@wordpress/notices';
 
 /**
@@ -146,7 +146,8 @@ export default function CategoriesEdit( {
 						}
 					/>
 				) : (
-					<VisuallyHidden as="label" htmlFor={ selectId }>
+					// eslint-disable-next-line jsx-a11y/label-has-associated-control
+					<VisuallyHidden render={ <label htmlFor={ selectId } /> }>
 						{ label ? label : taxonomy?.name }
 					</VisuallyHidden>
 				) }

packages/block-library/src/navigation-link/edit.js

@@ -8,11 +8,7 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	ToolbarButton,
-	ToolbarGroup,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -26,6 +22,7 @@ import {
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { VisuallyHidden } from '@wordpress/ui';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 

packages/block-library/src/navigation-link/link-ui/dialog-wrapper.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Shared BackButton component for consistent navigation across LinkUI sub-components.