TypeCellOS / TypeCellOS/BlockNote

Structure document lists correctly in reading mode

Open
#2,809 1 comment 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?

In reading mode, lists present in document content are not structured with <ul> and <li> elements. The list type is indicated by a data-content-type="bulletListItem" attribute on a <div>, without semantic value. Lists are rendered visually but are not properly conveyed by assistive technologies.

What did you expect to happen?

Each list must be marked up with <ul> (unordered list) or <ol> (ordered list) and its items with <li>, in order to be correctly conveyed by assistive technologies.

Before:

<div class="bn-block" data-node-type="blockContainer">
  <div class="bn-block-content" data-content-type="bulletListItem">
    <p class="bn-inline-content">…</p>
  </div>
</div>

After:

<ul>
  <li><p>…</p></li>
</ul>
Steps to reproduce

Open a document containing a list in Docs in reading mode (reader role).
Inspect the list's source code.
Observe the absence of <ul> / <ol> and <li> elements.
Possible solution

BlockNote version

0.51.1

Environment

No response

Additional context

A blind user navigating with a screen reader cannot identify lists as such. They do not benefit from "list of X items" announcements and cannot navigate from item to item using list navigation shortcuts.

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 locating the reading-mode renderer used by Docs in the reader role and inspect how blocks with data-content-type="bulletListItem" are emitted. Verify the resulting structure for ordered and unordered lists, including li elements, by inspecting a document containing lists in reading mode with assistive-technology semantics in mind.

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
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.