diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
deleted file mode 100644
index 43a6e4b047698..0000000000000
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// 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>"`;
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index 0445939a366bb..6137b1d80a4e7 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/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-1mm2cvy-View em57xhy0"
             data-wp-c16t={true}
             data-wp-component="VisuallyHidden"
 -           id="color-picker-saturation-4"
@@ -62,7 +62,7 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,32 +95,32 @@
+@@ -95,31 +95,31 @@
                 onMouseDown={[Function bound handleMouseDown]}
                 onTouchMove={[Function bound handleChange]}
                 onTouchStart={[Function bound handleChange]}
@@ -87,9 +87,8 @@ Snapshot Diff:
                   }
                   tabIndex="0"
                 />
-                <div
-                  as="p"
-                  className="components-visually-hidden"
+                <p
+                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
                   data-wp-c16t={true}
                   data-wp-component="VisuallyHidden"
 -                 id="components-color-picker__hue-description-4"
@@ -99,7 +98,7 @@ Snapshot Diff:
                       "WebkitClipPath": "inset( 50% )",
                       "border": 0,
                       "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -154,22 +154,22 @@
+@@ -153,22 +153,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -166,7 +165,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
             data-wp-c16t={true}
             data-wp-component="VisuallyHidden"
 -           id="color-picker-saturation-8"
@@ -189,7 +188,7 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,32 +95,32 @@
+@@ -95,31 +95,31 @@
                 onMouseDown={[Function bound handleMouseDown]}
                 onTouchMove={[Function bound handleChange]}
                 onTouchStart={[Function bound handleChange]}
@@ -214,9 +213,8 @@ Snapshot Diff:
                   }
                   tabIndex="0"
                 />
-                <div
-                  as="p"
-                  className="components-visually-hidden"
+                <p
+                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
                   data-wp-c16t={true}
                   data-wp-component="VisuallyHidden"
 -                 id="components-color-picker__hue-description-8"
@@ -226,7 +224,7 @@ Snapshot Diff:
                       "WebkitClipPath": "inset( 50% )",
                       "border": 0,
                       "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -154,22 +154,22 @@
+@@ -153,22 +153,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -293,7 +291,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
             data-wp-c16t={true}
             data-wp-component="VisuallyHidden"
 -           id="color-picker-saturation-10"
@@ -316,7 +314,7 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,32 +95,32 @@
+@@ -95,31 +95,31 @@
                 onMouseDown={[Function bound handleMouseDown]}
                 onTouchMove={[Function bound handleChange]}
                 onTouchStart={[Function bound handleChange]}
@@ -341,9 +339,8 @@ Snapshot Diff:
                   }
                   tabIndex="0"
                 />
-                <div
-                  as="p"
-                  className="components-visually-hidden"
+                <p
+                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
                   data-wp-c16t={true}
                   data-wp-component="VisuallyHidden"
 -                 id="components-color-picker__hue-description-10"
@@ -353,7 +350,7 @@ Snapshot Diff:
                       "WebkitClipPath": "inset( 50% )",
                       "border": 0,
                       "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -154,22 +154,22 @@
+@@ -153,22 +153,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -420,7 +417,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
             data-wp-c16t={true}
             data-wp-component="VisuallyHidden"
 -           id="color-picker-saturation-6"
@@ -443,7 +440,7 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,32 +95,32 @@
+@@ -95,31 +95,31 @@
                 onMouseDown={[Function bound handleMouseDown]}
                 onTouchMove={[Function bound handleChange]}
                 onTouchStart={[Function bound handleChange]}
@@ -468,9 +465,8 @@ Snapshot Diff:
                   }
                   tabIndex="0"
                 />
-                <div
-                  as="p"
-                  className="components-visually-hidden"
+                <p
+                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
                   data-wp-c16t={true}
                   data-wp-component="VisuallyHidden"
 -                 id="components-color-picker__hue-description-6"
@@ -480,7 +476,7 @@ Snapshot Diff:
                       "WebkitClipPath": "inset( 50% )",
                       "border": 0,
                       "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -154,22 +154,22 @@
+@@ -153,22 +153,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -529,7 +525,7 @@ Snapshot Diff:
 @@ -38,11 +38,11 @@
           />
           <div
-            className="components-visually-hidden"
+            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
             data-wp-c16t={true}
             data-wp-component="VisuallyHidden"
 -           id="color-picker-saturation-2"
@@ -552,10 +548,10 @@ Snapshot Diff:
                   aria-valuemax="1"
                   aria-valuemin="359"
                   aria-valuenow={0}
-@@ -116,11 +116,11 @@
-                <div
-                  as="p"
-                  className="components-visually-hidden"
+@@ -115,11 +115,11 @@
+                />
+                <p
+                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
                   data-wp-c16t={true}
                   data-wp-component="VisuallyHidden"
 -                 id="components-color-picker__hue-description-2"
@@ -565,7 +561,7 @@ Snapshot Diff:
                       "WebkitClipPath": "inset( 50% )",
                       "border": 0,
                       "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -154,22 +154,22 @@
+@@ -153,22 +153,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -594,20 +590,20 @@ Snapshot Diff:
 `;
 
 exports[`ColorPicker should render color picker 1`] = `
-.emotion-0 {
+.emotion-4 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
 }
 
-.emotion-2 {
+.emotion-6 {
   margin-bottom: calc(4px * 2);
 }
 
-.components-panel__row .emotion-2 {
+.components-panel__row .emotion-6 {
   margin-bottom: inherit;
 }
 
-.emotion-4 {
+.emotion-8 {
   display: inline-block;
   margin-bottom: calc(4px * 2);
 }
@@ -651,7 +647,7 @@ exports[`ColorPicker should render color picker 1`] = `
           type="button"
         />
         <div
-          className="components-visually-hidden"
+          className="components-visually-hidden emotion-0 emotion-1"
           data-wp-c16t={true}
           data-wp-component="VisuallyHidden"
           id="color-picker-saturation-0"
@@ -727,9 +723,8 @@ exports[`ColorPicker should render color picker 1`] = `
                 }
                 tabIndex="0"
               />
-              <div
-                as="p"
-                className="components-visually-hidden"
+              <p
+                className="components-visually-hidden emotion-0 emotion-1"
                 data-wp-c16t={true}
                 data-wp-component="VisuallyHidden"
                 id="components-color-picker__hue-description-0"
@@ -750,7 +745,7 @@ exports[`ColorPicker should render color picker 1`] = `
                 }
               >
                 Move the arrow left or right to change hue.
-              </div>
+              </p>
             </div>
           </div>
         </div>
@@ -763,13 +758,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-4 emotion-5"
         >
           <div
-            className="components-base-control__field emotion-2 emotion-3"
+            className="components-base-control__field emotion-6 emotion-7"
           >
             <label
-              className="components-base-control__label emotion-4 emotion-5"
+              className="components-base-control__label emotion-8 emotion-9"
               htmlFor="inspector-text-control-0"
             >
               Color value in hexadecimal
diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
index 24c9d6ef080c4..01b9e65ddc511 100644
--- a/packages/components/src/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -3,17 +3,20 @@
  */
 import { useContextSystem, contextConnect } from '../ui/context';
 import { visuallyHidden } from './styles';
+import { View } from '../view';
 
 /**
  * @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                          forwardedRef
  */
-function VisuallyHidden( props ) {
+function VisuallyHidden( props, forwardedRef ) {
 	const { style: styleProp, ...contextProps } = useContextSystem(
 		props,
 		'VisuallyHidden'
 	);
 	return (
-		<div
+		<View
+			ref={ forwardedRef }
 			{ ...contextProps }
 			style={ { ...visuallyHidden, ...( styleProp || {} ) } }
 		/>
diff --git a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
index 2a2d35499ff81..5c045e322e756 100644
--- a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
+++ b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
 
 exports[`VisuallyHidden should render correctly 1`] = `
 <div
-  class="components-visually-hidden"
+  class="components-visually-hidden emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="VisuallyHidden"
   style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"