Make markup semantic + add semantic DOM principle (todo §1); page <h1>, skip link, row-header <th scope=row>, descriptive error pages

This commit is contained in:
2026-06-15 16:53:07 +02:00
parent 6f590148af
commit 645a316419
12 changed files with 44 additions and 22 deletions

View File

@@ -6,6 +6,7 @@
columns: { label, sortable?, sort?: "asc"|"desc", href?, className? }[]
rows: { name?, cells: Cell[], actions?: Action[] }[]
Cell ∈ string | { text, className? } | { user:{name,initials} } | { badge:{tone,label} } | { html, className? }
user cells render as <th scope="row"> — they identify the row (the row header).
Action = { label, icon?, href?, danger?, separatorBefore? }
%><%
const caption = locals.caption;
@@ -46,7 +47,7 @@
<% if (typeof cell === "string") { -%>
<td><%= cell %></td>
<% } else if (cell.user) { -%>
<td><span class="cell-user"><span class="avatar" aria-hidden="true"><%= cell.user.initials %></span><span class="cell-strong"><%= cell.user.name %></span></span></td>
<th scope="row"><span class="cell-user"><span class="avatar" aria-hidden="true"><%= cell.user.initials %></span><span class="cell-strong"><%= cell.user.name %></span></span></th>
<% } else if (cell.badge) { -%>
<td><span class="badge <%= cell.badge.tone %>"><span class="dot"></span><%= cell.badge.label %></span></td>
<% } else if (cell.html != null) { -%>