TypeCellOS / TypeCellOS/BlockNote

Focus not moved when image edit panel opens

Open
#2,813 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y
Dominant language
TypeScript
Stars
10.2k
Forks
772
Avg merge
3d 11h
Merged PRs (30d)
17

Description

What’s broken?

After inserting an image (via / or /image/), the first command menu collapses but the focus remains on it. The image edit panel opens without the focus being moved to it and without any information being provided to the user indicating that a new panel is now available.

Impact

A blind user navigating with a screen reader inserts an image: the first menu collapses, the focus remains on it, and the edit panel opens silently. The user does not know that the panel is available and cannot access it without a mouse.

What did you expect to happen?

When the image edit panel opens, the focus must be moved to this panel or to its first interactive element. If moving the focus is not desirable, the panel opening must be announced via an aria-live region.

Steps to reproduce

Open a Docs document
Navigate using keyboard only
Insert an image via / or /image/
Notice that the focus remains on the first collapsed menu; the edit panel is open but inaccessible without a mouse

BlockNote version

0.51.1

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.

Research direction

Start by reproducing the issue in a Docs document with keyboard navigation, inserting an image via / or /image/. Trace the image edit panel opening and its focus behavior. Done means focus reaches the panel or its first interactive element, or the panel opening is announced through an aria-live region, and the keyboard-only flow is accessible to a screen reader user.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.