Restore the focus ring that #181 made invisible #198

Merged

robbertbos merged 1 commit from restore-focus-ring into main 2026-07-26 18:37:16 +00:00

Conversation 0 Commits 1 Files changed 4 +14 -5

robbertbos commented 2026-07-26 11:49:24 +00:00

Owner

Copy link

PR #196 retired Waggle's --focus-ring and mapped it onto --semantics-focus-ring-box-shadow by name. That token is not the ring.

It resolves to 0 0 0 3px var(--semantics-surfaces-base-background-color): the gap NLDD paints between an element and its outline, so the ring stays legible over busy content. Applied on its own it draws the page background onto the page background, so every element relying on the global rule lost its focus indicator (WCAG 2.4.7). Before #196 the same declaration used --focus-ring, a translucent blue, and was visible.

NLDD applies the three declarations together - -outline, -outline-offset, -box-shadow - in 113 of its own components. This does the same, in base.css and in the four places that restate the recipe locally (Toast.vue, MentionProfilePopover.vue, ImportPanel.vue, and the .mm-mention rule).

No CHANGELOG entry: the regression never reached a release, so the fix nets to zero for users.

Verified

• vue-tsc clean, 533 tests green, build green, eslint 0 errors
• Resolved values: was 0 0 0 3px <page background>, now additionally 1px solid var(--primitives-color-accent-600) at a 1px offset

Not in scope

The eight sites using outline: 2px solid var(--color-focus) are a second, working recipe. Unifying them onto NLDD's triple is a consistency improvement, not a defect, and follows separately.

PR #196 retired Waggle's `--focus-ring` and mapped it onto `--semantics-focus-ring-box-shadow` by name. That token is not the ring. It resolves to `0 0 0 3px var(--semantics-surfaces-base-background-color)`: the gap NLDD paints between an element and its outline, so the ring stays legible over busy content. Applied on its own it draws the page background onto the page background, so every element relying on the global rule lost its focus indicator (WCAG 2.4.7). Before #196 the same declaration used `--focus-ring`, a translucent blue, and was visible. NLDD applies the three declarations together - `-outline`, `-outline-offset`, `-box-shadow` - in 113 of its own components. This does the same, in `base.css` and in the four places that restate the recipe locally (`Toast.vue`, `MentionProfilePopover.vue`, `ImportPanel.vue`, and the `.mm-mention` rule). No CHANGELOG entry: the regression never reached a release, so the fix nets to zero for users. ## Verified - `vue-tsc` clean, 533 tests green, build green, eslint 0 errors - Resolved values: was `0 0 0 3px <page background>`, now additionally `1px solid var(--primitives-color-accent-600)` at a 1px offset ## Not in scope The eight sites using `outline: 2px solid var(--color-focus)` are a second, working recipe. Unifying them onto NLDD's triple is a consistency improvement, not a defect, and follows separately.

robbertbos added 1 commit 2026-07-26 11:49:24 +00:00

Restore the focus ring this PR made invisible ... eea87ac909

Retiring --focus-ring mapped it onto --semantics-focus-ring-box-shadow by name.
That token is not the ring: it resolves to a 3px shadow in
--semantics-surfaces-base-background-color, the gap NLDD paints between an
element and its outline so the ring stays legible over busy content. Applied
alone it draws the page background onto the page background, so every element
relying on the global rule lost its focus indicator (WCAG 2.4.7). Before this
PR the same declaration used Waggle's own --focus-ring, a translucent blue.

NLDD applies all three together - outline, outline-offset, box-shadow - in 113
of its own components. Do the same, in base.css and in the four places that
restate the recipe locally.

robbertbos merged commit 628ef092b9 into main 2026-07-26 18:37:16 +00:00

robbertbos deleted branch restore-focus-ring 2026-07-26 18:37:17 +00:00

robbertbos referenced this pull request 2026-07-26 19:56:29 +00:00

Nothing catches a reference to a CSS custom property that no longer exists #204

robbertbos referenced this pull request from a commit 2026-07-26 20:12:35 +00:00

Give the search box its focus ring back, and stop the empty state floating

robbertbos referenced this pull request 2026-07-26 20:12:52 +00:00

Give the search box its focus ring back, and stop the empty state floating #206

robbertbos referenced this pull request 2026-07-26 20:34:02 +00:00

Fix the CSS defects the NLDD migration left behind #207

robbertbos referenced this pull request from a commit 2026-07-26 20:54:20 +00:00

Stop focus mutating an element's radius, and widen the empty states

robbertbos referenced this pull request from a commit 2026-07-26 21:10:04 +00:00

Stop focus mutating an element's radius, and widen the empty states

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!198

No description provided.