learningequality / learningequality/studio
[RTE] Focus gets trapped on image node, preventing keyboard navigation
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 191
- Forks
- 307
- Avg merge
- 5d 6h
- Merged PRs (30d)
- 10
Description
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
Observed behavior
When an image is present in the Rich Text Editor and the user focuses it (e.g. by clicking or tabbing to it), focus becomes trapped on the image node. Pressing Tab does not move focus to the next interactive element — all keyboard events are swallowed by the resize handle's @keydown.prevent handler. Pressing Escape exits the resize handle but does not advance focus forward, leaving the user unable to continue navigating the page by keyboard.
https://github.com/user-attachments/assets/3bf1518d-2750-4372-8e17-84d78d7fcfcc
Errors and logs
N/A
Expected behavior
Pressing Tab while an image node is focused should move focus to the next focusable element in the natural tab order, allowing users to continue keyboard navigation without interruption.
User-facing consequences
Keyboard-only users are completely blocked from continuing navigation once focus lands on an image in the editor.
Steps to reproduce
- Open a Rich Text Editor field in edit mode
- Insert an image into the editor
- Click or Tab to focus the image node
- Press Tab — focus does not advance to the next focusable element
Acceptance Criteria
- Pressing Tab while an image node is focused moves focus to the next focusable element in the natural tab order
- Pressing Shift+Tab while an image node is focused moves focus to the previous focusable element
- No keyboard trap exists when navigating through an editor containing one or more images
- Existing resize handle keyboard controls (Arrow keys, Escape/Enter to exit resize) continue to work correctly
AI usage
I identified the bug and provided the key details; Claude Code (claude-sonnet-4-6) helped draft the issue sections, which I reviewed and confirmed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue in a Rich Text Editor with an image, then inspect the resize handle's keyboard behavior, including its keydown.prevent handling. Confirm that Tab and Shift+Tab follow the natural tab order, while Arrow keys and Escape/Enter retain their existing resize controls and no keyboard trap remains.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100