Dangling aria-controls (#373)¶
Generated by test/visual/aria-controls-evidence.mjs.
What is being shown¶
#bdSidebar (navigation/sidebar-left.html) and #tocContents (navigation/sidebar-right.html) are emitted by _layouts/default.html alone. Their toggles live in core/header.html and core/footer-fabs.html — both included from _layouts/root.html, so they rendered on every layout.
On any layout inheriting root directly the control pointed at an element that was not in the document: inert on click, and aria-controls dangling into nothing for assistive tech.
How this bundle was produced — read this before trusting it¶
This change is Liquid, not CSS, so the usual unfixCss trick in evidence-kit.mjs cannot show both states from one served site. Instead two full Jekyll builds were made and served side by side, and the same region captured from each:
- before —
origin/main@10d6ac8, built withjekyll build --safe --strict_front_matter - after — this branch, same command
So "before" and "after" are two real builds, not one page with styles toggled.
Files¶
| file | what it shows |
|---|---|
01-before-navbar-toggle-fr-about.png / 02-after-… |
/fr/about/theme/ @375px — layout: admin, renders no #bdSidebar |
01-before-toc-fab-404.png / 02-after-… |
/404.html @375px — renders no #tocContents |
01-before-control-docs-keeps-toggle.png / 02-after-… |
control: /docs/ @375px, which does render both offcanvases |
metrics.json |
measured DOM state for all three, both builds |
Measured¶
| page | dangling refs | visible offcanvas controls |
|---|---|---|
/fr/about/theme/ |
['bdSidebar'] → [] |
40×40 button → none |
/404.html |
['tocContents'] → [] |
56×56 FAB → none |
/docs/ (control) |
[] → [] |
5 controls, byte-identical before and after |
Site-wide, across a 415-page build: 37 pages with a dangling reference → 0.
The control row is the point of the bundle. A "fix" that simply deleted these controls everywhere would zero the dangling references too — and would also remove the mobile sidebar and TOC from every page that legitimately has them. /docs/ keeps all five of its controls, unchanged.
Two things worth knowing¶
The 404 capture is at 375px, deliberately. .bd-toc-fab carries d-lg-none, so at desktop widths the dead control sat in the DOM painting nothing. A desktop crop showed two identical empty rectangles — the first version of this bundle did exactly that, and it was useless. The ARIA defect exists at every width; the visual half only exists below lg.
This change is visible, and that is intended. 37 pages lose a control. Each one did nothing when clicked, so nothing is lost but the affordance itself — but this is why the PR does not carry no-visual-change. If the pixel tier flags a diff on one of these pages, it is this change, and it is correct.