Use VisuallyHidden for other screen reader texts

ampproject · Aug 27, 2021 · 8738025 · 8738025
1 parent dd4a8cf
commit 8738025
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 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/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>