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

Improve the Keyboard shortcuts behavior to navigate back from the block's toolbar #3003

Closed
afercia opened this issue Oct 12, 2017 · 3 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@afercia
Copy link
Contributor

afercia commented Oct 12, 2017

Splitting this out from #2960 (comment)

See also the new fixed toolbar at the top: #2998

#2960 is going to add shortcuts to:

  • navigate from a block editing area to its toolbar: Alt-F10 and Cmd/Ctrl
  • navigate back from the toolbar to the block being edited: Escape

However, when pressing Escape, focus is moved back to the block container .editor-visual-editor__block.is-selected. For editable blocks, this is not the editable area. Instead, focus should be moved back:

  • if the block has an editing area: inside the editing area, putting the cursor in the same position where it was before or on the selection if there was a selection. This is what TinyMCE currently does in the classic editor
  • in a proper place if the block doesn't have a real editing area but has other fields

I'd say moving focus back to the container doesn't help so much the editing experience for all users, not just assistive technologies users.

See also:
https://www.w3.org/TR/wai-aria-practices/#h-note-17

Escape or Enter may return focus to the invoking context. For example, a rich text editor may have a menubar that receives focus when a shortcut key, e.g., alt + F10, is pressed while editing. In this case, pressing Escape or activating a command from the menu may return focus to the editor.

The important thing to note here is the "invoking context": if the initial context is the editing area, then I jump to the toolbar and then I jump back to the block, I'd expect to be in the same context I was in initially.

One more thing:
Probably unrelated, so maybe should be addressed separately:
Not sure why, but when clicking/pressing Enter on some buttons, for example the alignment buttons, focus stays on that button. Instead, when activating other buttons, for example bold/italic/strikethrough, focus is moved back to the editing area. This is inconsistent: all buttons should behave the same. It's also different from what TinyMCE does in the classic editor, where focus is always moved back to the editing area.

@jeffpaul
Copy link
Member

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

@jeffpaul jeffpaul added the [Status] Needs More Info Follow-up required in order to be actionable. label Feb 22, 2018
@afercia
Copy link
Contributor Author

afercia commented Feb 25, 2018

More info:

  • make a selection in an editable block
  • press Alt+F10 to move focus to the block toolbar
  • press Escape to move focus back to the block

At this point, focus is moved back to the block container:

screen shot 2018-02-25 at 13 04 49

Ideally it should be moved back to the selection (or insertion point if no selection).

For "non-editable" blocks (image, audio, video, and the like): not sure, maybe the block container is
the most proper place?

@afercia
Copy link
Contributor Author

afercia commented Apr 21, 2018

Some part of this issue have been addressed, for example moving focus back to the selection / insertion point in an editable area is implemented.

Closing in favor of #5840 and the ongoing effort in #6302.

Will split the part related to the different behavior when clicking buttons in a separate issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

No branches or pull requests

3 participants