Skip to content

Commit

Permalink
Try: Remove hover style and make un-tabbable
Browse files Browse the repository at this point in the history
This needs a sanity check and is a separate commit for that reason, so easier to revert if it isn't kosher.

This commit removes the hover and focus styles for the drag handle.

It also zeroes out the aria label, makes aria hidden, and unfocusable using the keyboard. The idea being that you cannot at all interact with the drag handle using just the keyboard, we have the movers for that, and thus this item shouldn't be announced to either screen readers or be part of the tab index as that's simply useless.

Thoughts?
  • Loading branch information
Joen Asmussen committed Sep 4, 2018
1 parent 4128f21 commit 8c575d2
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
7 changes: 5 additions & 2 deletions packages/editor/src/components/block-mover/drag-handle.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import classnames from 'classnames';
*/
import { IconButton, Draggable } from '@wordpress/components';

export const IconDragHandle = ( { isVisible, className, icon, label, onFocus, onBlur, onDragStart, onDragEnd, blockElementId, order, rootClientId, clientId, layout } ) => {
export const IconDragHandle = ( { isVisible, className, icon, onFocus, onBlur, onDragStart, onDragEnd, blockElementId, order, rootClientId, clientId, layout } ) => {
if ( ! isVisible ) {
return null;
}
Expand All @@ -33,7 +33,10 @@ export const IconDragHandle = ( { isVisible, className, icon, label, onFocus, on
<IconButton
className={ dragHandleClassNames }
icon={ icon }
label={ label }
aria-hidden="true"
focusable="false"
aria-label=""
tabIndex="-1"
onFocus={ onFocus }
onBlur={ onBlur }
onDragStart={ onDraggableStart }
Expand Down
11 changes: 11 additions & 0 deletions packages/editor/src/components/block-mover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,17 @@
.editor-block-mover__control-drag-handle {
cursor: move; // Fallback for IE/Edge < 14
cursor: grab;

&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active,
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus {
box-shadow: none;
background: none;
}

&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
cursor: grabbing;
}
}

.editor-block-mover__description {
Expand Down

0 comments on commit 8c575d2

Please sign in to comment.