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 6a7125d04f7a6..e1ca121040b97 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/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js index a8e49f7a6b84d..cfaf4e0be9188 100644 --- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js +++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js @@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => { await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden(); } ); - test( 'Focuses correct toolbar in default view options in select mode', async ( { - editor, - page, - toolbarUtils, - } ) => { - // Test: Focus the document toolbar from title - await toolbarUtils.useSelectMode(); - await toolbarUtils.moveToToolbarShortcut(); - await expect( toolbarUtils.documentToolbarButton ).toBeFocused(); - - // Test: Focus the top level toolbar from empty block - await editor.insertBlock( { name: 'core/paragraph' } ); - await toolbarUtils.useSelectMode(); - await toolbarUtils.moveToToolbarShortcut(); - await expect( toolbarUtils.documentToolbarButton ).toBeFocused(); - - // Test: Focus the top level toolbar from paragraph block - await editor.insertBlock( { name: 'core/paragraph' } ); - await page.keyboard.type( - 'Focus top level toolbar from paragraph block in select mode.' - ); - await toolbarUtils.useSelectMode(); - await toolbarUtils.moveToToolbarShortcut(); - await expect( toolbarUtils.documentToolbarButton ).toBeFocused(); - } ); - test.describe( 'In Top Toolbar option:', () => { test.beforeEach( async ( { editor } ) => { // Ensure the fixed toolbar option is on diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js index bd1552ad4cb66..4077d6dcc5820 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, @@ -1222,11 +1154,11 @@ class WritingFlowUtils { 'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]' ); 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.editor.showBlockToolbar(); + 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' ); } diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js index 4db860b703892..1b92ef2e850e6 100644 --- a/test/e2e/specs/site-editor/navigation.spec.js +++ b/test/e2e/specs/site-editor/navigation.spec.js @@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => { // The button role should have been removed from the iframe. await expect( editorCanvasButton ).toBeHidden(); - // Test to make sure a Tab keypress works as expected. - // As of this writing, we are in select mode and a tab - // keypress will reveal the header template select mode - // button. This test is not documenting that we _want_ - // that action, but checking that we are within the site - // editor and keypresses work as intened. - await pageUtils.pressKeys( 'Tab' ); - await expect( - page.getByRole( 'button', { - name: 'Template Part Block. Row 1. header', - } ) - ).toBeFocused(); - // Test: We can go back to the main navigation from the editor frame // Move to the document toolbar await pageUtils.pressKeys( 'alt+F10' ); diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js index cb50f82efec1a..5e907f21cbc8d 100644 --- a/test/e2e/specs/widgets/customizing-widgets.spec.js +++ b/test/e2e/specs/widgets/customizing-widgets.spec.js @@ -467,16 +467,6 @@ test.describe( 'Widgets Customizer', () => { await expect( paragraphBlock ).toBeVisible(); await paragraphBlock.focus(); - - // Expect pressing the Escape key to enter navigation mode, - // but not close the editor. - await page.keyboard.press( 'Escape' ); - await expect( - page.locator( - 'css=.block-editor-block-list__block-selection-button' - ) - ).toBeVisible(); - await expect( paragraphBlock ).toBeVisible(); } ); test( 'should move (inner) blocks to another sidebar', async ( {