Update/block mover accessibility

editor/block-mover/generate-order-title.js

@@ -0,0 +1,21 @@
+export default function( { typeTitle, position, isFirst, isLast, dir } ) {
+	const prefix = 'Move "' + typeTitle + '" block from position ' + position;
+	const errorPrefix = 'Block "' + typeTitle + '"';
+	let title = '';
+
+	if ( isFirst && isLast ) {
+		title = errorPrefix + ' is the only block, and cannot be moved';
+	} else if ( dir > 0 ) {
+		// moving down
+		title = ( ! isLast ) ?
+			prefix + ' down to position ' + ( position + 1 ) :
+			errorPrefix + ' is at the end of the content and can’t be moved down';
+	} else {
+		// moving up
+		title = ( ! isFirst ) ?
+			prefix + ' up to position ' + ( position - 1 ) :
+			errorPrefix + ' is at the beginning of the content and can’t be moved up';
+	}
+
+	return title;
+}

editor/block-mover/index.js

@@ -13,25 +13,32 @@ import { IconButton } from 'components';
  * Internal dependencies
  */
 import './style.scss';
-import { isFirstBlock, isLastBlock } from '../selectors';
+import { isFirstBlock, isLastBlock, getBlock } from '../selectors';
+import { getBlockSettings } from '../../blocks/api/registration';
+import generateOrderTitle from './generate-order-title';
 
-function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
+function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, block, order } ) {
 	// We emulate a disabled state because forcefully applying the `disabled`
 	// attribute on the button while it has focus causes the screen to change
 	// to an unfocused state (body as active element) without firing blur on,
 	// the rendering parent, leaving it unable to react to focus out.
+	const type = getBlockSettings( block.blockType ),
+		typeTitle = type.title,
+		position = ( order + 1 );
 
 	return (
 		<div className="editor-block-mover">
 			<IconButton
 				className="editor-block-mover__control"
 				onClick={ isFirst ? null : onMoveUp }
+				label={ generateOrderTitle( { typeTitle, position, isFirst, isLast, dir: -1 } ) }
 				icon="arrow-up-alt2"
 				aria-disabled={ isFirst }
 			/>
 			<IconButton
 				className="editor-block-mover__control"
 				onClick={ isLast ? null : onMoveDown }
+				label={ generateOrderTitle( { typeTitle, position, isFirst, isLast, dir: 1 } ) }
 				icon="arrow-down-alt2"
 				aria-disabled={ isLast }
 			/>
@@ -43,6 +50,7 @@ export default connect(
 	( state, ownProps ) => ( {
 		isFirst: isFirstBlock( state, first( ownProps.uids ) ),
 		isLast: isLastBlock( state, last( ownProps.uids ) ),
+		block: getBlock( state, ownProps.uid ),
 	} ),
 	( dispatch, ownProps ) => ( {
 		onMoveDown() {

editor/block-mover/style.scss

@@ -10,13 +10,13 @@
 	border: none;
 	outline: none;
 	background: none;
-	color: $dark-gray-100;
+	color: $dark-gray-300;
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
 
 	&:hover {
-		color: $dark-gray-900;
+		color: $dark-gray-500;
 	}
 
 	&[aria-disabled="true"] {

editor/block-mover/test/generate-order-title.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import generateOrderTitle from '../generate-order-title';
+
+describe( 'block mover', () => {
+	describe( 'generateOrderTitle', () => {
+		const typeTitle = 'TestType';
+
+		it( 'Should generate a title for the first item moving up', () => {
+			expect( generateOrderTitle( {
+				typeTitle,
+				position: 1,
+				isFirst: true,
+				isLast: false,
+				dir: -1,
+			} ) ).to.equal(
+				'Block "' + typeTitle + '" is at the beginning of the content and can’t be moved up'
+			);
+		} );
+
+		it( 'Should generate a title for the last item moving down', () => {
+			expect( generateOrderTitle( {
+				typeTitle,
+				position: 1,
+				isFirst: false,
+				isLast: true,
+				dir: 1,
+			} ) ).to.equal(
+				'Block "' + typeTitle + '" is at the end of the content and can’t be moved down'
+			);
+		} );
+
+		it( 'Should generate a title for the second item moving up', () => {
+			expect( generateOrderTitle( {
+				typeTitle,
+				position: 2,
+				isFirst: false,
+				isLast: false,
+				dir: -1,
+			} ) ).to.equal(
+				'Move "' + typeTitle + '" block from position 2 up to position 1'
+			);
+		} );
+
+		it( 'Should generate a title for the second item moving down', () => {
+			expect( generateOrderTitle( {
+				typeTitle,
+				position: 2,
+				isFirst: false,
+				isLast: false,
+				dir: 1,
+			} ) ).to.equal(
+				'Move "' + typeTitle + '" block from position 2 down to position 3'
+			);
+		} );
+
+		it( 'Should generate a title for the only item in the list', () => {
+			expect( generateOrderTitle( {
+				typeTitle,
+				position: 1,
+				isFirst: true,
+				isLast: true,
+				dir: 1,
+			} ) ).to.equal(
+				'Block "' + typeTitle + '" is the only block, and cannot be moved'
+			);
+		} );
+	} );
+} );

editor/modes/visual-editor/block.js

@@ -232,7 +232,7 @@ class VisualEditorBlock extends wp.element.Component {
 				tabIndex="0"
 				{ ...wrapperProps }
 			>
-				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
+				{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } order={ this.props.order } /> }
 				{ showUI &&
 					<CSSTransitionGroup
 						transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }