Skip to content

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 with jekyll 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.