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

RichText: fix RTL keyboard interactions #15496

Merged
merged 26 commits into from May 14, 2019

Conversation

@ellatrix
Copy link
Member

commented May 8, 2019

Description

Fixes https://core.trac.wordpress.org/ticket/47180.
Fixes arrow left/right navigation and backspace/delete at the edges of rich text areas.
Fixes some boundary issues #15466 (review).

  • In RichText, I removed some left/right key handling. We should let the browser do its thing and only interfere at boundaries.
  • I had the rework some boundary code, so coincidentally it fixes 2 issues where the boundary attribute would disappear on left/right key and on initial focus.
  • In isHorizontalEdge, the horizontal checks need to reversed in RTL.
  • In WritingFlow, the left/right arrow key handling needs to be reversed as right means previous and left means next.
  • I added e2e tests and made sure they fail in master.

Any other broken interactions?

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

closes #15553 and closes #15364

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented May 8, 2019

Just tested the RichText interactions:

  • arrows work well
  • backspace and del work as expected

But when it comes to cross-block interactions (WritingFlow?), both arrow keys and backspace/del are still broken:

  • The caret is not put at the right place
  • del at the end should merge blocks
  • backspace at the beginning should merge blocks

@ellatrix ellatrix requested review from gziolo, noisysocks and talldan as code owners May 8, 2019

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented May 8, 2019

@youknowriad I think I fixed the remaining issues.

Something else I'm seeing is e.g. left/right keys not working correctly in toolbars. Not sure if I should fix here.

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented May 8, 2019

@youknowriad How is it looking now? :)

@youknowriad
Copy link
Contributor

left a comment

The issues seem fixed to me. Thank @ellatrix

We should explore how to e2e test RTL languages too

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented May 8, 2019

Whooo :) Working on the e2e tests now, but it's not easy 😅

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented May 8, 2019

@ellatrix I actually just noticed a bug:

  • Type "shift + enter" at the end of a paragraph
  • type "Backspace"

Instead of removing the "br", it tries to merge with the previous block

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented May 9, 2019

Added e2e tests. Looking at the remaining issue now.

@ellatrix ellatrix force-pushed the try/fix-rich-text-rtl branch from a0cb3d9 to b3d4ba6 May 9, 2019

@ellatrix ellatrix requested a review from nosolosw as a code owner May 9, 2019

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented May 9, 2019

All e2e test pass for me locally. Not sure what is going on.

@youknowriad I think everything should work fine now, including the edge case you mentioned.

@ellatrix ellatrix force-pushed the try/fix-rich-text-rtl branch from c742d95 to 33ed7f3 May 9, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented May 9, 2019

There are some failing tests, I don't know if it's legit.
I confirm that in my testing all the RTL issues are fixed.

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented May 9, 2019

Yeah, fixed a few already. There's one final failing annotation test.

@ellatrix ellatrix force-pushed the try/fix-rich-text-rtl branch 4 times, most recently from 77b1106 to de2541e May 9, 2019

@ellatrix ellatrix force-pushed the try/fix-rich-text-rtl branch from e2b12c8 to fc6f293 May 14, 2019

@youknowriad youknowriad added this to the 5.7 (Gutenberg) milestone May 14, 2019

@youknowriad
Copy link
Contributor

left a comment

Just tested this again. In terms of behavior, it still seems to work as intended.

@ellatrix ellatrix merged commit c64faf4 into master May 14, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.