Skip to content

wordpress - core/table: optie first row as header. (A11y accessibility issue) #98

Description

@WybeBosch

Waarom

https://support.yard.nl/agent/yarddigital/yard-digital-agency/tickets/details/300585000066065546
Image

Deze persoon gebruikt de linker kolom qua leesvolgorde als "header" , en dat betekend dat de linkjes rechts niet weten "waar ze bij horen".


WCAG-toegankelijkheid: herhaalde linkteksten in tabelrijen (bv. "DSO", "Vergunningcheck") moeten herleidbaar zijn naar hun rij. Daarvoor moet de eerste cel van elke rij een <th scope="row"> zijn i.p.v. een <td>. Het core/table blok heeft hier geen optie voor.

Wat

Voeg aan core/table een optie "Eerste kolom als rijkop" toe (toggle in de blokinstellingen, standaard uit). Staat deze aan, dan wordt de eerste cel van elke rij in de <tbody> server-side omgezet naar <th scope="row">.

Hoort thuis in src/Hooks — zelfde patroon als de bestaande render_block_core/embed hook + editor-JS zoals default-block-hooks/media-text.js.

Aanpak

  • JS — nieuw src/Hooks/resources/js/default-block-hooks/table.js (importeren in index.js):
    • blocks.registerBlockType → boolean attribuut rowHeader toevoegen aan core/table.
    • editor.BlockEdit HOC → InspectorControls toggle "Eerste kolom als rijkop".
    • Het attribuut staat in de blok-comment (niet in de opgeslagen HTML) → bestaande tabellen blijven geldig, geen deprecation nodig.
  • PHP — in DefaultHookManager::boot(): add_filter('render_block_core/table', …, 10, 2). Bij rowHeader de eerste <td> per <tbody>-rij omzetten naar <th scope="row">.
    • Let op: WP_HTML_Tag_Processor kan geen tag hernoemen → gebruik DOMDocument. Testen met UTF-8 / &nbsp; / accenten (ë, ï).

⚠️ Keuze voor wie dit oppakt: frontend-CSS (A of B)

Een <th> is standaard vet + gecentreerd. Dat moet gereset worden, en de plugin levert nu géén frontend-CSS.

  • A — plugin levert een kleine neutrale reset mee (.wp-block-table tbody th[scope="row"]font-weight: inherit; text-align: inherit). Werkt out-of-the-box op elke site, maar de plugin moet dan vóór het eerst frontend-CSS gaan bundelen (nieuwe webpack-entry + enqueue).
  • B — plugin blijft markup-only; elk thema regelt de styling zelf.

Voor Zuiderzeeland doet het thema sowieso zijn eigen styling (randen/kleuren) — zie het gekoppelde site-issue.


Site-issue: yardinternet/zuiderzeeland#180

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions