diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js index 33cd412d2adf4..de6c3e46a26da 100644 --- a/packages/editor/src/components/editor-history/redo.js +++ b/packages/editor/src/components/editor-history/redo.js @@ -13,8 +13,11 @@ function EditorHistoryRedo( { hasRedo, redo } ) { icon="redo" label={ __( 'Redo' ) } shortcut={ displayShortcut.primaryShift( 'z' ) } + // If there are no redo levels we don't want to actually disable this + // button, because it will remove focus for keyboard users. + // See: https://github.com/WordPress/gutenberg/issues/3486 aria-disabled={ ! hasRedo } - onClick={ redo } + onClick={ hasRedo ? redo : undefined } className="editor-history__redo" /> ); @@ -24,14 +27,7 @@ export default compose( [ withSelect( ( select ) => ( { hasRedo: select( 'core/editor' ).hasEditorRedo(), } ) ), - withDispatch( ( dispatch, ownProps ) => ( { - redo: () => { - // If there are no redo levels this is a no-op, because we don't actually - // disable the button. - // See: https://github.com/WordPress/gutenberg/issues/3486 - if ( ownProps.hasRedo ) { - dispatch( 'core/editor' ).redo(); - } - }, + withDispatch( ( dispatch ) => ( { + redo: dispatch( 'core/editor' ).redo, } ) ), ] )( EditorHistoryRedo ); diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js index 008654dd43400..6c3826cc7f1f4 100644 --- a/packages/editor/src/components/editor-history/undo.js +++ b/packages/editor/src/components/editor-history/undo.js @@ -13,8 +13,11 @@ function EditorHistoryUndo( { hasUndo, undo } ) { icon="undo" label={ __( 'Undo' ) } shortcut={ displayShortcut.primary( 'z' ) } + // If there are no undo levels we don't want to actually disable this + // button, because it will remove focus for keyboard users. + // See: https://github.com/WordPress/gutenberg/issues/3486 aria-disabled={ ! hasUndo } - onClick={ undo } + onClick={ hasUndo ? undo : undefined } className="editor-history__undo" /> ); @@ -24,14 +27,7 @@ export default compose( [ withSelect( ( select ) => ( { hasUndo: select( 'core/editor' ).hasEditorUndo(), } ) ), - withDispatch( ( dispatch, ownProps ) => ( { - undo: () => { - // If there are no undo levels this is a no-op, because we don't actually - // disable the button. - // See: https://github.com/WordPress/gutenberg/issues/3486 - if ( ownProps.hasUndo ) { - dispatch( 'core/editor' ).undo(); - } - }, + withDispatch( ( dispatch ) => ( { + undo: dispatch( 'core/editor' ).undo, } ) ), ] )( EditorHistoryUndo );