Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Table headers are not associated with data cells

Aperta
#2,825 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

a11y

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 / headers relationships 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
  1. Insert a table
  2. Define one or more row or column headers.
  3. Inspect the generated table in the DOM.
  4. 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 / headers relationship for more complex tables.
BlockNote version

0.51.4

Lingua principale
TypeScript
Stelle
10.2k
Fork
772
Merge medio
6g 3h
PR unite (30g)
26

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TypeCellOS/BlockNote

Tutte le issue di TypeCellOS/BlockNote

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.