Repository navigation
feat: Tables a11y (BLO-1230) (BLO-1231) - #3215
matthewlipski wants to merge 6 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the
 |
|
matthewlipski
changed the title
matthewlipski
changed the title
matthewlipski
changed the title
nperez0111
left a comment
nperez0111
left a comment
There was a problem hiding this comment.
I'm confused on the approach for this. Is is that we need to do a bunch of calculations to get the right attribute values? Why are we not just adding new attributes to the nodes that we need. Tables are especially easy to do this from since they are transformed anyway for the blocknote representation
| { type: "table", content: tableContent } as any, | ||
| ); | ||
|
|
||
| const isHeaderCol = headerCols[absoluteCellIndex.col]; |
| } | ||
| // Mark the cell as a header if it is a tableHeader node. | ||
| headerMatrix[rowIndex][cellIndex] = cellNode.type.name === "tableHeader"; | ||
| row.cells = rowNode.content.content.map((cellNode) => { |
There was a problem hiding this comment.
I'm confused why this changed
There was a problem hiding this comment.
This and the above change you commented on fix a bug with converting to/from TipTap nodes. Check commit c141d42 which adds a test case for it. When either of the changes is reverted, the test fails on round trip.
| applyHeaderScope, | ||
| } from "./cellAttributes.js"; | ||
|
|
||
| export function TableAccessibilityPlugin() { |
There was a problem hiding this comment.
I'm confused on why we are doing this via decorations and serializers, why are we not just adding the attributes to the table cells/headers
There was a problem hiding this comment.
To get the value for headers we need the position of the cell, so we need to use a node view. I tried doing that instead of using decorations but settled on decorations because it was more readable basically.
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/diagram-block
@blocknote/mantine
@blocknote/math-block
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
@blocknote/xl-typst-exporter
commit: |
Summary
This PR adds some additional HTML attributes to tables:
idscope(determines whether header is for a row or column)headers(determines which headers the cell is under)They are not required by WCAG guidelines and so are not caught in axe scans, but make the relationships between cells and headers more explicit, especially when they span multiple rows/columns.
This is implemented using decorations. Serializing to HTML has additional logic to apply the attributes as decorations can't be applied.
Closes #2825
Closes #2826
Rationale
This is an a11y improvement.
Changes
TableAccessibilityPluginto apply cell & header decorationsImpact
N/A
Testing
Updates table format conversion snapshots. No changes to a11y tests as axe scans do not check this.
Screenshots/Video
N/A
Checklist
Additional Notes
N/A