search

plone / volto

React-based frontend for the Plone Content Management System
https://demo.plone.org/
MIT License
462 stars 626 forks source link

Slate text editor causes a focus trap when tabbing #3679

Open JeffersonBledsoe opened 2 years ago

JeffersonBledsoe commented 2 years ago

Describe the bug While tabbing through a page in the blocks editor, reaching a 'slate' block causes the tab key to stop functioning. This is due to slate's ability to adjust the indent of lists using TAB or SHIFT+TAB, which DraftJS didn't seem to have out-the-box and so didn't cause an issue. If there is a way to exit the 'edit mode' of the slate editor, we need to advise the user of this behaviour to meet ATAG/ WCAG SC 2.1.2.

To Reproduce Steps to reproduce the behavior:

  1. Go to the block editor and select the first block
  2. Keep pressing tab until a text block is focused
  3. Press tab again

Expected behavior The next focusable element on the page is focused

stevepiercy commented 2 years ago

I tried the Slate Rich Text demo, and I am able to tab in and out of the editor.

Is there a plugin that takes over the TAB key while editing a list, like this one?

tiberiuichim commented 1 year ago

@stevepiercy there are misunderstanding about what volto-slate is. You can't compare it with any other slate editor built, it's a completly unique implementation. Slate by itself only gives you a "contenteditable" control. There's no buttons, no parsing of HTML, almost nothing. The way a JSON is converted to "markup", how the DOM looks like inside that content editable, it's all volto-slate.

@JeffersonBledsoe I think strictly speaking, there might be no accessibility problem, because the spec says

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)

tab and arrows. It is possible to use the arrows to escape the slate (only if the next block is also a slate, though this is an unfortunate decision that maybe we can fix)

JeffersonBledsoe commented 1 year ago

tab and arrows. It is possible to use the arrows to escape the slate (only if the next block is also a slate, though this is an unfortunate decision that maybe we can fix)

@tiberiuichim I'll be honest, I didn't know you could use the arrow keys to navigate between the slate blocks! It makes sense if you think of the volto-slate system as a 'single' rich text editor rather than separate blocks. Still would be nice to have the tab key to navigate between blocks too. Although, It does bring into question when the tab should be used by the text editor (such as the list indentation that we currently have) and when it should be used by the block editor

tiberiuichim commented 1 year ago

@JeffersonBledsoe I agree. One day I hope to have time to fix all the issues with slate.