Structure document lists correctly in reading mode

Abierto
#2,809 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
52/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
10.2k
Forks
772
Merge medio
3 d 11 h
PR fusionados (30 d)
17

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TypeCellOS/BlockNote

Todos los issues de TypeCellOS/BlockNote

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.