Used IconButton on breadcrumbs to increase accessibility.

WordPress · Apr 27, 2018 · 27e119e · 27e119e
1 parent 8c4698c
commit 27e119e
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/editor/components/block-list/breadcrumb.js b/editor/components/block-list/breadcrumb.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { compose, Component } from '@wordpress/element';
-import { Dashicon, Tooltip, Toolbar, Button } from '@wordpress/components';
+import { IconButton, Tooltip, Toolbar } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -56,21 +56,22 @@ export class BlockBreadcrumb extends Component {
 	render( ) {
 		const { uid, rootUID, selectRootBlock, isHidden } = this.props;
 		const { isFocused } = this.state;
+		const selectParentLabel = __( 'Select parent block' );
 
 		return (
 			<NavigableToolbar className={ classnames( 'editor-block-list__breadcrumb', {
 				'is-visible': ! isHidden || isFocused,
 			} ) }>
 				<Toolbar>
 					{ rootUID && (
-						<Tooltip text={ __( 'Select parent block' ) }>
-							<Button
+						<Tooltip text={ selectParentLabel }>
+							<IconButton
 								onClick={ selectRootBlock }
 								onFocus={ this.onFocus }
 								onBlur={ this.onBlur }
-							>
-								<Dashicon icon="arrow-left-alt" uid={ uid } />
-							</Button>
+								label={ selectParentLabel }
+								icon="arrow-left-alt"
+							/>
 						</Tooltip>
 					) }
 					<BlockTitle uid={ uid } />