Components: Switch screen-reader-text to VisuallyHidden (#18165)

* Switch screen-reader-text to VisuallyHidden * Update packages/components/src/form-token-field/token.js Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]> * Fix test check for visually hidden text
WordPress · Nov 4, 2019 · 3d2b41a · 3d2b41a
1 parent 5d0c03e
commit 3d2b41a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.js
@@ -3,14 +3,21 @@
  */
 import classnames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import VisuallyHidden from '../visually-hidden';
+
 function BaseControl( { id, label, hideLabelFromVision, help, className, children } ) {
 	return (
 		<div className={ classnames( 'components-base-control', className ) }>
 			<div className="components-base-control__field">
-				{ label && id && <label
-					className={ classnames( 'components-base-control__label', { 'screen-reader-text': hideLabelFromVision } ) }
-					htmlFor={ id }>{ label }
-				</label> }
+				{ label && id && hideLabelFromVision && <VisuallyHidden
+					as="label"
+					htmlFor={ id }>{ label }</VisuallyHidden> }
+				{ label && id && ! hideLabelFromVision && <label
+					className="components-base-control__label"
+					htmlFor={ id }>{ label }</label> }
 				{ label && ! id && <BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel> }
 				{ children }
 			</div>

diff --git a/packages/components/src/form-token-field/token.js b/packages/components/src/form-token-field/token.js
@@ -14,6 +14,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import IconButton from '../icon-button';
+import VisuallyHidden from '../visually-hidden';
 
 function Token( {
 	value,
@@ -60,7 +61,7 @@ function Token( {
 				className="components-form-token-field__token-text"
 				id={ `components-form-token-field__token-text-${ instanceId }` }
 			>
-				<span className="screen-reader-text">{ termPositionAndCount }</span>
+				<VisuallyHidden as="span">{ termPositionAndCount }</VisuallyHidden>
 				<span aria-hidden="true">{ transformedValue }</span>
 			</span>
 

diff --git a/packages/e2e-tests/specs/editor/various/taxonomies.test.js b/packages/e2e-tests/specs/editor/various/taxonomies.test.js
@@ -16,7 +16,7 @@ import {
 /**
  * Module constants
  */
-const TAG_TOKEN_SELECTOR = '.components-form-token-field__token-text span:not(.screen-reader-text)';
+const TAG_TOKEN_SELECTOR = '.components-form-token-field__token-text span:not(.components-visually-hidden)';
 
 describe( 'Taxonomies', () => {
 	const canCreatTermInTaxonomy = ( taxonomy ) => {