Structure document lists correctly in reading mode

未關閉
#2,809 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
3/5
預估耗時
1-2 天
新手友好度
52/100
Issue 類型
缺陷
描述清晰度
基本清楚
活躍度
冷清
技術堆疊
react, typescript

研究方向

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.

由索引模型根據 Issue 內容生成。

描述

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.

主要語言
TypeScript
星號
10.2k
分支
772
平均合併
3 天 11 小時
30 天內合併 PR
17

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

TypeCellOS/BlockNote 的其他 Issue

查看 TypeCellOS/BlockNote 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。