Repository navigation
Fix: accessibility defects across settings, widgets and the dashboard - #143
Merged
Merged
Conversation
Name the settings toggles from the row label beside them, rather than from an aria-label on the wrapping label element, where ARIA discards it and the checkbox resolved an empty name. 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. Mark every dashboard page but the current one inert, on the home pager and in the folder overlay: an off-screen page stayed in the tab order, so Tab left the visible page for tiles nobody could see. Widen the pagination dot pitch to 24px, which is an interior dot's 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. Build the books shelf as a real list and inset its hover panel from the tile edge. Translate the accessible names in the GitHub, Disk Health, Now Playing, Connections and Dashboard Switch widgets, the reorder buttons, and the pull request filter names. Add an accessibility statement.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Name the six settings toggles with
aria-labelledbypointing at the translated row label, replacing anaria-labelon 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-*-fgtoward a per-theme--chip-ink-boostand 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, addtintOverto composite a translucent fill over a backdrop, and pin the seven tinted pairs against--paneand--cp.Wrap the settings content pane in
<main>, and make the dashboard pager a<nav>landmark.Add
uniqueTitleand 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-regionsratchet lists the three that a user action still fills.Add
ACCESSIBILITY.mdstating 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,landmarksandbooks-list-semanticssuites, 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