diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js index 6a7125d04f7a6a..e1ca121040b974 100644 --- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js +++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js @@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => { await editor.openDocumentSettingsSidebar(); } ); - test( 'permits tabbing through paragraph blocks in the expected order', async ( { + test( 'permits tabbing through the block toolbar of the paragraph block', async ( { editor, KeyboardNavigableBlocks, page, + pageUtils, } ) => { - const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ]; - - // Create 3 paragraphs blocks with some content. - for ( const paragraphBlock of paragraphBlocks ) { + // Insert three paragraph blocks. + for ( let i = 0; i < 3; i++ ) { await editor.insertBlock( { name: 'core/paragraph' } ); - await page.keyboard.type( paragraphBlock ); + await page.keyboard.type( `Paragraph ${ i + 1 }` ); } - - // Select the middle block. + // Select the middle paragraph block. await page.keyboard.press( 'ArrowUp' ); await editor.showBlockToolbar(); - await KeyboardNavigableBlocks.navigateToContentEditorTop(); - await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' ); - - // Repeat the same steps to ensure that there is no change introduced in how the focus is handled. - // This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773. - await KeyboardNavigableBlocks.navigateToContentEditorTop(); - await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' ); - } ); - - test( 'allows tabbing in navigation mode if no block is selected', async ( { - editor, - KeyboardNavigableBlocks, - page, - } ) => { - const paragraphBlocks = [ '0', '1' ]; - - // Create 2 paragraphs blocks with some content. - for ( const paragraphBlock of paragraphBlocks ) { - await editor.insertBlock( { name: 'core/paragraph' } ); - await page.keyboard.type( paragraphBlock ); - } - - // Clear the selected block. - const paragraph = editor.canvas - .locator( '[data-type="core/paragraph"]' ) - .getByText( '1' ); - const box = await paragraph.boundingBox(); - await page.mouse.click( box.x - 1, box.y ); - - await page.keyboard.press( 'Tab' ); - await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' ); - - await page.keyboard.press( 'Tab' ); - await KeyboardNavigableBlocks.expectLabelToHaveFocus( - 'Paragraph Block. Row 1. 0' - ); - - await page.keyboard.press( 'Tab' ); - await KeyboardNavigableBlocks.expectLabelToHaveFocus( - 'Paragraph Block. Row 2. 1' - ); - - await page.keyboard.press( 'Tab' ); - await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' ); - } ); - - test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( { - editor, - KeyboardNavigableBlocks, - page, - pageUtils, - } ) => { - const paragraphBlocks = [ '0', '1' ]; - - // Create 2 paragraphs blocks with some content. - for ( const paragraphBlock of paragraphBlocks ) { - await editor.insertBlock( { name: 'core/paragraph' } ); - await page.keyboard.type( paragraphBlock ); - } - - // Clear the selected block. - const paragraph = editor.canvas - .locator( '[data-type="core/paragraph"]' ) - .getByText( '1' ); - const box = await paragraph.boundingBox(); - await page.mouse.click( box.x - 1, box.y ); - - // Put focus behind the block list. - await page.evaluate( () => { - document - .querySelector( '.interface-interface-skeleton__sidebar' ) - .focus(); - } ); - - await pageUtils.pressKeys( 'shift+Tab' ); - await KeyboardNavigableBlocks.expectLabelToHaveFocus( - 'Paragraph Block. Row 2. 1' - ); - await pageUtils.pressKeys( 'shift+Tab' ); + await KeyboardNavigableBlocks.navigateThroughBlockToolbar(); + await page.keyboard.press( 'Tab' ); await KeyboardNavigableBlocks.expectLabelToHaveFocus( - 'Paragraph Block. Row 1. 0' + 'Block: Paragraph' ); - - await pageUtils.pressKeys( 'shift+Tab' ); - await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' ); } ); test( 'should navigate correctly with multi selection', async ( { @@ -208,31 +126,7 @@ class KeyboardNavigableBlocks { expect( ariaLabel ).toBe( label ); } - async navigateToContentEditorTop() { - // Use 'Ctrl+`' to return to the top of the editor. - await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } ); - } - - async tabThroughParagraphBlock( paragraphText ) { - await this.tabThroughBlockToolbar(); - - await this.page.keyboard.press( 'Tab' ); - await this.expectLabelToHaveFocus( 'Block: Paragraph' ); - - const activeElement = this.editor.canvas.locator( ':focus' ); - - await expect( activeElement ).toHaveText( paragraphText ); - - await this.page.keyboard.press( 'Tab' ); - await this.expectLabelToHaveFocus( 'Block' ); - - // Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5. - await this.pageUtils.pressKeys( 'shift+Tab' ); - await this.expectLabelToHaveFocus( 'Block: Paragraph' ); - } - - async tabThroughBlockToolbar() { - await this.page.keyboard.press( 'Tab' ); + async navigateThroughBlockToolbar() { await this.expectLabelToHaveFocus( 'Paragraph' ); await this.page.keyboard.press( 'ArrowRight' ); diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js index bd1552ad4cb66a..d46895ee4a1fbb 100644 --- a/test/e2e/specs/editor/various/writing-flow.spec.js +++ b/test/e2e/specs/editor/various/writing-flow.spec.js @@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { ] ); } ); - test( 'Should navigate between inner and root blocks in navigation mode', async ( { - page, - writingFlowUtils, - } ) => { - await writingFlowUtils.addDemoContent(); - - // Switch to navigation mode. - await page.keyboard.press( 'Escape' ); - // Arrow up to Columns block. - await page.keyboard.press( 'ArrowUp' ); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/columns' ); - // Arrow right into Column block. - await page.keyboard.press( 'ArrowRight' ); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/column' ); - // Arrow down to reach second Column block. - await page.keyboard.press( 'ArrowDown' ); - // Arrow right again into Paragraph block. - await page.keyboard.press( 'ArrowRight' ); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/paragraph' ); - // Arrow left back to Column block. - await page.keyboard.press( 'ArrowLeft' ); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/column' ); - // Arrow left back to Columns block. - await page.keyboard.press( 'ArrowLeft' ); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/columns' ); - // Arrow up to first paragraph. - await page.keyboard.press( 'ArrowUp' ); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/paragraph' ); - } ); - test( 'should navigate around inline boundaries', async ( { editor, page, @@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => { ` ); } ); - test( 'escape should set select mode and then focus the canvas', async ( { - page, - writingFlowUtils, - } ) => { - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'Random Paragraph' ); - - // First escape enters navigation mode. - await page.keyboard.press( 'Escape' ); - const navigationButton = page.getByLabel( - 'Paragraph Block. Row 1. Random Paragraph' - ); - await expect( navigationButton ).toBeVisible(); - await expect - .poll( writingFlowUtils.getActiveBlockName ) - .toBe( 'core/paragraph' ); - - // Second escape should send focus to the canvas - await page.keyboard.press( 'Escape' ); - // The navigation button should be hidden. - await expect( navigationButton ).toBeHidden(); - await expect( - page.getByRole( 'region', { name: 'Editor content' } ) - ).toBeFocused(); - } ); - // Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091. test( 'does not deselect the block when selecting text outside the editor canvas', async ( { editor, @@ -1223,10 +1155,10 @@ class WritingFlowUtils { ); await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here. - await this.page.keyboard.press( 'Escape' ); // Enter navigation mode. - await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block. - await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block. - await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected. + await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent + await this.page.keyboard.press( 'Enter' ); // Selects the column block. + await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent + await this.page.keyboard.press( 'Enter' ); // Selects the columns block. await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block. await this.page.keyboard.type( 'Second paragraph' ); }