TypeCellOS / TypeCellOS/BlockNote
Table headers are not associated with data cells
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10.2k
- Forks
- 772
- Avg merge
- 3d 11h
- Merged PRs (30d)
- 17
Description
What’s broken?
This issue was identified during the Docs accessibility audit on a page containing table-related content.
Audited page:
https://docs.numerique.gouv.fr/docs/0d998bef-1b69-47ce-bd18-83d4d849c734/
In BlockNote tables, users can define row and column headers, and the generated markup uses <th> elements.
However, these headers are not explicitly associated with their related data cells.
There is currently no clear header relationship exposed through:
scope="col"scope="row"id/headersrelationships for complex tables
Because of this, screen readers may not reliably announce which header applies to each table cell.
This can make table content difficult or impossible to understand for blind users navigating with assistive technologies.
What did you expect to happen?
Table headers should be correctly associated with their related cells.
For simple tables, BlockNote should expose header relationships using scope.
Example:
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Alice</th>
<td>Designer</td>
</tr>
</tbody>
</table>
Steps to reproduce
- Insert a table
- Define one or more row or column headers.
- Inspect the generated table in the DOM.
- Notice that the table uses
<th>elements, but there is no explicit relationship between headers and data cells:- no
scope="col"on column headers; - no
scope="row"on row headers; - no
id/headersrelationship for more complex tables.
- no
BlockNote version
0.51.4
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 locating the BlockNote table markup generated after row or column headers are defined, then inspect the DOM behavior described in the issue. Done means simple tables expose the appropriate scope relationships for column and row headers, with coverage for the generated markup.
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
- 55/100