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

Open
#390 2 comments 0 reactions 1 assignee View on GitHub

@r281GQ is already working on this.

Since Sep 13, 2024.

Assessment

This issue has not been assessed yet.

Description

enhancement Issue: Accepted
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.
Dominant language
TypeScript
Stars
4.6k
Forks
260
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from FormidableLabs/react-live

All issues in FormidableLabs/react-live

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.