TypeCellOS / TypeCellOS/BlockNote

Structure document lists correctly in reading mode

Ouverte
#2,809 1 commentaire 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?

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.

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 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.

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

Recevez les nouvelles issues par e-mail

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