react-live icon indicating copy to clipboard operation
react-live copied to clipboard

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

Open rvantonisse opened this issue 1 year ago • 2 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Code of Conduct

  • [X] 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.

rvantonisse avatar Jul 11 '24 14:07 rvantonisse

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.

rvantonisse avatar Jul 11 '24 15:07 rvantonisse

@rvantonisse Thanks for bringing this issue back into the open. I have added it to our internal priority list, but have no projected timeline for completion.

carbonrobot avatar Sep 05 '24 19:09 carbonrobot