FormidableLabs/react-live

LiveEditor Keyboard accessibility; No key present to take focus to previous or next interactive element

rvantonisse opened this issue · 2 comments

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's Code of Conduct

Code Sandbox link

TODO

Bug report

When using keyboard navigation (TAB-key) to set focus to the live editor, it is not possible to exit the editor focus state. TAB is used to manage the indentation of text, which prevents pressing TAB-key to move focus outside the editor.

Easiest reproducable demo:
- Create a page with code:
    
    <button />
    <LiveEditor />
    <button />
    
- Open the page and click the first button to set focus
- Press TAB-key to move focus to the LiveEditor
- Press TAB-key again to move focus to last button
- LiveEditor added indentation instead of moving focus.

Expected behavior would be to move focus to last button, or provide another way to exit the LiveEditor with keyboard.

I have just found related #19 closed.

As far as I could read, there have been made great efforts to make this accessible, but the work is not finished or implemented? I guess this accessibility issue could be fixed with a wrapper component, but I prefer this fixed here.