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 7 months 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