Use VisuallyHidden component to render hidden text (#6570)

Co-authored-by: Pierre Gordon <pierregordon@protonmail.com> Co-authored-by: Piotr Delawski <piotr.delawski@gmail.com>
ampproject · Aug 27, 2021 · d4d2a7b · d4d2a7b
1 parent 2a43bda
commit d4d2a7b
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 21 deletions.
diff --git a/assets/src/block-editor/components/amp-preview-button.js b/assets/src/block-editor/components/amp-preview-button.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { Button, Icon } from '@wordpress/components';
+import { Button, Icon, VisuallyHidden } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component, createRef, renderToString } from '@wordpress/element';
@@ -226,12 +226,12 @@ class AmpPreviewButton extends Component {
 				ref={ this.buttonRef }
 			>
 				{ ampFilledIcon( { viewBox: '0 0 62 62', width: 18, height: 18 } ) }
-				<span className="screen-reader-text">
+				<VisuallyHidden as="span">
 					{
 						/* translators: accessibility text */
 						__( '(opens in a new tab)', 'amp' )
 					}
-				</span>
+				</VisuallyHidden>
 			</Button>
 		);
 	}

diff --git a/assets/src/components/amp-drawer/index.js b/assets/src/components/amp-drawer/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, VisuallyHidden } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 
 /**
@@ -101,9 +101,9 @@ export function AMPDrawer( { children = null, className, heading, handleType = H
 			{ 'resetting' !== resetStatus && (
 				<PanelBody
 					title={ handleType === HANDLE_TYPE_RIGHT ? (
-						<span className="components-visually-hidden">
+						<VisuallyHidden as="span">
 							{ hiddenTitle }
-						</span>
+						</VisuallyHidden>
 					) : (
 						<div className="amp-drawer__heading">
 							{ heading }

diff --git a/assets/src/components/amp-drawer/style.css b/assets/src/components/amp-drawer/style.css
@@ -116,6 +116,10 @@
 	border-bottom-width: 0;
 }
 
+.amp .amp-drawer__panel-body .components-panel__body-toggle {
+	padding: 0;
+}
+
 .amp-drawer__panel-body-inner {
 	border-top: 1px solid var(--amp-settings-color-border);
 }

diff --git a/assets/src/components/carousel/carousel-nav.js b/assets/src/components/carousel/carousel-nav.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -33,13 +33,13 @@ function Dot( { id, isHighlighted, label, namespace, onClick } ) {
 			onClick={ onClick }
 			aria-label={ label }
 		>
-			<span className="components-visually-hidden">
+			<VisuallyHidden as="span">
 				{ label }
-			</span>
+			</VisuallyHidden>
 			{ isHighlighted && (
-				<span className="components-visually-hidden">
+				<VisuallyHidden as="span">
 					{ __( '(Selected item)', 'amp' ) }
-				</span>
+				</VisuallyHidden>
 			) }
 			<span className={ `${ namespace }__nav-dot` } />
 		</Button>
@@ -88,9 +88,9 @@ export function CarouselNav( {
 				className={ `${ namespace }__prev` }
 				aria-label={ __( 'Previous', 'amp' ) }
 			>
-				<span className="components-visually-hidden">
+				<VisuallyHidden as="span">
 					{ __( 'Previous', 'amp' ) }
-				</span>
+				</VisuallyHidden>
 				<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M5.47729 1.19531L1.18289 5.48906L5.47729 9.78347" stroke="#FAFAFC" strokeWidth="2" strokeLinejoin="round" />
 					<path d="M1.15854 5.48828L10.281 5.48828" stroke="#FAFAFC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -132,9 +132,9 @@ export function CarouselNav( {
 				className={ `${ namespace }__next` }
 				aria-label={ __( 'Next', 'amp' ) }
 			>
-				<span className="components-visually-hidden">
+				<VisuallyHidden as="span">
 					{ __( 'Next', 'amp' ) }
-				</span>
+				</VisuallyHidden>
 				<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M5.95255 1.19531L10.247 5.48906L5.95255 9.78347" stroke="#FAFAFC" strokeWidth="2" strokeLinejoin="round" />
 					<path d="M10.2712 5.48828L1.14868 5.48828" stroke="#FAFAFC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

diff --git a/assets/src/components/template-mode-option/test/__snapshots__/index.js.snap b/assets/src/components/template-mode-option/test/__snapshots__/index.js.snap
diff --git a/assets/src/settings-page/analytics.js b/assets/src/settings-page/analytics.js
@@ -10,7 +10,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext, useEffect, useRef } from '@wordpress/element';
 import { Icon, plus, trash } from '@wordpress/icons';
-import { Button, TextControl, PanelRow, BaseControl } from '@wordpress/components';
+import { Button, TextControl, PanelRow, BaseControl, VisuallyHidden } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -264,9 +264,9 @@ export function Analytics() {
 					} );
 				} }
 			>
-				<span className="screen-reader-text">
+				<VisuallyHidden as="span">
 					{ __( 'Add entry', 'amp' ) }
-				</span>
+				</VisuallyHidden>
 				<Icon icon={ plus } />
 			</Button>
 		</div>