From 2b50adcdbfb6f1489c5f72935a274f14b9970bfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 2 Mar 2020 14:35:34 +0100
Subject: [PATCH 01/17] First stab at using VisuallyHidden component

---
 .../src/components/block-navigation/list.js   |  6 ++---
 .../components/button-block-appender/index.js |  6 ++---
 .../src/components/inserter/menu.js           | 12 ++++++---
 .../link-control/settings-drawer.js           |  6 ++---
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../responsive-block-control/label.js         |  8 +++---
 .../responsive-block-control/style.scss       | 23 ++++++++---------
 packages/block-library/src/archives/index.php |  2 +-
 packages/block-library/src/categories/edit.js |  5 ++--
 packages/block-library/src/gallery/gallery.js | 12 +++++----
 packages/block-library/src/search/index.php   |  2 +-
 .../custom-gradient-picker/control-points.js  |  5 ++--
 .../src/custom-select-control/index.js        | 25 ++++++++++++++++---
 13 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 32c8eba5049e89..55a1b28848b9dd 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/packages/block-editor/src/components/block-navigation/list.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import {
 	__experimentalGetBlockLabel as getBlockLabel,
 	getBlockType,
@@ -58,9 +58,9 @@ export default function BlockNavigationList( {
 								<BlockIcon icon={ blockType.icon } showColors />
 								{ getBlockLabel( blockType, block.attributes ) }
 								{ isSelected && (
-									<span className="screen-reader-text">
+									<VisuallyHidden as="span">
 										{ __( '(selected block)' ) }
-									</span>
+									</VisuallyHidden>
 								) }
 							</Button>
 						</div>
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index 371ef144e7a160..91de376e909117 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip } from '@wordpress/components';
+import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
 
@@ -62,9 +62,7 @@ function ButtonBlockAppender( {
 							disabled={ disabled }
 							label={ label }
 						>
-							<span className="screen-reader-text">
-								{ label }
-							</span>
+							<VisuallyHidden as="span">{ label }</VisuallyHidden>
 							<Icon icon={ plus } />
 						</Button>
 					</Tooltip>
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 1cff0dd71c0737..69b23a6eba1ce1 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -20,7 +20,11 @@ import scrollIntoView from 'dom-scroll-into-view';
 import { speak } from '@wordpress/a11y';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
-import { PanelBody, withSpokenMessages } from '@wordpress/components';
+import {
+	PanelBody,
+	withSpokenMessages,
+	VisuallyHidden,
+} from '@wordpress/components';
 import {
 	isReusableBlock,
 	createBlock,
@@ -316,12 +320,12 @@ export class InserterMenu extends Component {
 				onKeyDown={ this.onKeyDown }
 			>
 				<div className="block-editor-inserter__main-area">
-					<label
+					<VisuallyHidden
+						as="label"
 						htmlFor={ `block-editor-inserter__search-${ instanceId }` }
-						className="screen-reader-text"
 					>
 						{ __( 'Search for a block' ) }
-					</label>
+					</VisuallyHidden>
 					<input
 						id={ `block-editor-inserter__search-${ instanceId }` }
 						type="search"
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index 34f230a1d14ca9..cdba15d6d4f7b9 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 
 const defaultSettings = [
 	{
@@ -44,9 +44,9 @@ const LinkControlSettingsDrawer = ( {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<legend className="screen-reader-text">
+			<VisuallyHidden as="legend">
 				{ __( 'Currently selected link settings' ) }
-			</legend>
+			</VisuallyHidden>
 			{ theSettings }
 		</fieldset>
 	);
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
index faa5202cd23a8a..857f93071f8b04 100644
--- 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
@@ -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\\"><legend class=\\"screen-reader-text\\">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>"`;
+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>"`;
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
index dba8fe9e310c74..f1445c0872df70 100644
--- a/packages/block-editor/src/components/responsive-block-control/label.js
+++ b/packages/block-editor/src/components/responsive-block-control/label.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
@@ -26,12 +27,9 @@ export default function ResponsiveBlockControlLabel( {
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
-			<span
-				className="screen-reader-text"
-				id={ `rbc-desc-${ instanceId }` }
-			>
+			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
-			</span>
+			</VisuallyHidden>
 		</Fragment>
 	);
 }
diff --git a/packages/block-editor/src/components/responsive-block-control/style.scss b/packages/block-editor/src/components/responsive-block-control/style.scss
index bb1ffd6683accc..336893364e1230 100644
--- a/packages/block-editor/src/components/responsive-block-control/style.scss
+++ b/packages/block-editor/src/components/responsive-block-control/style.scss
@@ -1,15 +1,3 @@
-@mixin screen-reader-text() {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal !important;
-}
 
 .block-editor-responsive-block-control {
 	margin-bottom: $block-padding*2;
@@ -43,5 +31,14 @@
 }
 
 .block-editor-responsive-block-control .components-base-control__help {
-	@include screen-reader-text();
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
 }
diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index 172b1c7c8407ed..ca655f8cfb3950 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -68,7 +68,7 @@ function render_block_core_archives( $attributes ) {
 
 		$label = esc_attr( $label );
 
-		$block_content = '<label class="screen-reader-text" for="' . $dropdown_id . '">' . $title . '</label>
+		$block_content = '<label class="components-visually-hidden" for="' . $dropdown_id . '">' . $title . '</label>
 	<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
 	<option value="">' . $label . '</option>' . $archives . '</select>';
 
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 7fb05234a6743f..b17f3007b4329d 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -11,6 +11,7 @@ import {
 	Placeholder,
 	Spinner,
 	ToggleControl,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
@@ -136,9 +137,9 @@ class CategoriesEdit extends Component {
 		const selectId = `blocks-category-select-${ instanceId }`;
 		return (
 			<>
-				<label htmlFor={ selectId } className="screen-reader-text">
+				<VisuallyHidden as="label" htmlFor={ selectId }>
 					{ __( 'Categories' ) }
-				</label>
+				</VisuallyHidden>
 				<select
 					id={ selectId }
 					className="wp-block-categories__dropdown"
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 94eb4b16f6d93e..b9b588012ec869 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -40,9 +41,9 @@ export const Gallery = ( props ) => {
 		images,
 	} = attributes;
 
-	const captionClassNames = classnames( 'blocks-gallery-caption', {
-		'screen-reader-text': ! isSelected && RichText.isEmpty( caption ),
-	} );
+	const shouldHideCaption = ! isSelected && RichText.isEmpty( caption );
+	const CaptionComponent = shouldHideCaption ? VisuallyHidden : RichText;
+	const captionProps = shouldHideCaption ? { as: RichText } : {};
 
 	return (
 		<figure
@@ -91,14 +92,15 @@ export const Gallery = ( props ) => {
 				} ) }
 			</ul>
 			{ mediaPlaceholder }
-			<RichText
+			<CaptionComponent
 				tagName="figcaption"
-				className={ captionClassNames }
+				className="blocks-gallery-caption"
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }
 				unstableOnFocus={ onFocusGalleryCaption }
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
+				{ ...captionProps }
 			/>
 		</figure>
 	);
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 5face0b9298990..9440acb642f092 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -27,7 +27,7 @@ function render_block_core_search( $attributes ) {
 		);
 	} else {
 		$label_markup = sprintf(
-			'<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>',
+			'<label for="%s" class="wp-block-search__label components-visually-hidden">%s</label>',
 			$input_id,
 			__( 'Search' )
 		);
diff --git a/packages/components/src/custom-gradient-picker/control-points.js b/packages/components/src/custom-gradient-picker/control-points.js
index 4b114d73174398..e6e84d96ae8bfc 100644
--- a/packages/components/src/custom-gradient-picker/control-points.js
+++ b/packages/components/src/custom-gradient-picker/control-points.js
@@ -16,6 +16,7 @@ import { useInstanceId } from '@wordpress/compose';
 import Button from '../button';
 import ColorPicker from '../color-picker';
 import Dropdown from '../dropdown';
+import VisuallyHidden from '../visually-hidden';
 import {
 	getGradientWithColorAtIndexChanged,
 	getGradientWithControlPointRemoved,
@@ -116,11 +117,11 @@ function ControlPointButton( {
 				} }
 				{ ...additionalProps }
 			/>
-			<div className="screen-reader-text" id={ descriptionId }>
+			<VisuallyHidden as="div" 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.'
 				) }
-			</div>
+			</VisuallyHidden>
 		</ControlPointKeyboardMove>
 	);
 }
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 94f63d6c8d41f5..7cea0a4970e7df 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -11,7 +11,7 @@ import { Icon, check, chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { Button } from '../';
+import { Button, VisuallyHidden } from '../';
 
 const itemToString = ( item ) => item && item.name;
 // This is needed so that in Windows, where
@@ -91,6 +91,9 @@ export default function CustomSelectControl( {
 	) {
 		delete menuProps[ 'aria-activedescendant' ];
 	}
+
+	const LabelComponent = hideLabelFromVision ? VisuallyHidden : 'label';
+	const labelProps = hideLabelFromVision ? { as: 'label' } : {};
 	return (
 		<div
 			className={ classnames(
@@ -99,7 +102,22 @@ export default function CustomSelectControl( {
 			) }
 		>
 			{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ }
-			<label
+			<VisuallyHidden
+				as="label"
+				shouldBeHidden={ hideLabelFromVision }
+				{ ...getLabelProps( {
+					className: classnames(
+						'components-custom-select-control__label',
+						{
+							'screen-reader-text': hideLabelFromVision,
+						}
+					),
+				} ) }
+			>
+				{ label }
+			</VisuallyHidden>
+
+			<LabelComponent
 				{ ...getLabelProps( {
 					className: classnames(
 						'components-custom-select-control__label',
@@ -108,9 +126,10 @@ export default function CustomSelectControl( {
 						}
 					),
 				} ) }
+				{ ...labelProps }
 			>
 				{ label }
-			</label>
+			</LabelComponent>
 			<Button
 				{ ...getToggleButtonProps( {
 					// This is needed because some speech recognition software don't support `aria-labelledby`.

From 1da480de7079e297c186fbcf2db6da874c93f326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 3 Mar 2020 13:32:22 +0100
Subject: [PATCH 02/17] Completely replace screen-reader-text with
 <VisuallyHidden />

---
 package.json                                  |  2 +-
 .../src/components/block-navigation/list.js   |  2 +-
 .../link-control/settings-drawer.js           |  4 +-
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../responsive-block-control/label.js         |  2 +-
 .../test/__snapshots__/index.js.snap          |  2 +-
 packages/block-library/src/categories/edit.js |  4 +-
 .../embed/test/__snapshots__/index.js.snap    |  4 +-
 packages/block-library/src/gallery/gallery.js | 29 +++++++-----
 packages/components/src/button/style.scss     |  2 +-
 .../components/src/color-picker/inputs.js     |  8 ++--
 .../custom-gradient-picker/control-points.js  |  2 +-
 .../src/custom-select-control/index.js        | 47 +++++++------------
 .../components/src/external-link/index.js     |  2 +-
 .../components/src/font-size-picker/index.js  |  7 +--
 .../components/src/form-token-field/token.js  |  4 +-
 .../components/admin-notices/test/index.js    |  4 +-
 .../components/post-preview-button/index.js   |  6 +--
 .../test/__snapshots__/index.js.snap          | 12 ++---
 .../src/components/post-text-editor/index.js  | 12 ++---
 .../editor/src/components/post-title/index.js | 13 +++--
 .../src/components/post-visibility/index.js   |  7 +--
 storybook/stories/playground/reset.scss       | 16 -------
 storybook/test/__snapshots__/index.js.snap    | 34 ++++++++------
 24 files changed, 101 insertions(+), 126 deletions(-)

diff --git a/package.json b/package.json
index 1e08e1aa9c03ea..bb68228665cd64 100644
--- a/package.json
+++ b/package.json
@@ -209,7 +209,7 @@
 		"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
 		"test-e2e:watch": "npm run test-e2e -- --watch",
 		"test-performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
-		"test-php": "npm run lint-php && npm run test-unit-php",
+		"test-php": "npm run lint-php && npm run test-unit-php", 
 		"test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
 		"test-unit:update": "npm run test-unit -- --updateSnapshot",
 		"test-unit:watch": "npm run test-unit -- --watch",
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 55a1b28848b9dd..993ba1272a397a 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/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 as="span">
+									<VisuallyHidden>
 										{ __( '(selected block)' ) }
 									</VisuallyHidden>
 								) }
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index cdba15d6d4f7b9..bededd28f6af21 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -44,8 +44,8 @@ const LinkControlSettingsDrawer = ( {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
-				{ __( 'Currently selected link settings' ) }
+			<VisuallyHidden>
+				<legend>{ __( 'Currently selected link settings' ) }</legend>
 			</VisuallyHidden>
 			{ theSettings }
 		</fieldset>
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
index 857f93071f8b04..40cef307d514ce 100644
--- 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
@@ -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\\"><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>"`;
+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>"`;
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
index f1445c0872df70..84a92bb337b92c 100644
--- a/packages/block-editor/src/components/responsive-block-control/label.js
+++ b/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 as="span" id={ `rbc-desc-${ instanceId }` }>
+			<VisuallyHidden id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
 			</VisuallyHidden>
 		</Fragment>
diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
index 50527efe610212..fc1b0a65e95a14 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
+++ b/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><span class=\\"screen-reader-text\\" 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>"`;
+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>"`;
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index b17f3007b4329d..ef63da087e75b1 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -137,8 +137,8 @@ class CategoriesEdit extends Component {
 		const selectId = `blocks-category-select-${ instanceId }`;
 		return (
 			<>
-				<VisuallyHidden as="label" htmlFor={ selectId }>
-					{ __( 'Categories' ) }
+				<VisuallyHidden>
+					<label htmlFor={ selectId }>{ __( 'Categories' ) }</label>
 				</VisuallyHidden>
 				<select
 					id={ selectId }
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index cd54f37827706f..4d0859d949d2ce 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/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
-        <span
+        <div
           class="components-visually-hidden"
         >
           (opens in a new tab)
-        </span>
+        </div>
         <svg
           aria-hidden="true"
           class="components-external-link__icon"
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index b9b588012ec869..fbe2fcdf3d9506 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -41,9 +41,17 @@ export const Gallery = ( props ) => {
 		images,
 	} = attributes;
 
-	const shouldHideCaption = ! isSelected && RichText.isEmpty( caption );
-	const CaptionComponent = shouldHideCaption ? VisuallyHidden : RichText;
-	const captionProps = shouldHideCaption ? { as: RichText } : {};
+	const richTextElem = (
+		<RichText
+			tagName="figcaption"
+			className="blocks-gallery-caption"
+			placeholder={ __( 'Write gallery caption…' ) }
+			value={ caption }
+			unstableOnFocus={ onFocusGalleryCaption }
+			onChange={ ( value ) => setAttributes( { caption: value } ) }
+			inlineToolbar
+		/>
+	);
 
 	return (
 		<figure
@@ -92,16 +100,11 @@ export const Gallery = ( props ) => {
 				} ) }
 			</ul>
 			{ mediaPlaceholder }
-			<CaptionComponent
-				tagName="figcaption"
-				className="blocks-gallery-caption"
-				placeholder={ __( 'Write gallery caption…' ) }
-				value={ caption }
-				unstableOnFocus={ onFocusGalleryCaption }
-				onChange={ ( value ) => setAttributes( { caption: value } ) }
-				inlineToolbar
-				{ ...captionProps }
-			/>
+			{ ! isSelected && RichText.isEmpty( caption ) ? (
+				<VisuallyHidden>{ richTextElem }</VisuallyHidden>
+			) : (
+				richTextElem
+			) }
 		</figure>
 	);
 };
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 0778c339b7a79e..2d0d325d6209f0 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -256,7 +256,7 @@
 
 	// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
 	// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
-	.screen-reader-text {
+	.components-visually-hidden {
 		height: auto;
 	}
 }
diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js
index 3f46d0b3e58f8d..698af9ea4504ce 100644
--- a/packages/components/src/color-picker/inputs.js
+++ b/packages/components/src/color-picker/inputs.js
@@ -177,8 +177,8 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'rgb' ) {
 			return (
 				<fieldset>
-					<VisuallyHidden as="legend">
-						{ __( 'Color value in RGB' ) }
+					<VisuallyHidden>
+						<legend>{ __( 'Color value in RGB' ) }</legend>
 					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
@@ -230,8 +230,8 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'hsl' ) {
 			return (
 				<fieldset>
-					<VisuallyHidden as="legend">
-						{ __( 'Color value in HSL' ) }
+					<VisuallyHidden>
+						<legend>{ __( 'Color value in HSL' ) }</legend>
 					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
diff --git a/packages/components/src/custom-gradient-picker/control-points.js b/packages/components/src/custom-gradient-picker/control-points.js
index e6e84d96ae8bfc..b83093ef4475e1 100644
--- a/packages/components/src/custom-gradient-picker/control-points.js
+++ b/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.'
 				) }
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 7cea0a4970e7df..c4b1badb2b983b 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -92,8 +92,17 @@ export default function CustomSelectControl( {
 		delete menuProps[ 'aria-activedescendant' ];
 	}
 
-	const LabelComponent = hideLabelFromVision ? VisuallyHidden : 'label';
-	const labelProps = hideLabelFromVision ? { as: 'label' } : {};
+	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(
@@ -101,35 +110,11 @@ export default function CustomSelectControl( {
 				className
 			) }
 		>
-			{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ }
-			<VisuallyHidden
-				as="label"
-				shouldBeHidden={ hideLabelFromVision }
-				{ ...getLabelProps( {
-					className: classnames(
-						'components-custom-select-control__label',
-						{
-							'screen-reader-text': hideLabelFromVision,
-						}
-					),
-				} ) }
-			>
-				{ label }
-			</VisuallyHidden>
-
-			<LabelComponent
-				{ ...getLabelProps( {
-					className: classnames(
-						'components-custom-select-control__label',
-						{
-							'screen-reader-text': hideLabelFromVision,
-						}
-					),
-				} ) }
-				{ ...labelProps }
-			>
-				{ label }
-			</LabelComponent>
+			{ hideLabelFromVision ? (
+				<VisuallyHidden> { labelElem } </VisuallyHidden>
+			) : (
+				labelElem
+			) }
 			<Button
 				{ ...getToggleButtonProps( {
 					// This is needed because some speech recognition software don't support `aria-labelledby`.
diff --git a/packages/components/src/external-link/index.js b/packages/components/src/external-link/index.js
index de722d122a0669..5cea3bb3920208 100644
--- a/packages/components/src/external-link/index.js
+++ b/packages/components/src/external-link/index.js
@@ -35,7 +35,7 @@ export function ExternalLink(
 			ref={ ref }
 		>
 			{ children }
-			<VisuallyHidden as="span">
+			<VisuallyHidden>
 				{ /* translators: accessibility text */
 				__( '(opens in a new tab)' ) }
 			</VisuallyHidden>
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 999cc9b27e0959..8a243318934f8d 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -12,6 +12,7 @@ import { textColor } from '@wordpress/icons';
 import Button from '../button';
 import RangeControl from '../range-control';
 import CustomSelectControl from '../custom-select-control';
+import VisuallyHidden from '../visually-hidden';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';
@@ -99,9 +100,9 @@ export default function FontSizePicker( {
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
 	return (
 		<fieldset className="components-font-size-picker">
-			<legend className="screen-reader-text">
-				{ __( 'Font size' ) }
-			</legend>
+			<VisuallyHidden>
+				<legend>{ __( 'Font size' ) }</legend>
+			</VisuallyHidden>
 			<div className="components-font-size-picker__controls">
 				{ fontSizes.length > 0 && (
 					<CustomSelectControl
diff --git a/packages/components/src/form-token-field/token.js b/packages/components/src/form-token-field/token.js
index 37fbf536369195..bf2401ce0ef0d9 100644
--- a/packages/components/src/form-token-field/token.js
+++ b/packages/components/src/form-token-field/token.js
@@ -62,9 +62,7 @@ export default function Token( {
 				className="components-form-token-field__token-text"
 				id={ `components-form-token-field__token-text-${ instanceId }` }
 			>
-				<VisuallyHidden as="span">
-					{ termPositionAndCount }
-				</VisuallyHidden>
+				<VisuallyHidden>{ termPositionAndCount }</VisuallyHidden>
 				<span aria-hidden="true">{ transformedValue }</span>
 			</span>
 
diff --git a/packages/edit-post/src/components/admin-notices/test/index.js b/packages/edit-post/src/components/admin-notices/test/index.js
index 792fe785b78ae0..17ae70a5d41b4a 100644
--- a/packages/edit-post/src/components/admin-notices/test/index.js
+++ b/packages/edit-post/src/components/admin-notices/test/index.js
@@ -19,7 +19,9 @@ describe( 'AdminNotices', () => {
 					<p>My <strong>notice</strong> text</p>
 					<p>My second line of text</p>
 					<button type="button" class="notice-dismiss">
-						<span class="screen-reader-text">Dismiss this notice.</span>
+						<div class="components-visually-hidden">
+							<span>Dismiss this notice.</span>
+						</div>
 					</button>
 				</div>
 				<div class="notice notice-warning">Warning</div>
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 9226451b3aef32..f7b29f15758813 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Component, createRef, renderToString } from '@wordpress/element';
-import { Button, Path, SVG } from '@wordpress/components';
+import { Button, Path, SVG, VisuallyHidden } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
@@ -207,10 +207,10 @@ export class PostPreviewButton extends Component {
 				{ this.props.textContent
 					? this.props.textContent
 					: _x( 'Preview', 'imperative verb' ) }
-				<span className="screen-reader-text">
+				<VisuallyHidden>
 					{ /* translators: accessibility text */
 					__( '(opens in a new tab)' ) }
-				</span>
+				</VisuallyHidden>
 			</Button>
 		);
 	}
diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
index 43be77565caa5e..3e211f0adc4661 100644
--- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
@@ -10,11 +10,9 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`]
   target="wp-preview-1"
 >
   Preview
-  <span
-    className="screen-reader-text"
-  >
+  <VisuallyHidden>
     (opens in a new tab)
-  </span>
+  </VisuallyHidden>
 </ForwardRef(Button)>
 `;
 
@@ -28,10 +26,8 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
   target="wp-preview-1"
 >
   Preview
-  <span
-    className="screen-reader-text"
-  >
+  <VisuallyHidden>
     (opens in a new tab)
-  </span>
+  </VisuallyHidden>
 </ForwardRef(Button)>
 `;
diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js
index dcfd611ea60115..193cc268b70839 100644
--- a/packages/editor/src/components/post-text-editor/index.js
+++ b/packages/editor/src/components/post-text-editor/index.js
@@ -11,6 +11,7 @@ import { Component } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/components';
 
 export class PostTextEditor extends Component {
 	constructor() {
@@ -67,12 +68,11 @@ export class PostTextEditor extends Component {
 		const { instanceId } = this.props;
 		return (
 			<>
-				<label
-					htmlFor={ `post-content-${ instanceId }` }
-					className="screen-reader-text"
-				>
-					{ __( 'Type text or HTML' ) }
-				</label>
+				<VisuallyHidden>
+					<label htmlFor={ `post-content-${ instanceId }` }>
+						{ __( 'Type text or HTML' ) }
+					</label>
+				</VisuallyHidden>
 				<Textarea
 					autoComplete="off"
 					dir="auto"
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index e1702076f81463..d20e3a687f026a 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -13,7 +13,7 @@ import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { withFocusOutside } from '@wordpress/components';
+import { withFocusOutside, VisuallyHidden } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 
 /**
@@ -91,12 +91,11 @@ class PostTitle extends Component {
 				<div className="editor-post-title">
 					<div className={ className }>
 						<div>
-							<label
-								htmlFor={ `post-title-${ instanceId }` }
-								className="screen-reader-text"
-							>
-								{ decodedPlaceholder || __( 'Add title' ) }
-							</label>
+							<VisuallyHidden>
+								<label htmlFor={ `post-title-${ instanceId }` }>
+									{ decodedPlaceholder || __( 'Add title' ) }
+								</label>
+							</VisuallyHidden>
 							<Textarea
 								id={ `post-title-${ instanceId }` }
 								className="editor-post-title__input"
diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js
index 2003bbd7bfcdcb..25810c563da1be 100644
--- a/packages/editor/src/components/post-visibility/index.js
+++ b/packages/editor/src/components/post-visibility/index.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import { VisuallyHidden } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 
@@ -127,12 +128,12 @@ export class PostVisibility extends Component {
 					className="editor-post-visibility__dialog-password"
 					key="password-selector"
 				>
-					<label
+					<VisuallyHidden
+						as="label"
 						htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-						className="screen-reader-text"
 					>
 						{ __( 'Create password' ) }
-					</label>
+					</VisuallyHidden>
 					<input
 						className="editor-post-visibility__dialog-password-input"
 						id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
diff --git a/storybook/stories/playground/reset.scss b/storybook/stories/playground/reset.scss
index e8fca9903cccd8..b98ac098c595ce 100644
--- a/storybook/stories/playground/reset.scss
+++ b/storybook/stories/playground/reset.scss
@@ -1,19 +1,3 @@
-// TODO: screen reader text className should be replaced
-// with a component in the a11y package.
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-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;
-}
-
 :root {
 	@include reset;
 }
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index d89156a72f0511..f254ffaa03483a 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -3025,11 +3025,11 @@ exports[`Storyshots Components/ExternalLink Default 1`] = `
   target="_blank"
 >
   WordPress
-  <span
+  <div
     className="components-visually-hidden"
   >
     (opens in a new tab)
-  </span>
+  </div>
   <svg
     aria-hidden="true"
     className="components-external-link__icon"
@@ -3051,11 +3051,13 @@ exports[`Storyshots Components/FontSizePicker Default 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
-  <legend
-    className="screen-reader-text"
+  <div
+    className="components-visually-hidden"
   >
-    Font size
-  </legend>
+    <legend>
+      Font size
+    </legend>
+  </div>
   <div
     className="components-font-size-picker__controls"
   >
@@ -3342,11 +3344,13 @@ input[type='number'].emotion-18 {
 <fieldset
   className="components-font-size-picker"
 >
-  <legend
-    className="screen-reader-text"
+  <div
+    className="components-visually-hidden"
   >
-    Font size
-  </legend>
+    <legend>
+      Font size
+    </legend>
+  </div>
   <div
     className="components-font-size-picker__controls"
   >
@@ -3538,11 +3542,13 @@ exports[`Storyshots Components/FontSizePicker Without Custom Sizes 1`] = `
 <fieldset
   className="components-font-size-picker"
 >
-  <legend
-    className="screen-reader-text"
+  <div
+    className="components-visually-hidden"
   >
-    Font size
-  </legend>
+    <legend>
+      Font size
+    </legend>
+  </div>
   <div
     className="components-font-size-picker__controls"
   >

From 75662afa06c476affbfbdbadbe32dcf2c72876ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 3 Mar 2020 15:09:47 +0100
Subject: [PATCH 03/17] Consistency changes with as="" property

---
 packages/block-editor/src/components/inserter/menu.js | 11 ++++++-----
 packages/components/src/form-token-field/token.js     |  4 +++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 69b23a6eba1ce1..3c4a3d27ad97c1 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -320,11 +320,12 @@ export class InserterMenu extends Component {
 				onKeyDown={ this.onKeyDown }
 			>
 				<div className="block-editor-inserter__main-area">
-					<VisuallyHidden
-						as="label"
-						htmlFor={ `block-editor-inserter__search-${ instanceId }` }
-					>
-						{ __( 'Search for a block' ) }
+					<VisuallyHidden>
+						<label
+							htmlFor={ `block-editor-inserter__search-${ instanceId }` }
+						>
+							{ __( 'Search for a block' ) }
+						</label>
 					</VisuallyHidden>
 					<input
 						id={ `block-editor-inserter__search-${ instanceId }` }
diff --git a/packages/components/src/form-token-field/token.js b/packages/components/src/form-token-field/token.js
index bf2401ce0ef0d9..37fbf536369195 100644
--- a/packages/components/src/form-token-field/token.js
+++ b/packages/components/src/form-token-field/token.js
@@ -62,7 +62,9 @@ export default function Token( {
 				className="components-form-token-field__token-text"
 				id={ `components-form-token-field__token-text-${ instanceId }` }
 			>
-				<VisuallyHidden>{ termPositionAndCount }</VisuallyHidden>
+				<VisuallyHidden as="span">
+					{ termPositionAndCount }
+				</VisuallyHidden>
 				<span aria-hidden="true">{ transformedValue }</span>
 			</span>
 

From 83db3ff9dc71c53f31a9d15bc0ef6bb19055e1d2 Mon Sep 17 00:00:00 2001
From: Adam Zielinski <adam@adamziel.com>
Date: Tue, 3 Mar 2020 14:39:38 +0100
Subject: [PATCH 04/17] Remove extra space

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bb68228665cd64..1e08e1aa9c03ea 100644
--- a/package.json
+++ b/package.json
@@ -209,7 +209,7 @@
 		"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
 		"test-e2e:watch": "npm run test-e2e -- --watch",
 		"test-performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
-		"test-php": "npm run lint-php && npm run test-unit-php", 
+		"test-php": "npm run lint-php && npm run test-unit-php",
 		"test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
 		"test-unit:update": "npm run test-unit -- --updateSnapshot",
 		"test-unit:watch": "npm run test-unit -- --watch",

From 40aa1fe95d56aaa7b4994c455900398ed55700d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 3 Mar 2020 18:07:21 +0100
Subject: [PATCH 05/17] Formatting

---
 packages/block-editor/src/components/inserter/menu.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 3c4a3d27ad97c1..a3cb5a140643bf 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -321,9 +321,7 @@ export class InserterMenu extends Component {
 			>
 				<div className="block-editor-inserter__main-area">
 					<VisuallyHidden>
-						<label
-							htmlFor={ `block-editor-inserter__search-${ instanceId }` }
-						>
+						<label htmlFor={ `block-editor-inserter__search-${ instanceId }` }>
 							{ __( 'Search for a block' ) }
 						</label>
 					</VisuallyHidden>

From c094af0b53206b2c7ba968232a0df5e9966e848e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 3 Mar 2020 18:09:19 +0100
Subject: [PATCH 06/17] Formatting

---
 packages/block-editor/src/components/inserter/menu.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index a3cb5a140643bf..3c4a3d27ad97c1 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -321,7 +321,9 @@ export class InserterMenu extends Component {
 			>
 				<div className="block-editor-inserter__main-area">
 					<VisuallyHidden>
-						<label htmlFor={ `block-editor-inserter__search-${ instanceId }` }>
+						<label
+							htmlFor={ `block-editor-inserter__search-${ instanceId }` }
+						>
 							{ __( 'Search for a block' ) }
 						</label>
 					</VisuallyHidden>

From a41590301cc215f08d18965adf66d4bb6f317f42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 13:23:38 +0100
Subject: [PATCH 07/17] Restore .screen-reader-text CSS class in PHP files

---
 packages/block-library/src/archives/index.php | 2 +-
 packages/block-library/src/search/index.php   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index ca655f8cfb3950..172b1c7c8407ed 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -68,7 +68,7 @@ function render_block_core_archives( $attributes ) {
 
 		$label = esc_attr( $label );
 
-		$block_content = '<label class="components-visually-hidden" for="' . $dropdown_id . '">' . $title . '</label>
+		$block_content = '<label class="screen-reader-text" for="' . $dropdown_id . '">' . $title . '</label>
 	<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
 	<option value="">' . $label . '</option>' . $archives . '</select>';
 
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 9440acb642f092..5face0b9298990 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -27,7 +27,7 @@ function render_block_core_search( $attributes ) {
 		);
 	} else {
 		$label_markup = sprintf(
-			'<label for="%s" class="wp-block-search__label components-visually-hidden">%s</label>',
+			'<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>',
 			$input_id,
 			__( 'Search' )
 		);

From ff845c5059d6b07ee026868f240fc695d871e35c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 13:58:13 +0100
Subject: [PATCH 08/17] Use as="" instead of extra div

---
 packages/block-editor/src/components/inserter/menu.js | 11 +++++------
 .../src/components/link-control/settings-drawer.js    |  4 ++--
 packages/block-library/src/categories/edit.js         |  4 ++--
 packages/components/src/color-picker/inputs.js        |  4 ++--
 .../src/custom-gradient-picker/control-points.js      |  2 +-
 packages/components/src/font-size-picker/index.js     |  4 +---
 .../src/components/admin-notices/test/index.js        |  6 +++---
 .../editor/src/components/post-text-editor/index.js   |  9 +++++----
 packages/editor/src/components/post-title/index.js    |  9 +++++----
 9 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 3c4a3d27ad97c1..69b23a6eba1ce1 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -320,12 +320,11 @@ export class InserterMenu extends Component {
 				onKeyDown={ this.onKeyDown }
 			>
 				<div className="block-editor-inserter__main-area">
-					<VisuallyHidden>
-						<label
-							htmlFor={ `block-editor-inserter__search-${ instanceId }` }
-						>
-							{ __( 'Search for a block' ) }
-						</label>
+					<VisuallyHidden
+						as="label"
+						htmlFor={ `block-editor-inserter__search-${ instanceId }` }
+					>
+						{ __( 'Search for a block' ) }
 					</VisuallyHidden>
 					<input
 						id={ `block-editor-inserter__search-${ instanceId }` }
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index bededd28f6af21..cdba15d6d4f7b9 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -44,8 +44,8 @@ const LinkControlSettingsDrawer = ( {
 
 	return (
 		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden>
-				<legend>{ __( 'Currently selected link settings' ) }</legend>
+			<VisuallyHidden as="legend">
+				{ __( 'Currently selected link settings' ) }
 			</VisuallyHidden>
 			{ theSettings }
 		</fieldset>
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index ef63da087e75b1..b17f3007b4329d 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -137,8 +137,8 @@ class CategoriesEdit extends Component {
 		const selectId = `blocks-category-select-${ instanceId }`;
 		return (
 			<>
-				<VisuallyHidden>
-					<label htmlFor={ selectId }>{ __( 'Categories' ) }</label>
+				<VisuallyHidden as="label" htmlFor={ selectId }>
+					{ __( 'Categories' ) }
 				</VisuallyHidden>
 				<select
 					id={ selectId }
diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js
index 698af9ea4504ce..2c15192bfd799c 100644
--- a/packages/components/src/color-picker/inputs.js
+++ b/packages/components/src/color-picker/inputs.js
@@ -177,8 +177,8 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'rgb' ) {
 			return (
 				<fieldset>
-					<VisuallyHidden>
-						<legend>{ __( 'Color value in RGB' ) }</legend>
+					<VisuallyHidden as="legend">
+						{ __( 'Color value in RGB' ) }
 					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
diff --git a/packages/components/src/custom-gradient-picker/control-points.js b/packages/components/src/custom-gradient-picker/control-points.js
index b83093ef4475e1..e6e84d96ae8bfc 100644
--- a/packages/components/src/custom-gradient-picker/control-points.js
+++ b/packages/components/src/custom-gradient-picker/control-points.js
@@ -117,7 +117,7 @@ function ControlPointButton( {
 				} }
 				{ ...additionalProps }
 			/>
-			<VisuallyHidden id={ descriptionId }>
+			<VisuallyHidden as="div" 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.'
 				) }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 8a243318934f8d..30c316c0e1b9f3 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -100,9 +100,7 @@ export default function FontSizePicker( {
 	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
 	return (
 		<fieldset className="components-font-size-picker">
-			<VisuallyHidden>
-				<legend>{ __( 'Font size' ) }</legend>
-			</VisuallyHidden>
+			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<div className="components-font-size-picker__controls">
 				{ fontSizes.length > 0 && (
 					<CustomSelectControl
diff --git a/packages/edit-post/src/components/admin-notices/test/index.js b/packages/edit-post/src/components/admin-notices/test/index.js
index 17ae70a5d41b4a..0c291d86e847ac 100644
--- a/packages/edit-post/src/components/admin-notices/test/index.js
+++ b/packages/edit-post/src/components/admin-notices/test/index.js
@@ -19,9 +19,9 @@ describe( 'AdminNotices', () => {
 					<p>My <strong>notice</strong> text</p>
 					<p>My second line of text</p>
 					<button type="button" class="notice-dismiss">
-						<div class="components-visually-hidden">
-							<span>Dismiss this notice.</span>
-						</div>
+						<span class="components-visually-hidden">
+							Dismiss this notice.
+						</span>
 					</button>
 				</div>
 				<div class="notice notice-warning">Warning</div>
diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js
index 193cc268b70839..d0e0626a75f162 100644
--- a/packages/editor/src/components/post-text-editor/index.js
+++ b/packages/editor/src/components/post-text-editor/index.js
@@ -68,10 +68,11 @@ export class PostTextEditor extends Component {
 		const { instanceId } = this.props;
 		return (
 			<>
-				<VisuallyHidden>
-					<label htmlFor={ `post-content-${ instanceId }` }>
-						{ __( 'Type text or HTML' ) }
-					</label>
+				<VisuallyHidden
+					as="label"
+					htmlFor={ `post-content-${ instanceId }` }
+				>
+					{ __( 'Type text or HTML' ) }
 				</VisuallyHidden>
 				<Textarea
 					autoComplete="off"
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index d20e3a687f026a..539e86acbd07d2 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -91,10 +91,11 @@ class PostTitle extends Component {
 				<div className="editor-post-title">
 					<div className={ className }>
 						<div>
-							<VisuallyHidden>
-								<label htmlFor={ `post-title-${ instanceId }` }>
-									{ decodedPlaceholder || __( 'Add title' ) }
-								</label>
+							<VisuallyHidden
+								as="label"
+								htmlFor={`post-title-${instanceId}`}
+							>
+								{ decodedPlaceholder || __( 'Add title' ) }
 							</VisuallyHidden>
 							<Textarea
 								id={ `post-title-${ instanceId }` }

From 9eb725e3a1dda86882a82d2edd2e201d7fb91a4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 13:58:57 +0100
Subject: [PATCH 09/17] Formatting change

---
 packages/editor/src/components/post-title/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index 539e86acbd07d2..3a5f17a8f68536 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -93,7 +93,7 @@ class PostTitle extends Component {
 						<div>
 							<VisuallyHidden
 								as="label"
-								htmlFor={`post-title-${instanceId}`}
+								htmlFor={ `post-title-${ instanceId }` }
 							>
 								{ decodedPlaceholder || __( 'Add title' ) }
 							</VisuallyHidden>

From 571fe7ad0a7c663ca00c24c6d841095ecbc0f32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 14:16:09 +0100
Subject: [PATCH 10/17] Use as="" instead of wrapping elements with
 screen-reader-text class

---
 .../src/components/block-navigation/list.js   |  2 +-
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../responsive-block-control/label.js         |  2 +-
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../embed/test/__snapshots__/index.js.snap    |  4 +--
 .../components/src/color-picker/inputs.js     |  4 +--
 .../custom-gradient-picker/control-points.js  |  2 +-
 .../src/custom-select-control/index.js        | 23 ++++++---------
 .../components/src/external-link/index.js     |  2 +-
 .../components/post-preview-button/index.js   |  2 +-
 .../test/__snapshots__/index.js.snap          |  8 ++++--
 storybook/test/__snapshots__/index.js.snap    | 28 ++++++++-----------
 12 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
index 993ba1272a397a..55a1b28848b9dd 100644
--- a/packages/block-editor/src/components/block-navigation/list.js
+++ b/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>
 								) }
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
index 40cef307d514ce..857f93071f8b04 100644
--- 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
@@ -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>"`;
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
index 84a92bb337b92c..f1445c0872df70 100644
--- a/packages/block-editor/src/components/responsive-block-control/label.js
+++ b/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>
diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
index fc1b0a65e95a14..a5e0beb316a347 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
+++ b/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>"`;
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
index 4d0859d949d2ce..cd54f37827706f 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap
+++ b/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"
diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js
index 2c15192bfd799c..3f46d0b3e58f8d 100644
--- a/packages/components/src/color-picker/inputs.js
+++ b/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
diff --git a/packages/components/src/custom-gradient-picker/control-points.js b/packages/components/src/custom-gradient-picker/control-points.js
index e6e84d96ae8bfc..b83093ef4475e1 100644
--- a/packages/components/src/custom-gradient-picker/control-points.js
+++ b/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.'
 				) }
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index c4b1badb2b983b..f12f79cc23e1f6 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/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( {
diff --git a/packages/components/src/external-link/index.js b/packages/components/src/external-link/index.js
index 5cea3bb3920208..de722d122a0669 100644
--- a/packages/components/src/external-link/index.js
+++ b/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>
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index f7b29f15758813..60689f4d424c98 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/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>
diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
index 3e211f0adc4661..e03484534e4ab0 100644
--- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
+++ b/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)>
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index f254ffaa03483a..0924c77c0008cd 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/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"
   >

From 1d20876e6d47f30e1b584211ace10b018e93ef3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 14:23:12 +0100
Subject: [PATCH 11/17] Remove responsive-block-control/style.css from this PR

---
 .../responsive-block-control/style.scss       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/responsive-block-control/style.scss b/packages/block-editor/src/components/responsive-block-control/style.scss
index 336893364e1230..bb1ffd6683accc 100644
--- a/packages/block-editor/src/components/responsive-block-control/style.scss
+++ b/packages/block-editor/src/components/responsive-block-control/style.scss
@@ -1,3 +1,15 @@
+@mixin screen-reader-text() {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	word-wrap: normal !important;
+}
 
 .block-editor-responsive-block-control {
 	margin-bottom: $block-padding*2;
@@ -31,14 +43,5 @@
 }
 
 .block-editor-responsive-block-control .components-base-control__help {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	word-wrap: normal !important;
+	@include screen-reader-text();
 }

From 735ac0f89af8e0eecedd34acfa186bc024b0f24d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 14:40:40 +0100
Subject: [PATCH 12/17] Ensure <RichText tagName="figcaption" is always a
 direct descendant of <figure>

---
 packages/block-library/src/gallery/gallery.js | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index fbe2fcdf3d9506..924efa93d6b969 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -41,18 +41,6 @@ export const Gallery = ( props ) => {
 		images,
 	} = attributes;
 
-	const richTextElem = (
-		<RichText
-			tagName="figcaption"
-			className="blocks-gallery-caption"
-			placeholder={ __( 'Write gallery caption…' ) }
-			value={ caption }
-			unstableOnFocus={ onFocusGalleryCaption }
-			onChange={ ( value ) => setAttributes( { caption: value } ) }
-			inlineToolbar
-		/>
-	);
-
 	return (
 		<figure
 			className={ classnames( className, {
@@ -100,13 +88,26 @@ export const Gallery = ( props ) => {
 				} ) }
 			</ul>
 			{ mediaPlaceholder }
-			{ ! isSelected && RichText.isEmpty( caption ) ? (
-				<VisuallyHidden>{ richTextElem }</VisuallyHidden>
-			) : (
-				richTextElem
-			) }
+			<RichTextVisibilityHelper
+				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
+				tagName="figcaption"
+				className="blocks-gallery-caption"
+				placeholder={ __( 'Write gallery caption…' ) }
+				value={ caption }
+				unstableOnFocus={ onFocusGalleryCaption }
+				onChange={ ( value ) => setAttributes( { caption: value } ) }
+				inlineToolbar
+			/>
 		</figure>
 	);
 };
 
+function RichTextVisibilityHelper( { isHidden, className, ...richTextProps } ) {
+	return isHidden ? (
+		<VisuallyHidden as={ RichText } { ...richTextProps } />
+	) : (
+		<RichText className={ className } { ...richTextProps } />
+	);
+}
+
 export default Gallery;

From 39ad02f8564f484e0b4cb39dbb753680ce203cf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 15:32:59 +0100
Subject: [PATCH 13/17] Use label props when substituting for label with props

---
 packages/components/src/custom-select-control/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index f12f79cc23e1f6..18f0fb0415e38e 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -99,7 +99,7 @@ export default function CustomSelectControl( {
 			) }
 		>
 			{ hideLabelFromVision ? (
-				<VisuallyHidden as="label"> { label } </VisuallyHidden>
+				<VisuallyHidden as="label" {...getLabelProps()}> { label } </VisuallyHidden>
 			) : (
 				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 				<label

From 8373ae5558537333f46e6d7757f36953f75fb8f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 16 Mar 2020 15:33:59 +0100
Subject: [PATCH 14/17] Formatting

---
 packages/components/src/custom-select-control/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 18f0fb0415e38e..49eb2b51a5c438 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -99,7 +99,9 @@ export default function CustomSelectControl( {
 			) }
 		>
 			{ hideLabelFromVision ? (
-				<VisuallyHidden as="label" {...getLabelProps()}> { label } </VisuallyHidden>
+				<VisuallyHidden as="label" { ...getLabelProps() }>
+					{ label }
+				</VisuallyHidden>
 			) : (
 				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 				<label

From 3d500826b421617ce4f5398ad8b5aeb48f86c22a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 17 Mar 2020 07:28:13 +0100
Subject: [PATCH 15/17] Pass className to both VisuallyHidden and RichText

---
 packages/block-library/src/gallery/gallery.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 924efa93d6b969..d0f0c03d9b3260 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -102,11 +102,11 @@ export const Gallery = ( props ) => {
 	);
 };
 
-function RichTextVisibilityHelper( { isHidden, className, ...richTextProps } ) {
+function RichTextVisibilityHelper( { isHidden, ...richTextProps } ) {
 	return isHidden ? (
 		<VisuallyHidden as={ RichText } { ...richTextProps } />
 	) : (
-		<RichText className={ className } { ...richTextProps } />
+		<RichText { ...richTextProps } />
 	);
 }
 

From af0b823eedb674d9c42286d7e604bb1d5c662151 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 17 Mar 2020 07:31:12 +0100
Subject: [PATCH 16/17] Restore screen-reader-text in AdminNotices test

---
 packages/edit-post/src/components/admin-notices/test/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/admin-notices/test/index.js b/packages/edit-post/src/components/admin-notices/test/index.js
index 0c291d86e847ac..da4bfb21f46ca8 100644
--- a/packages/edit-post/src/components/admin-notices/test/index.js
+++ b/packages/edit-post/src/components/admin-notices/test/index.js
@@ -19,7 +19,7 @@ describe( 'AdminNotices', () => {
 					<p>My <strong>notice</strong> text</p>
 					<p>My second line of text</p>
 					<button type="button" class="notice-dismiss">
-						<span class="components-visually-hidden">
+						<span class="screen-reader-text">
 							Dismiss this notice.
 						</span>
 					</button>

From 9b4a10c81a59dd71956b7f1bb342343270bea77a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 17 Mar 2020 07:33:03 +0100
Subject: [PATCH 17/17] Restore original formatting in
 admin-notices/test/index.js

---
 packages/edit-post/src/components/admin-notices/test/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/admin-notices/test/index.js b/packages/edit-post/src/components/admin-notices/test/index.js
index da4bfb21f46ca8..792fe785b78ae0 100644
--- a/packages/edit-post/src/components/admin-notices/test/index.js
+++ b/packages/edit-post/src/components/admin-notices/test/index.js
@@ -19,9 +19,7 @@ describe( 'AdminNotices', () => {
 					<p>My <strong>notice</strong> text</p>
 					<p>My second line of text</p>
 					<button type="button" class="notice-dismiss">
-						<span class="screen-reader-text">
-							Dismiss this notice.
-						</span>
+						<span class="screen-reader-text">Dismiss this notice.</span>
 					</button>
 				</div>
 				<div class="notice notice-warning">Warning</div>