Block switcher a11y.

WordPress · May 10, 2017 · 176e195 · 176e195
1 parent b21ce3d
commit 176e195
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/editor/block-switcher/index.js b/editor/block-switcher/index.js
@@ -73,17 +73,26 @@ class BlockSwitcher extends wp.element.Component {
 					className="editor-block-switcher__toggle"
 					icon={ blockSettings.icon }
 					onClick={ this.toggleMenu }
+					aria-haspopup="true"
+					aria-expanded={ this.state.open }
+					label={ wp.i18n.__( 'Change block content type' ) }
 				>
 					<div className="editor-block-switcher__arrow" />
 				</IconButton>
 				{ this.state.open &&
-					<div className="editor-block-switcher__menu">
+					<div
+						className="editor-block-switcher__menu"
+						role="menu"
+						tabIndex="0"
+						aria-label={ wp.i18n.__( 'Content types' ) }
+					>
 						{ allowedBlocks.map( ( { slug, title, icon } ) => (
 							<IconButton
 								key={ slug }
 								onClick={ this.switchBlockType( slug ) }
 								className="editor-block-switcher__menu-item"
 								icon={ icon }
+								role="menuitem"
 							>
 								{ title }
 							</IconButton>

diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
@@ -56,6 +56,7 @@
 	cursor: pointer;
 
 	&:hover,
+	&:focus,
 	&:not(:disabled):hover {
 		color: $dark-gray-500;
 		border-color: $dark-gray-500;