TypeCellOS / TypeCellOS/BlockNote

Structure document lists correctly in reading mode

Aperta
#2,809 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

a11y
Lingua principale
TypeScript
Stelle
10.2k
Fork
772
Merge medio
3g 11h
PR unite (30g)
17

Descrizione

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.

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.

Direzione di ricerca

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.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.