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

Button block acts as keyboard trap on Firefox #5693

Closed
braders opened this issue Mar 19, 2018 · 6 comments · Fixed by #11601
Closed

Button block acts as keyboard trap on Firefox #5693

braders opened this issue Mar 19, 2018 · 6 comments · Fixed by #11601
Labels
[Block] Buttons Affects the Buttons Block Browser Issues Issues or PRs that are related to browser specific problems [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Priority] High Used to indicate top priority items that need quick attention [Type] Bug An existing feature does not function as intended

Comments

@braders
Copy link

braders commented Mar 19, 2018

Steps to Reproduce

  1. Open the demo post on Firefox (I am using Firefox developer edition, which is currently numbered at Firefox 60).
  2. Insert cursor in a paragraph block, and navigate down the page with the down arrow key.
  3. Once you reach the button block the URL is focussed, with the carat before the http:// and the keyboard down arrow does not work. You have to tab into the next block, which is jaring for anyone expecting to be able to use their arrow keys.

I am using Windows.

Expected Behavior

All editors that I can remember using recently have allowed moving between all text blocks using the left/ right/ up/ down arrow keys alone. This behaivour should be fully supported in Gutenburg.

@jeffpaul jeffpaul added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Browser Issues Issues or PRs that are related to browser specific problems labels Mar 21, 2018
@mtias mtias added the Needs Testing Needs further testing to be confirmed. label Jul 17, 2018
@designsimply
Copy link
Member

Tested with Firefox 61.0.1 on macOS 10.13.5 and was unable to trigger the problem. Going to download and test with Windows for good measure.

@afercia afercia removed the Needs Testing Needs further testing to be confirmed. label Sep 3, 2018
@afercia
Copy link
Contributor

afercia commented Sep 3, 2018

I can reproduce with Firefox 61 on Windows (as the reporter reported.. it happens on Windows(. With a small addition: I first have to move the cursor right or left in the URL field and then the Up or Down arrows don't do anything. Seems the writing flow definitely needs to be reviewed in the Button block.

@afercia
Copy link
Contributor

afercia commented Sep 3, 2018

Also, on Windows / FF the caret is at the end of the URL but isi out of view (the field content doesn't scroll horizontally as in Chrome) so that it's not really clear where the caret is.

@afercia afercia added this to the WordPress 5.0 milestone Sep 3, 2018
@mtias mtias added [Priority] High Used to indicate top priority items that need quick attention [Block] Buttons Affects the Buttons Block labels Oct 26, 2018
@timwright12
Copy link
Contributor

I'll take a run at this one (via @10up) - cc @tofumatt @afercia

@timwright12
Copy link
Contributor

Just tested this, it seems like the root issue is that in Win FF the up and down arrows don't move the caret within the input like they do in Mac FF|Chrome|Safari, so the focus is getting stuck. When the caret is manually moved to the start, the up key works, and when the caret is moved the end, the down key works.

If you test this Pen you'll see a similar behavior: https://codepen.io/timwright12/pen/JeGKMr

Ultimately, this seems like a bug (or feature?) with Windows Firefox (not Gutenberg), but I don't see much harm in added a key binding for up and down when the input is focused just to move the caret around.

Thoughts @tofumatt @afercia ?

@timwright12
Copy link
Contributor

Pretty small fix: #11601

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block Browser Issues Issues or PRs that are related to browser specific problems [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Priority] High Used to indicate top priority items that need quick attention [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants