TypeCellOS / TypeCellOS/BlockNote

Table headers are not associated with data cells

Ouverte
#2,825 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

a11y
Langage dominant
TypeScript
Étoiles
10.2k
Forks
772
Merge moyen
3 j 11 h
PR mergées (30 j)
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 / 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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.