From 1db45c35f66564cbe43ccee7b4bbc8746c817271 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 18 Dec 2022 22:10:10 +0900 Subject: [PATCH] Migrate Toolbar roving tabindex tests to Playwright --- .../various/toolbar-roving-tabindex.test.js | 142 ------------ .../various/toolbar-roving-tabindex.test.js | 216 ++++++++++++++++++ 2 files changed, 216 insertions(+), 142 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js create mode 100644 test/e2e/specs/editor/various/toolbar-roving-tabindex.test.js diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js deleted file mode 100644 index d131ddbbe0742..0000000000000 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ /dev/null @@ -1,142 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createNewPost, - pressKeyWithModifier, - insertBlock, -} from '@wordpress/e2e-test-utils'; - -async function focusBlockToolbar() { - await pressKeyWithModifier( 'alt', 'F10' ); -} - -async function expectLabelToHaveFocus( label ) { - let ariaLabel = await page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ); - // If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block. - if ( ariaLabel !== label ) { - await page.keyboard.press( 'ArrowUp' ); - ariaLabel = await page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ); - } - await expect( ariaLabel ).toBe( label ); -} - -async function testBlockToolbarKeyboardNavigation( - currentBlockLabel, - currentBlockTitle -) { - await focusBlockToolbar(); - await expectLabelToHaveFocus( currentBlockTitle ); - await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( 'Move up' ); - await page.keyboard.press( 'Tab' ); - await expectLabelToHaveFocus( currentBlockLabel ); - await pressKeyWithModifier( 'shift', 'Tab' ); - await expectLabelToHaveFocus( 'Move up' ); -} - -async function wrapCurrentBlockWithGroup( currentBlockTitle ) { - await page.click( `[aria-label="${ currentBlockTitle }"]` ); - await page.click( '.editor-block-list-item-group' ); -} - -async function testGroupKeyboardNavigation( - currentBlockLabel, - currentBlockTitle -) { - await expectLabelToHaveFocus( 'Block: Group' ); - await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( currentBlockLabel ); - await pressKeyWithModifier( 'shift', 'Tab' ); - await expectLabelToHaveFocus( 'Select Group' ); - await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( currentBlockTitle ); -} - -describe( 'Toolbar roving tabindex', () => { - beforeEach( async () => { - await createNewPost(); - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'First block' ); - } ); - - it( 'ensures paragraph block toolbar uses roving tabindex', async () => { - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'Paragraph' ); - await testBlockToolbarKeyboardNavigation( - 'Paragraph block', - 'Paragraph' - ); - await wrapCurrentBlockWithGroup( 'Paragraph' ); - await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' ); - } ); - - it( 'ensures heading block toolbar uses roving tabindex', async () => { - await insertBlock( 'Heading' ); - await page.keyboard.type( 'Heading' ); - await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' ); - await wrapCurrentBlockWithGroup( 'Heading' ); - await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' ); - } ); - - it( 'ensures list block toolbar uses roving tabindex', async () => { - await insertBlock( 'List' ); - await page.keyboard.type( 'List' ); - await testBlockToolbarKeyboardNavigation( 'List text', 'Select List' ); - await page.click( `[aria-label="Select List"]` ); - await wrapCurrentBlockWithGroup( 'List' ); - await testGroupKeyboardNavigation( 'Block: List', 'List' ); - } ); - - it( 'ensures image block toolbar uses roving tabindex', async () => { - await insertBlock( 'Image' ); - await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' ); - await wrapCurrentBlockWithGroup( 'Image' ); - await testGroupKeyboardNavigation( 'Block: Image', 'Image' ); - } ); - - it( 'ensures table block toolbar uses roving tabindex', async () => { - await insertBlock( 'Table' ); - await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' ); - // Move focus to the first toolbar item. - await page.keyboard.press( 'Home' ); - await expectLabelToHaveFocus( 'Table' ); - await page.click( '.blocks-table__placeholder-button' ); - await page.keyboard.press( 'Tab' ); - await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' ); - await wrapCurrentBlockWithGroup( 'Table' ); - await testGroupKeyboardNavigation( 'Block: Table', 'Table' ); - } ); - - it( 'ensures custom html block toolbar uses roving tabindex', async () => { - await insertBlock( 'Custom HTML' ); - await testBlockToolbarKeyboardNavigation( 'HTML', 'Custom HTML' ); - await wrapCurrentBlockWithGroup( 'Custom HTML' ); - await testGroupKeyboardNavigation( - 'Block: Custom HTML', - 'Custom HTML' - ); - } ); - - it( 'ensures block toolbar remembers the last focused item', async () => { - await insertBlock( 'Paragraph' ); - await page.keyboard.type( 'Paragraph' ); - await focusBlockToolbar(); - await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( 'Move up' ); - await page.keyboard.press( 'Tab' ); - await pressKeyWithModifier( 'shift', 'Tab' ); - await expectLabelToHaveFocus( 'Move up' ); - } ); - - it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => { - await pressKeyWithModifier( 'alt', 'F10' ); - await page.keyboard.press( 'ArrowRight' ); - await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( 'Bold' ); - } ); -} ); diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.test.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.test.js new file mode 100644 index 0000000000000..43de49fef1481 --- /dev/null +++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.test.js @@ -0,0 +1,216 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.use( { + ToolbarRovingTabindexUtils: async ( { page, pageUtils }, use ) => { + await use( new ToolbarRovingTabindexUtils( { page, pageUtils } ) ); + }, +} ); + +test.describe( 'Toolbar roving tabindex', () => { + test.beforeEach( async ( { admin, editor, page } ) => { + await admin.createNewPost(); + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'First block' ); + } ); + + test( 'ensures paragraph block toolbar uses roving tabindex', async ( { + editor, + page, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'Paragraph' ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'Paragraph block', + 'Paragraph' + ); + await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( + 'Paragraph' + ); + await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation( + 'Paragraph block', + 'Paragraph' + ); + } ); + + test( 'ensures heading block toolbar uses roving tabindex', async ( { + editor, + page, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/heading' } ); + await page.keyboard.type( 'Heading' ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'Block: Heading', + 'Heading' + ); + await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Heading' ); + await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation( + 'Block: Heading', + 'Heading' + ); + } ); + + test( 'ensures list block toolbar uses roving tabindex', async ( { + editor, + page, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/list' } ); + await page.keyboard.type( 'List' ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'List text', + 'Select List' + ); + await page.click( `role=button[name="Select List"i]` ); + await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'List' ); + await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation( + 'Block: List', + 'List' + ); + } ); + + test( 'ensures image block toolbar uses roving tabindex', async ( { + editor, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/image' } ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'Block: Image', + 'Image' + ); + await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' ); + await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation( + 'Block: Image', + 'Image' + ); + } ); + + test( 'ensures table block toolbar uses roving tabindex', async ( { + editor, + page, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/table' } ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'Block: Table', + 'Table' + ); + // Move focus to the first toolbar item. + await page.keyboard.press( 'Home' ); + await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' ); + await page.click( `role=button[name="Create Table"i]` ); + await page.keyboard.press( 'Tab' ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'Body cell text', + 'Table' + ); + await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Table' ); + await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation( + 'Block: Table', + 'Table' + ); + } ); + + test( 'ensures custom html block toolbar uses roving tabindex', async ( { + editor, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/html' } ); + await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation( + 'HTML', + 'Custom HTML' + ); + await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( + 'Custom HTML' + ); + await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation( + 'Block: Custom HTML', + 'Custom HTML' + ); + } ); + + test( 'ensures block toolbar remembers the last focused item', async ( { + editor, + page, + pageUtils, + ToolbarRovingTabindexUtils, + } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + await page.keyboard.type( 'Paragraph' ); + await ToolbarRovingTabindexUtils.focusBlockToolbar(); + await page.keyboard.press( 'ArrowRight' ); + await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' ); + await page.keyboard.press( 'Tab' ); + await pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' ); + } ); + + test( 'can reach toolbar items with arrow keys after pressing alt+F10', async ( { + page, + pageUtils, + ToolbarRovingTabindexUtils, + } ) => { + await pageUtils.pressKeyWithModifier( 'alt', 'F10' ); + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'ArrowRight' ); + await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Bold' ); + } ); +} ); + +class ToolbarRovingTabindexUtils { + constructor( { page, pageUtils } ) { + this.page = page; + this.pageUtils = pageUtils; + } + + async focusBlockToolbar() { + await this.pageUtils.pressKeyWithModifier( 'alt', 'F10' ); + } + + async testBlockToolbarKeyboardNavigation( + currentBlockLabel, + currentBlockTitle + ) { + await this.focusBlockToolbar(); + await this.expectLabelToHaveFocus( currentBlockTitle ); + await this.page.keyboard.press( 'ArrowRight' ); + await this.expectLabelToHaveFocus( 'Move up' ); + await this.page.keyboard.press( 'Tab' ); + await this.expectLabelToHaveFocus( currentBlockLabel ); + await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await this.expectLabelToHaveFocus( 'Move up' ); + } + + async expectLabelToHaveFocus( label ) { + let ariaLabel = await this.page.evaluate( () => + document.activeElement.getAttribute( 'aria-label' ) + ); + // If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block. + if ( ariaLabel !== label ) { + await this.page.keyboard.press( 'ArrowUp' ); + ariaLabel = await this.page.evaluate( () => + document.activeElement.getAttribute( 'aria-label' ) + ); + } + await expect( ariaLabel ).toBe( label ); + } + + async wrapCurrentBlockWithGroup( currentBlockTitle ) { + await this.page.click( `role=button[name="${ currentBlockTitle }"i]` ); + await this.page.click( `role=menuitem[name="Group"]` ); + } + + async testGroupKeyboardNavigation( currentBlockLabel, currentBlockTitle ) { + await this.expectLabelToHaveFocus( 'Block: Group' ); + await this.page.keyboard.press( 'ArrowRight' ); + await this.expectLabelToHaveFocus( currentBlockLabel ); + await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' ); + await this.expectLabelToHaveFocus( 'Select Group' ); + await this.page.keyboard.press( 'ArrowRight' ); + await this.expectLabelToHaveFocus( currentBlockTitle ); + } +}