Skip to content

Fix: accessibility defects across settings, widgets and the dashboard - #142

Closed
SandObserver wants to merge 5 commits into
mainfrom
fix/accessibility-control-names-and-contrast
Closed

SandObserver wants to merge 5 commits into
mainfrom
fix/accessibility-control-names-and-contrast

Conversation

@SandObserver

@SandObserver SandObserver commented Aug 23, 2026 •

Copy link
Copy Markdown
Owner

Summary

  • Name the six settings toggles with aria-labelledby pointing at the translated row label, replacing an aria-label on the wrapping <label>, where ARIA prohibits it and the checkbox resolved an empty name.

  • Link every inline-edit field to its row label in initInlineEdit, and accept a function placeholder so a translated one is resolved on use rather than at wiring time, before the catalog is fetched.

  • Lift each --chip-*-fg toward a per-theme --chip-ink-boost and give the unselected filter chip its own ink, clearing 4.5:1 for all six type pills and the chip on both the pane and a card in both themes.

  • Raise the digital clock's date line to 0.55 alpha in both modes, from 3.54:1 dark and 2.30:1 light.

  • Resolve color-mix() in the contrast test's token resolver, add tintOver to composite a translucent fill over a backdrop, and pin the seven tinted pairs against --pane and --cp.

  • Wrap the settings content pane in <main>, and make the dashboard pager a <nav> landmark.

  • Add uniqueTitle and number repeated widget frame titles in both dashboard builders.

  • Build the books shelf as a <ul> of <li> spines nested inside the shelf, with the ledge strips as siblings; declare the list role only while populated.

  • Inset the books hover panel to the tile's padding with a corner radius, and raise its type from 11/10/9px to 13/11/10px.

  • Route the accessible names in the GitHub, Disk Health, Now Playing, Connections and Dashboard Switch widgets through wt(), with catalog entries in all six locales.

  • Mark every dashboard page but the current one inert, on the home pager and in the folder overlay, so Tab cannot reach tiles that have scrolled off screen.

  • Widen the pagination dot gap to 16px, giving a 24px pitch: an interior dot's hit area is bounded by its neighbours', so the pitch was its effective width.

  • Remove the live region from System Summary, Weather, DNS and Now Playing, which announced their polled figures on a timer rather than after a user action. The text stays in the document and a widget-live-regions ratchet lists the three that a user action still fills.

  • Add ACCESSIBILITY.md stating the target standard, the partial-conformance status, the known limitations, and the assessment method, linked from the README.

  • Read the Move up and Move down button names from the catalog, and send the GitHub pull request filters as keys so the page names them from translations its catalog already held.

Testing
All green. Added control-names, landmarks and books-list-semantics suites, extended the contrast test with the tinted pairs, and verified the result with axe-core in Chromium and WebKit against a container: settings reports zero violations across all four sections and both viewports, down from two to three each. Scanned all 14 widget documents. Also checked reflow at 320px, resize to 200%, text spacing, target size by hit-testing, and a 40-stop keyboard walk across a three-page dashboard.

Checklist

  • Stays within the project constraints: one container, no runtime dependencies, no build step (see CONTRIBUTING.md).
  • Tests added or updated for new logic, and the full suite, lint, and typechecks pass.
  • Docs updated if behavior or configuration changed.
  • CHANGELOG.md updated under Unreleased if the change is user-visible.

Name the settings toggles from the row label they sit beside, rather than
from an aria-label on the wrapping label element, where ARIA discards it.
Link each inline-edit field to its row label, and resolve an inline-edit
placeholder on use so a translated one is read after the catalog loads.

Raise the type pills and the unselected filter chip above 4.5:1 on both the
pane and a card in both themes, and the digital clock's date line above it in
both of its modes. Teach the contrast test to resolve color-mix() and to
composite a translucent fill over a backdrop, and pin those pairs.

Wrap the settings content in a main landmark and make the dashboard pager a
navigation landmark. Number repeated widget frame titles.

Build the books shelf as a real list, inset its hover panel from the tile
edge, and raise the panel's type. Translate the accessible names in the
GitHub, Disk Health, Now Playing, Connections and Dashboard Switch widgets.
@SandObserver SandObserver added the ui/ux UI, UX, and accessibility only fix label Aug 23, 2026
A page that has scrolled off stayed in the DOM and in the tab order, so Tab
walked off the visible page onto tiles outside the viewport, with no indicator
to see and no page change to follow. A reader read every page as one list.
Mark every page but the current one inert, on the home pager and in the folder
overlay.

Widen the gap between the pagination dots to 24px. An interior dot's hit area
is bounded by its neighbours', so the pitch was its width and it measured 18.
System Summary restated the CPU, memory and disk figures every ten seconds.
Weather and DNS re-read their summaries on every poll, and Now Playing
re-announced the current track when nothing about it had changed. None of it
followed a user action, and all of it talked over whatever the person was
doing.

Remove the live region from those four. The text stays in the document, so a
reader still gets the figures by navigating to the widget. The regions that
remain are the ones a user action fills: the book or bay under the pointer,
and the track reached with previous or next.
State the target standard, the conformance status, what is supported, what is
not, and how it was assessed. Link it from the README beside the security and
contributing sections.
The Move up and Move down buttons built their name and their accessible name
from English literals, beside a row whose every other string is translated.
Read them from the catalog instead.

The GitHub widget received its filter names as a finished English string
assembled on the server, and put it on screen and in the accessible name. The
widget's own catalog already held all six translations. Send the filter keys
and name them on the page.

Drop the untranslated-names limitation from the accessibility statement.
@SandObserver
SandObserver force-pushed the fix/accessibility-control-names-and-contrast branch from 9764c21 to 7287817 Compare August 23, 2026 14:48
@SandObserver
SandObserver deleted the fix/accessibility-control-names-and-contrast branch August 23, 2026 14:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui/ux UI, UX, and accessibility only fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant