Create the demo post content using the keyboard only #10682

youknowriad · 2018-10-17T11:08:15Z

Everything is on the title. I'm almost there:

Testing the result is hard because of the ids and the temporary names.
The media library is difficult to use with keyboard and is also throwing JS errors sometimes (thus the commented blocks, we can uncomment once the JS errors are fixed)
Alt + F10 move to the toolbar only if it's visible, we should fix that.

tofumatt · 2018-10-17T11:09:46Z

tofumatt

Pretty cool. 🎉

Just a few comments; I know this isn't 100% finished yet. Ace, though.

tofumatt · 2018-10-17T11:10:34Z

test/e2e/specs/demo-content-with-keyboard.test.js

+	//getEditedPostContent,
+} from '../support/utils';
+
+async function uploadImageInTheMediaLibrary( assetFileName ) {


Might be a handy utility in general! 🤔

True, but this one is very keyboard specific. I mean it could be considered generic but we need to include the whole block and not just assume the media library is open. I think it's fine to keep this one internal to this test for now.

tofumatt · 2018-10-17T11:11:06Z

test/e2e/specs/demo-content-with-keyboard.test.js

+	await page.keyboard.up( META_KEY );
+}
+
+jest.setTimeout( 1000000 );


I assume this is for the upload, but worth adding a comment to explain 😄

Actually, it's because this test take too long since it's a very long post :P (I think our current limit is 10 seconds)

Hah! Right, that makes sense.

Travis doesn't like it:

waiting for selector ".media-modal input[type=file]" failed: timeout 30000ms exceeded

That's a different error @gziolo Intermittent, I saw it once locally but I don't know the real issue :(

test/e2e/specs/demo-content-with-keyboard.test.js

tofumatt · 2018-10-17T11:13:39Z

test/e2e/specs/demo-content-with-keyboard.test.js

+		await pressTimes( 'Tab', 4 ); // We should have a way to focus the block content
+		await page.keyboard.press( 'Enter' );
+		await uploadImageInTheMediaLibrary( 'cover-1.jpg' );
+		await page.click( '.media-modal button.media-button-select' ); // validating the media gallery is not easy with keyboard


Not easy or impossible?

Possible but you need to count "tabs" which is not great and break easily. There's probably a way to do it which is "tab + test if we reached the correct button"

Yup! You want https://github.com/WordPress/gutenberg/blob/master/test/e2e/specs/a11y.test.js#L26

If the tabbing breaks we should know about it, so I'd really prefer if we used a (fragile) keyboard solution here.

Inserting media was a bit painful in my manual testing, I had to go through all the fields before I could insert.

Would:

Suggested change

await page.click( '.media-modal button.media-button-select' ); // validating the media gallery is not easy with keyboard

await tabUntilElementIsActive( '.media-modal button.media-button-select' );

work here? If so it'd be great, but if not: okay. 🤷‍♂️ A follow-up issue to track it would be good though.

It would work yet but I consider tabUntilElementIsActive not an ideal solution. In general we should have some direct ways to access these buttons (like aria-regions in the medial library for instance).

But I'll update as it's slightly better.

tofumatt · 2018-10-17T11:14:12Z

test/e2e/specs/demo-content-with-keyboard.test.js

+		// Create the aligned right paragraph
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '... like this one, which is right aligned.' );
+		await page.mouse.move( 200, 300, { steps: 10 } ); // This shouldn't be necessary to show the toolbar


yes, mentioned in the description. We need to fix that.

If you select the text you can get around it for now as it will show the toolbar.

Even just command + A for now.

My hot take: using (and thus highlighting) awkward interactions required by keyboard-only usage is better than using the mouse. 🤷‍♂️

All the blocks don't have "text" so "command + A" won't always work. (Embed block for instance).

mtias · 2018-10-17T11:30:16Z

This is really cool, thanks.

test/e2e/specs/demo-content-with-keyboard.test.js

gziolo · 2018-10-17T12:14:14Z

This is great 💯

aduth · 2018-10-17T12:56:06Z

Alt + F10 move to the toolbar only if it's visible, we should fix that.

Raised also in Slack (link requires registration):

https://wordpress.slack.com/archives/C02QB2JS7/p1539202163000100

There, the focus of the discussion was on how to ensure the toolbar is visible so that Alt+F10, but your phrasing here sparked in my mind we should ensure the keybind does its intended operation regardless of the toolbar visibility.

Related ideation in #10529. I'm interested in exploring this further.

youknowriad · 2018-10-17T14:51:29Z

Youhou the test is passing on Travis 🎉 . The e2e tests take 1m30s longer but I think it's worth it.

tofumatt

This is a great start and we should merge it.

There are a few things we should file like where we skip keyboard nav because it's annoying or buggy? Either we should check if they're filed and link to the issues in the code/comments or file follow-up bugs to perfect this… but still this is such a great first, giant step. 🂡

tofumatt · 2018-10-17T15:06:04Z

test/e2e/specs/demo-content-with-keyboard.test.js

+	getEditedPostContent,
+} from '../support/utils';
+
+async function tabUntilElementIsActive( text ) {


COOOOOOOOL. We'll probably want to move that to the support utils eventually. 👍

test/e2e/specs/demo-content-with-keyboard.test.js

tofumatt · 2018-10-17T15:08:07Z

test/e2e/specs/demo-content-with-keyboard.test.js

+		await pressTimes( 'Tab', 4 ); // We should have a way to focus the block content
+		await page.keyboard.press( 'Enter' );
+		await uploadImageInTheMediaLibrary( 'cover-1.jpg' );
+		await page.click( '.media-modal button.media-button-select' ); // validating the media gallery is not easy with keyboard


Would:

Suggested change

await page.click( '.media-modal button.media-button-select' ); // validating the media gallery is not easy with keyboard

await tabUntilElementIsActive( '.media-modal button.media-button-select' );

work here? If so it'd be great, but if not: okay. 🤷‍♂️ A follow-up issue to track it would be good though.

aduth · 2018-10-17T19:39:57Z

Failure noted in Slack:

https://wordpress.slack.com/archives/C02QB2JS7/p1539801336000100

 FAIL  test/e2e/specs/demo-content-with-keyboard.test.js (79.755s)
  ● Demo content post › should be created with keyboard
    expect(jest.fn()).not.toHaveErrored(expected)
    Expected mock function not to be called but it was called with:
    ["Failed to load resource: the server responded with a status of 403 (Forbidden)"]
      32 |     function assertExpectedCalls() {
      33 |         if ( spy.assertionsNumber === 0 && spy.mock.calls.length > 0 ) {
    > 34 |             expect( console ).not[ matcherName ]();
         |             ^
      35 |         }
      36 |     }
      37 | 
      at Object.assertExpectedCalls (packages/jest-console/src/index.js:34:4)

I'm seeing one as well locally, though different:

 FAIL  test/e2e/specs/demo-content-with-keyboard.test.js (56.141s)
  ● Demo content post › should be created with keyboard

    expect(jest.fn()).not.toHaveErrored(expected)

    Expected mock function not to be called but it was called with:
    ["Failed to load resource: the server responded with a status of 503 (Backend.max_conn reached)"]

      32 | 	function assertExpectedCalls() {
      33 | 		if ( spy.assertionsNumber === 0 && spy.mock.calls.length > 0 ) {
    > 34 | 			expect( console ).not[ matcherName ]();
         | 			^
      35 | 		}
      36 | 	}
      37 | 

      at Object.assertExpectedCalls (packages/jest-console/src/index.js:34:4)

We might need to do more / generalized request stubbing (at least to third-party resources) as in #9924.

aduth · 2018-10-17T19:46:52Z

test/e2e/specs/demo-content-with-keyboard.test.js

+		await page.keyboard.type( 'https://vimeo.com/22439234' );
+		await page.keyboard.press( 'Enter' );
+
+		await moveMouse(); // This shouldn't be necessary to show the toolbar


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create the demo post content using the keyboard only #10682

Create the demo post content using the keyboard only #10682

youknowriad commented Oct 17, 2018 •

edited

Loading

tofumatt commented Oct 17, 2018

tofumatt left a comment

tofumatt Oct 17, 2018

youknowriad Oct 17, 2018

tofumatt Oct 17, 2018

youknowriad Oct 17, 2018

tofumatt Oct 17, 2018

gziolo Oct 17, 2018

youknowriad Oct 17, 2018

tofumatt Oct 17, 2018

youknowriad Oct 17, 2018

tofumatt Oct 17, 2018

tofumatt Oct 17, 2018

mtias Oct 17, 2018

tofumatt Oct 17, 2018

youknowriad Oct 17, 2018

tofumatt Oct 17, 2018

youknowriad Oct 17, 2018

mtias Oct 17, 2018

mtias Oct 17, 2018

tofumatt Oct 17, 2018

youknowriad Oct 17, 2018

mtias commented Oct 17, 2018

gziolo commented Oct 17, 2018

aduth commented Oct 17, 2018 •

edited

Loading

youknowriad commented Oct 17, 2018

tofumatt left a comment

tofumatt Oct 17, 2018

tofumatt Oct 17, 2018

aduth commented Oct 17, 2018

aduth Oct 17, 2018

	await page.click( '.media-modal button.media-button-select' ); // validating the media gallery is not easy with keyboard
	await tabUntilElementIsActive( '.media-modal button.media-button-select' );

Create the demo post content using the keyboard only #10682

Create the demo post content using the keyboard only #10682

Conversation

youknowriad commented Oct 17, 2018 • edited Loading

tofumatt commented Oct 17, 2018

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented Oct 17, 2018

gziolo commented Oct 17, 2018

aduth commented Oct 17, 2018 • edited Loading

youknowriad commented Oct 17, 2018

tofumatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Oct 17, 2018

Choose a reason for hiding this comment

youknowriad commented Oct 17, 2018 •

edited

Loading

aduth commented Oct 17, 2018 •

edited

Loading