FormidableLabs / react-live

A flexible playground for live editing React components
https://commerce.nearform.com/open-source/react-live/
MIT License
4.26k stars 239 forks source link

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

Open rvantonisse opened 2 months ago

rvantonisse commented 2 months ago

Is there an existing issue for this?

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 commented 2 months ago

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.

carbonrobot commented 1 week ago

@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.