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.

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

Writing Flow: Avoid horizontal writing flow navigation in native inputs #9978

Merged
merged 1 commit into from
Oct 18, 2018

Conversation

aduth
Copy link
Member

@aduth aduth commented Sep 17, 2018

Closes #6468

This pull request seeks to update the writing flow behavior to allow only unmodified vertical arrow key presses for consideration in a browser native input (textarea, input).

Testing instructions:

Verify that horizontally navigating between non-input fields still works.

  1. Insert two paragraph
  2. At the beginning of the second paragraph, press ArrowLeft
  3. Ensure that focus is placed at the end of the first paragraph

Verify that only unmodified vertical arrow press in native input transitions focus:

  1. Click editor title
  2. Press ArrowRight
  3. Observe no focus change
  4. Press Ctrl/Cmd + ArrowDown
  5. Observe no focus change
  6. Press ArrowDown
  7. Ensure that focus is placed in a new default paragraph

Ensure unit tests and end-to-end tests pass:

npm run test-unit
npm run test-e2e

@aduth aduth added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Sep 17, 2018
@aduth aduth requested a review from afercia September 17, 2018 20:55
Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

Implements the desired behaviour in my tests 👍


// Native inputs should not navigate horizontally.
const { tagName } = element;
return tagName !== 'INPUT' && tagName !== 'TEXTAREA';
Copy link
Member

Choose a reason for hiding this comment

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

Would it make sense to apply this to all the editables?

Copy link
Member Author

Choose a reason for hiding this comment

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

Can you elaborate on what you mean? Are you thinking to reverse this condition so that we test whether the candidate is explicitly contentEditable ? Or do you mean we should include editables In the excluded set of candidates? That would cause issues for navigating between paragraphs, where we do want ArrowRight to navigate between blocks.

@aduth aduth force-pushed the update/6468-writing-flow-input-horizontal-nav branch from e556b61 to 5a096c6 Compare September 27, 2018 12:52
@aduth aduth force-pushed the update/6468-writing-flow-input-horizontal-nav branch from 5a096c6 to 10902b6 Compare October 18, 2018 14:54
@aduth aduth merged commit f1d163a into master Oct 18, 2018
@aduth aduth deleted the update/6468-writing-flow-input-horizontal-nav branch October 18, 2018 15:13
antpb pushed a commit to antpb/gutenberg that referenced this pull request Oct 26, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants