larvit/plainpages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lilleman auf Larv
2026-06-15 16:53:07 +02:00
parent 6f590148af
commit 645a316419
12 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/data-table.test.ts
View File

@@ -55,8 +55,8 @@ test("data-table renders sortable headers, row-select, typed cells, badges and k
// Actions header.
assert.match(html, /<th class="col-actions" scope="col"><span class="sr-only">Actions<\/span><\/th>/);
// Typed cells: user (avatar + strong), classed text, badge tone, raw html.
assert.match(html, /<td><span class="cell-user"><span class="avatar" aria-hidden="true">MD<\/span><span class="cell-strong">Mara Delgado<\/span><\/span><\/td>/);
// Typed cells: user identifies the row → <th scope="row">; classed text, badge tone, raw html.
assert.match(html, /<th scope="row"><span class="cell-user"><span class="avatar" aria-hidden="true">MD<\/span><span class="cell-strong">Mara Delgado<\/span><\/span><\/th>/);
assert.match(html, /<td class="cell-muted cell-mono">mara@x.io<\/td>/);
assert.match(html, /<td class="cell-muted">Engineering<\/td>/);
assert.match(html, /<td><span class="badge pos"><span class="dot"><\/span>Active<\/span><\/td>/);

8
src/shell.test.ts
View File

@@ -16,10 +16,14 @@ test("app shell renders sidebar, topbar and the content slot", async () => {
actions: '<button id="action-marker">Add</button>',
});
// Three structural landmarks of the shell.
// Skip link is the first focusable element, targeting the main landmark.
assert.match(html, /<a class="skip-link" href="#main-content">Skip to content<\/a>/);
// Three structural landmarks of the shell; the page title is the page's <h1>.
assert.match(html, /<aside class="sidebar"/);
assert.match(html, /<header class="topbar"/);
assert.match(html, /<main class="content"/);
assert.match(html, /<main class="content" id="main-content"/);
assert.match(html, /<h1 class="page-title">People<\/h1>/);
// Slots render their raw HTML where the page injects it.
assert.match(html, /<a id="nav-marker"/); // sidebar nav slot