Use as="" instead of wrapping elements with screen-reader-text class

packages/block-editor/src/components/block-navigation/list.js

@@ -58,7 +58,7 @@ export default function BlockNavigationList( {
 								<BlockIcon icon={ blockType.icon } showColors />
 								{ getBlockLabel( blockType, block.attributes ) }
 								{ isSelected && (
-									<VisuallyHidden>
+									<VisuallyHidden as="span">
 										{ __( '(selected block)' ) }
 									</VisuallyHidden>
 								) }

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" 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=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><div class=\\"components-visually-hidden\\"><legend>Currently selected link settings</legend></div><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><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><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" 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=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><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><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;

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

@@ -27,7 +27,7 @@ export default function ResponsiveBlockControlLabel( {
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
-			<VisuallyHidden id={ `rbc-desc-${ instanceId }` }>
+			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
 			</VisuallyHidden>
 		</Fragment>

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><div class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</div></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;

packages/block-library/src/embed/test/__snapshots__/index.js.snap

@@ -60,11 +60,11 @@ exports[`core/embed block edit matches snapshot 1`] = `
         target="_blank"
       >
         Learn more about embeds
-        <div
+        <span
           class="components-visually-hidden"
         >
           (opens in a new tab)
-        </div>
+        </span>
         <svg
           aria-hidden="true"
           class="components-external-link__icon"

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

@@ -230,8 +230,8 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'hsl' ) {
 			return (
 				<fieldset>
-					<VisuallyHidden>
-						<legend>{ __( 'Color value in HSL' ) }</legend>
+					<VisuallyHidden as="legend">
+						{ __( 'Color value in HSL' ) }
 					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input

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

@@ -117,7 +117,7 @@ function ControlPointButton( {
 				} }
 				{ ...additionalProps }
 			/>
-			<VisuallyHidden as="div" id={ descriptionId }>
+			<VisuallyHidden id={ descriptionId }>
 				{ __(
 					'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
 				) }

packages/components/src/custom-select-control/index.js

@@ -91,18 +91,6 @@ export default function CustomSelectControl( {
 	) {
 		delete menuProps[ 'aria-activedescendant' ];
 	}
-
-	const labelElem = (
-		/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-		<label
-			{ ...getLabelProps( {
-				className: 'components-custom-select-control__label',
-			} ) }
-		>
-			{ label }
-		</label>
-	);
-
 	return (
 		<div
 			className={ classnames(
@@ -111,9 +99,16 @@ export default function CustomSelectControl( {
 			) }
 		>
 			{ hideLabelFromVision ? (
-				<VisuallyHidden> { labelElem } </VisuallyHidden>
+				<VisuallyHidden as="label"> { label } </VisuallyHidden>
 			) : (
-				labelElem
+				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
+				<label
+					{ ...getLabelProps( {
+						className: 'components-custom-select-control__label',
+					} ) }
+				>
+					{ label }
+				</label>
 			) }
 			<Button
 				{ ...getToggleButtonProps( {

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

@@ -35,7 +35,7 @@ export function ExternalLink(
 			ref={ ref }
 		>
 			{ children }
-			<VisuallyHidden>
+			<VisuallyHidden as="span">
 				{ /* translators: accessibility text */
 				__( '(opens in a new tab)' ) }
 			</VisuallyHidden>

packages/editor/src/components/post-preview-button/index.js

@@ -207,7 +207,7 @@ export class PostPreviewButton extends Component {
 				{ this.props.textContent
 					? this.props.textContent
 					: _x( 'Preview', 'imperative verb' ) }
-				<VisuallyHidden>
+				<VisuallyHidden as="span">
 					{ /* translators: accessibility text */
 					__( '(opens in a new tab)' ) }
 				</VisuallyHidden>

packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap

@@ -10,7 +10,9 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`]
   target="wp-preview-1"
 >
   Preview
-  <VisuallyHidden>
+  <VisuallyHidden
+    as="span"
+  >
     (opens in a new tab)
   </VisuallyHidden>
 </ForwardRef(Button)>
@@ -26,7 +28,9 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
   target="wp-preview-1"
 >
   Preview
-  <VisuallyHidden>
+  <VisuallyHidden
+    as="span"
+  >
     (opens in a new tab)
   </VisuallyHidden>
 </ForwardRef(Button)>

storybook/test/__snapshots__/index.js.snap

@@ -3025,11 +3025,11 @@ exports[`Storyshots Components/ExternalLink Default 1`] = `
   target="_blank"
 >
   WordPress
-  <div
+  <span
     className="components-visually-hidden"
   >
     (opens in a new tab)
-  </div>
+  </span>
   <svg
     aria-hidden="true"
     className="components-external-link__icon"
@@ -3051,13 +3051,11 @@ exports[`Storyshots Components/FontSizePicker Default 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
-  <div
+  <legend
     className="components-visually-hidden"
   >
-    <legend>
-      Font size
-    </legend>
-  </div>
+    Font size
+  </legend>
   <div
     className="components-font-size-picker__controls"
   >
@@ -3344,13 +3342,11 @@ input[type='number'].emotion-18 {
 <fieldset
   className="components-font-size-picker"
 >
-  <div
+  <legend
     className="components-visually-hidden"
   >
-    <legend>
-      Font size
-    </legend>
-  </div>
+    Font size
+  </legend>
   <div
     className="components-font-size-picker__controls"
   >
@@ -3542,13 +3538,11 @@ exports[`Storyshots Components/FontSizePicker Without Custom Sizes 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
-  <div
+  <legend
     className="components-visually-hidden"
   >
-    <legend>
-      Font size
-    </legend>
-  </div>
+    Font size
+  </legend>
   <div
     className="components-font-size-picker__controls"
   >