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

Adding an e2e test verifying simple keyboard navigation through blocks #13455

Merged
merged 2 commits into from
Mar 7, 2019
Merged

Adding an e2e test verifying simple keyboard navigation through blocks #13455

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ac4720
Adding an e2e test verifying simple keyboard navigation through block…
Jan 23, 2019
dbdf8ff
Moving `navigateToContentEditorTop`, `tabThroughParagraphBlock`, `tab…
Feb 24, 2019
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
165 changes: 165 additions & 0 deletions packages/e2e-tests/specs/keyboard-navigable-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
/**
* WordPress dependencies
*/
import {
createNewPost,
insertBlock,
} from '@wordpress/e2e-test-utils';

describe( 'Order of block keyboard navigation', () => {
beforeEach( async () => {
await createNewPost();
} );

it( 'permits tabbing through paragraph blocks in the expected order', async () => {
const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];

const navigateToContentEditorTop = async () => {
tjnicolaides marked this conversation as resolved.
Show resolved Hide resolved
// Use 'Ctrl+`' to return to the top of the editor
tjnicolaides marked this conversation as resolved.
Show resolved Hide resolved
await page.keyboard.down( 'Control' );
await page.keyboard.press( '`' );
await page.keyboard.press( '`' );
await page.keyboard.up( 'Control' );
// Tab into the Title block
await page.keyboard.press( 'Tab' );
};

const tabThroughParagraphBlock = async ( paragraphText ) => {
// Tab to the next paragraph block
await page.keyboard.press( 'Tab' );

// The block external focusable wrapper has focus
const isFocusedParagraphBlock = await page.evaluate(
() => document.activeElement.dataset.type
);
await expect( isFocusedParagraphBlock ).toEqual( 'core/paragraph' );

// Tab causes 'add block' button to receive focus
await page.keyboard.press( 'Tab' );
const isFocusedParagraphInserterToggle = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-inserter__toggle' )
);
await expect( isFocusedParagraphInserterToggle ).toBe( true );

await tabThroughBlockMoverControl();
await tabThroughBlockToolbar();

// Tab causes the paragraph content to receive focus
await page.keyboard.press( 'Tab' );
const isFocusedParagraphContent = await page.evaluate(
() => document.activeElement.contentEditable
);
// The value of 'contentEditable' should be the string 'true'
await expect( isFocusedParagraphContent ).toBe( 'true' );

const paragraphEditableContent = await page.evaluate(
() => document.activeElement.innerHTML
);
await expect( paragraphEditableContent ).toBe( paragraphText );
};

const tabThroughBlockMoverControl = async () => {
// Tab to focus on the 'move up' control
await page.keyboard.press( 'Tab' );
const isFocusedMoveUpControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-block-mover__control' )
);
await expect( isFocusedMoveUpControl ).toBe( true );

// Tab to focus on the 'move down' control
await page.keyboard.press( 'Tab' );
const isFocusedMoveDownControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'editor-block-mover__control' )
);
await expect( isFocusedMoveDownControl ).toBe( true );
};

const tabThroughBlockToolbar = async () => {
Copy link
Member

Choose a reason for hiding this comment

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

Is there any way to automate this tabbing through the toolbar? It's going to be hard to maintain every time something changes in the paragraph block toolbar. It would be great to end up with a set of utilities which can be applied to every core block, not only paragraph.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a really interesting idea, and I'd love to have a look at doing this over the next few days

Copy link
Member

Choose a reason for hiding this comment

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

We can split this work into 2 PRs if you prefer. It's valuable as is if we add the code comment I mentioned in my previous note. Let me know how do you want to approach it.

// Tab to focus on the 'block switcher' control
await page.keyboard.press( 'Tab' );
const isFocusedBlockSwitcherControl = await page.evaluate( () =>
document.activeElement.classList.contains(
'editor-block-switcher__toggle'
)
);
await expect( isFocusedBlockSwitcherControl ).toBe( true );

// Tab to focus on the 'left paragraph alignment' dropdown control
await page.keyboard.press( 'Tab' );
const isFocusedLeftAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedLeftAlignmentControl ).toBe( true );

// Tab to focus on the 'center paragraph alignment' dropdown control
await page.keyboard.press( 'Tab' );
const isFocusedCenterAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedCenterAlignmentControl ).toBe( true );

// Tab to focus on the 'right paragraph alignment' dropdown control
await page.keyboard.press( 'Tab' );
const isFocusedRightAlignmentControl = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedRightAlignmentControl ).toBe( true );

// Tab to focus on the 'Bold' formatting button
await page.keyboard.press( 'Tab' );
const isFocusedBoldFormattingButton = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedBoldFormattingButton ).toBe( true );

// Tab to focus on the 'Italic' formatting button
await page.keyboard.press( 'Tab' );
const isFocusedItalicFormattingButton = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedItalicFormattingButton ).toBe( true );

// Tab to focus on the 'Hyperlink' formatting button
await page.keyboard.press( 'Tab' );
const isFocusedHyperlinkFormattingButton = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedHyperlinkFormattingButton ).toBe( true );

// Tab to focus on the 'Strikethrough' formatting button
await page.keyboard.press( 'Tab' );
const isFocusedStrikethroughFormattingButton = await page.evaluate( () =>
document.activeElement.classList.contains( 'components-toolbar__control' )
);
await expect( isFocusedStrikethroughFormattingButton ).toBe( true );

// Tab to focus on the 'More formatting' dropdown toggle
await page.keyboard.press( 'Tab' );
const isFocusedMoreFormattingDropdown = await page.evaluate( () =>
document.activeElement.classList.contains(
'editor-block-settings-menu__toggle'
)
);
await expect( isFocusedMoreFormattingDropdown ).toBe( true );
};

// create 3 paragraphs blocks with some content
for ( const paragraphBlock of paragraphBlocks ) {
await insertBlock( 'Paragraph' );
await page.keyboard.type( paragraphBlock );
await page.keyboard.press( 'Enter' );
}

await navigateToContentEditorTop();

for ( const paragraphBlock of paragraphBlocks ) {
await tabThroughParagraphBlock( paragraphBlock );
}

await navigateToContentEditorTop();
Copy link
Member

Choose a reason for hiding this comment

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

Can you explain why does it navigates through those blocks twice? It feels like it should be fine to do it only once. Maybe it would be enough to navigate to content editor top and finish there. I don't see any technical reasons why it would work differently after this step.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure can. The regression we're testing for here is illustrated in this image:

a user tabs through the block editor, resets focus to the top of the screen, and tabs through again. The block's toolbars don't receive focus on the second pass.

And you can find more information about the bug and the patch for it here: #11773

Copy link
Member

@gziolo gziolo Feb 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Okey, we need to document it in the code and reference the bug we are guarding against. Something along those lines:

// 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.

What do you think?

Copy link
Contributor Author

@tjnicolaides tjnicolaides Mar 7, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

@gziolo would love your thoughts on this approach here. I could find only one other example of a function from e2e-test-utils that contained expect assertions like the ones I was using in tabThroughBlockMoverControl and tabThroughBlockToolbar.

tjnicolaides#1

Currently thinking about the block-agnostic test you mentioned living in keyboard-navigable-blocks.test.js and the paragraph order tests written in this PR living in a different file

Copy link
Member

Choose a reason for hiding this comment

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

So let's merge this PR as it's solid enough and do a follow-up with the work started in your fork. I didn't test it at all but I anticipate that we will only need to add some JSDoc tweaks to ensure that those new public methods get properly documented in the auto-generated docs :)


for ( const paragraphBlock of paragraphBlocks ) {
await tabThroughParagraphBlock( paragraphBlock );
}
} );
} );