Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate Toolbar roving tabindex tests to Playwright #46634

Merged
merged 2 commits into from
Dec 20, 2022
Merged

Migrate Toolbar roving tabindex tests to Playwright #46634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1db45c3
Migrate Toolbar roving tabindex tests to Playwright
t-hamano Dec 18, 2022
1228b29
Fix file name
t-hamano Dec 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 0 additions & 142 deletions packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
View file
Open in desktop

This file was deleted.

216 changes: 216 additions & 0 deletions test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' )
);
}
Comment on lines +189 to +198
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't update this section to an accessible implementation. This implementation also exists in the testing of image block.

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 );
}
}