Merge pull request #1615 from WordPress/update/embed-url-input-label

Add and aria-label to the embed url input fields
WordPress · Jun 30, 2017 · f76800d · f76800d
2 parents 8a905a1 + 3733aff
commit f76800d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -138,14 +138,17 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
 				}
 
 				if ( ! html ) {
+					const label = sprintf( __( '%s URL' ), title );
+
 					return [
 						controls,
-						<Placeholder key="placeholder" icon={ icon } label={ sprintf( __( '%s URL' ), title ) } className="wp-block-embed">
+						<Placeholder key="placeholder" icon={ icon } label={ label } className="wp-block-embed">
 							<form onSubmit={ this.doServerSideRender }>
 								<input
 									type="url"
 									value={ url || '' }
 									className="components-placeholder__input"
+									aria-label={ label }
 									placeholder={ __( 'Enter URL to embed here…' ) }
 									onChange={ ( event ) => setAttributes( { url: event.target.value } ) } />
 								<Button

diff --git a/components/placeholder/index.js b/components/placeholder/index.js
@@ -13,7 +13,7 @@ function Placeholder( { icon, children, label, instructions, className, ...addit
 	const classes = classnames( 'components-placeholder', className );
 
 	return (
-		<div { ...additionalProps } aria-label={ label } className={ classes }>
+		<div { ...additionalProps } className={ classes }>
 			<div className="components-placeholder__label">
 				{ !! icon && <Dashicon icon={ icon } /> }
 				{ label }

diff --git a/components/placeholder/test/index.js b/components/placeholder/test/index.js
@@ -35,13 +35,12 @@ describe( 'Placeholder', () => {
 			expect( placeholderLabel.find( 'Dashicon' ).exists() ).to.be.true();
 		} );
 
-		it( 'should render a label section and add aria label', () => {
+		it( 'should render a label section', () => {
 			const label = 'WordPress';
 			const placeholder = shallow( <Placeholder label={ label } /> );
 			const placeholderLabel = placeholder.find( '.components-placeholder__label' );
 			const child = placeholderLabel.childAt( 0 );
 
-			expect( placeholder.prop( 'aria-label' ) ).to.equal( label );
 			expect( child.text() ).to.equal( label );
 		} );