Revert "Revert "components: Promote VisuallyHidden from ui into full …

…components (#31244)" (#31882)"

This reverts commit 269f31a.

packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;

packages/components/src/alignment-matrix-control/cell.js

@@ -3,7 +3,7 @@
  */
 import { CompositeItem } from '../composite';
 import Tooltip from '../tooltip';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 /**
  * Internal dependencies

packages/components/src/base-control/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 import {
 	Wrapper,
 	StyledField,

packages/components/src/button/index.js

@@ -15,7 +15,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import Tooltip from '../tooltip';
 import Icon from '../icon';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ];
 

packages/components/src/button/test/index.js

@@ -13,7 +13,7 @@ import { plusCircle } from '@wordpress/icons';
  * Internal dependencies
  */
 import ButtonWithForwardedRef, { Button } from '../';
-import VisuallyHidden from '../../visually-hidden';
+import { VisuallyHidden } from '../../visually-hidden';
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {

packages/components/src/color-picker/hue.js

@@ -43,7 +43,7 @@ import { TAB } from '@wordpress/keycodes';
  */
 import { calculateHueChange } from './utils';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 export class Hue extends Component {
 	constructor() {

packages/components/src/color-picker/inputs.js

@@ -18,7 +18,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import Button from '../button';
 import TextControl from '../text-control';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 import { isValidHex } from './utils';
 
 /* Wrapper for TextControl, only used to handle intermediate state while typing. */

packages/components/src/color-picker/saturation.js

@@ -44,7 +44,7 @@ import { compose, pure, withInstanceId } from '@wordpress/compose';
 import { calculateSaturationChange } from './utils';
 import Button from '../button';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 export class Saturation extends Component {
 	constructor( props ) {

packages/components/src/color-picker/test/__snapshots__/index.js.snap

@@ -39,7 +39,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-4"
 +           id="color-picker-saturation-3"
           >
@@ -86,7 +86,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden"
+                  className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-4"
 +                 id="components-color-picker__hue-description-3"
                 >
@@ -161,7 +161,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-8"
 +           id="color-picker-saturation-7"
           >
@@ -208,7 +208,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden"
+                  className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-8"
 +                 id="components-color-picker__hue-description-7"
                 >
@@ -283,7 +283,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-10"
 +           id="color-picker-saturation-9"
           >
@@ -330,7 +330,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden"
+                  className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-10"
 +                 id="components-color-picker__hue-description-9"
                 >
@@ -405,7 +405,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-6"
 +           id="color-picker-saturation-5"
           >
@@ -452,7 +452,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden"
+                  className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-6"
 +                 id="components-color-picker__hue-description-5"
                 >
@@ -511,7 +511,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-2"
 +           id="color-picker-saturation-1"
           >
@@ -537,7 +537,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden"
+                  className="components-visually-hidden css-wl9e0o-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-2"
 +                 id="components-color-picker__hue-description-1"
                 >
@@ -575,19 +575,53 @@ Snapshot Diff:
 
 exports[`ColorPicker should render color picker 1`] = `
 .emotion-0 {
+  border: 0;
+  clip: rect( 1px, 1px, 1px, 1px );
+  -webkit-clip-path: inset( 50% );
+  -webkit-clip-path: inset( 50% );
+  clip-path: inset( 50% );
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal!important;
+}
+
+.emotion-0:focus {
+  background-color: #edeff0;
+  clip: auto!important;
+  -webkit-clip-path: none;
+  clip-path: none;
+  color: #444;
+  display: block;
+  font-size: 1em;
+  height: auto;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  top: 5px;
+  width: auto;
+  z-index: 100000;
+}
+
+.emotion-6 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
 }
 
-.emotion-2 {
+.emotion-8 {
   margin-bottom: calc(4px * 2);
 }
 
-.components-panel__row .emotion-2 {
+.components-panel__row .emotion-8 {
   margin-bottom: inherit;
 }
 
-.emotion-4 {
+.emotion-10 {
   display: inline-block;
   margin-bottom: calc(4px * 2);
 }
@@ -631,7 +665,7 @@ exports[`ColorPicker should render color picker 1`] = `
           type="button"
         />
         <div
-          className="components-visually-hidden"
+          className="components-visually-hidden emotion-0 emotion-1 emotion-2"
           id="color-picker-saturation-0"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -691,7 +725,7 @@ exports[`ColorPicker should render color picker 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-visually-hidden"
+                className="components-visually-hidden emotion-0 emotion-1 emotion-2"
                 id="components-color-picker__hue-description-0"
               >
                 Move the arrow left or right to change hue.
@@ -708,13 +742,13 @@ exports[`ColorPicker should render color picker 1`] = `
         className="components-color-picker__inputs-fields"
       >
         <div
-          className="components-base-control components-color-picker__inputs-field emotion-0 emotion-1"
+          className="components-base-control components-color-picker__inputs-field emotion-6 emotion-7"
         >
           <div
-            className="components-base-control__field emotion-2 emotion-3"
+            className="components-base-control__field emotion-8 emotion-9"
           >
             <label
-              className="components-base-control__label emotion-4 emotion-5"
+              className="components-base-control__label emotion-10 emotion-11"
               htmlFor="inspector-text-control-0"
             >
               Color value in hexadecimal

packages/components/src/custom-gradient-bar/control-points.js

@@ -18,7 +18,7 @@ import Button from '../button';
 import ColorPicker from '../color-picker';
 import Dropdown from '../dropdown';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 import {
 	addControlPoint,

packages/components/src/external-link/index.js

@@ -14,7 +14,7 @@ import { external } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 import { StyledIcon } from './styles/external-link-styles';
 
 export function ExternalLink(

packages/components/src/font-size-picker/index.js

@@ -17,7 +17,7 @@ import Button from '../button';
 import RangeControl from '../range-control';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import CustomSelectControl from '../custom-select-control';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';

packages/components/src/form-token-field/token.js

@@ -15,7 +15,7 @@ import { closeSmall } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 export default function Token( {
 	value,

packages/components/src/index.js

@@ -141,7 +141,7 @@ export {
 	useCustomUnits as __experimentalUseCustomUnits,
 	parseUnit as __experimentalParseUnit,
 } from './unit-control';
-export { default as VisuallyHidden } from './visually-hidden';
+export { VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';
 export {

packages/components/src/input-control/label.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 import { Label as BaseLabel } from './styles/input-control-styles';
 
 export default function Label( {

packages/components/src/navigation/menu/menu-title-search.js

@@ -15,7 +15,7 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import Button from '../../button';
-import VisuallyHidden from '../../visually-hidden';
+import { VisuallyHidden } from '../../visually-hidden';
 import withSpokenMessages from '../../higher-order/with-spoken-messages';
 import { useNavigationMenuContext } from './context';
 import { useNavigationContext } from '../context';

packages/components/src/style.scss

@@ -46,4 +46,3 @@
 @import "./toolbar-button/style.scss";
 @import "./toolbar-group/style.scss";
 @import "./tooltip/style.scss";
-@import "./visually-hidden/style.scss";

packages/components/src/ui/form-group/form-group-label.js

@@ -7,7 +7,7 @@ import { memo } from '@wordpress/element';
  * Internal dependencies
  */
 import { ControlLabel } from '../control-label';
-import VisuallyHidden from '../../visually-hidden';
+import { VisuallyHidden } from '../../visually-hidden';
 
 /**
  * @param {import('../context').PolymorphicComponentProps<import('./types').FormGroupLabelProps, 'label'>} props
@@ -18,7 +18,7 @@ function FormGroupLabel( { children, id, labelHidden = false, ...props } ) {
 
 	if ( labelHidden ) {
 		return (
-			<VisuallyHidden as="label" htmlFor={ id }>
+			<VisuallyHidden as="label" htmlFor={ id?.toString() }>
 				{ children }
 			</VisuallyHidden>
 		);

packages/components/src/ui/index.js

@@ -3,4 +3,3 @@ export * from './control-label';
 export * from './form-group';
 export * from './shortcut';
 export * from './spinner';
-export * from './visually-hidden';