fix: Use aria-disabled instead of disabled for undo/redo (#11379)

Fixes #3486
WordPress · Nov 2, 2018 · ccb199e · ccb199e
1 parent fbc093a
commit ccb199e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
@@ -13,7 +13,7 @@ function EditorHistoryRedo( { hasRedo, redo } ) {
 			icon="redo"
 			label={ __( 'Redo' ) }
 			shortcut={ displayShortcut.primaryShift( 'z' ) }
-			disabled={ ! hasRedo }
+			aria-disabled={ ! hasRedo }
 			onClick={ redo }
 			className="editor-history__redo"
 		/>
@@ -24,7 +24,14 @@ export default compose( [
 	withSelect( ( select ) => ( {
 		hasRedo: select( 'core/editor' ).hasEditorRedo(),
 	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		redo: () => dispatch( 'core/editor' ).redo(),
+	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();
+			}
+		},
 	} ) ),
 ] )( EditorHistoryRedo );
diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js
@@ -13,7 +13,7 @@ function EditorHistoryUndo( { hasUndo, undo } ) {
 			icon="undo"
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
-			disabled={ ! hasUndo }
+			aria-disabled={ ! hasUndo }
 			onClick={ undo }
 			className="editor-history__undo"
 		/>
@@ -24,7 +24,14 @@ export default compose( [
 	withSelect( ( select ) => ( {
 		hasUndo: select( 'core/editor' ).hasEditorUndo(),
 	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		undo: () => dispatch( 'core/editor' ).undo(),
+	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();
+			}
+		},
 	} ) ),
 ] )( EditorHistoryUndo );
diff --git a/test/e2e/specs/new-post.test.js b/test/e2e/specs/new-post.test.js
@@ -23,8 +23,8 @@ describe( 'new editor state', () => {
 	} );
 
 	it( 'should have no history', async () => {
-		const undoButton = await page.$( '.editor-history__undo:not( :disabled )' );
-		const redoButton = await page.$( '.editor-history__redo:not( :disabled )' );
+		const undoButton = await page.$( '.editor-history__undo[aria-disabled="false"]' );
+		const redoButton = await page.$( '.editor-history__redo[aria-disabled="false"]' );
 
 		expect( undoButton ).toBeNull();
 		expect( redoButton ).toBeNull();

diff --git a/test/e2e/specs/undo.test.js b/test/e2e/specs/undo.test.js
@@ -33,7 +33,7 @@ describe( 'undo', () => {
 		await pressWithModifier( META_KEY, 'z' ); // Undo 1st block.
 
 		// After undoing every action, there should be no more undo history.
-		await page.waitForSelector( '.editor-history__undo:disabled' );
+		await page.waitForSelector( '.editor-history__undo[aria-disabled="true"]' );
 
 		expect( await getEditedPostContent() ).toBe( '' );
 	} );