mirror of
https://github.com/we-promise/sure.git
synced 2026-07-12 21:05:20 +00:00
77dda53ffb
* feat(ds): one canonical focus ring across primitives (#2136) Replaces the grab-bag of per-primitive focus indicators (neutral ring-alpha-black/white, outline-gray-900/white, faint form-field ring-4) with a single recipe — the #1737 accessibility follow-up. - New --color-focus-ring token: blue-600 (light) / blue-500 (dark), >=4:1 against both surfaces. - Canonical .focus-ring / .focus-ring-within in components.css: a 2px outline + 2px offset on :focus-visible only. Outline (not a box-shadow ring) so the offset gap is transparent on any surface with no layout shift; :focus-visible so it never shows for mouse/touch. - Applied to every focusable DS primitive: Button (had none), Link, Disclosure summary, Tabs nav, MenuItem (replaces the browser-default box), SearchInput, Tooltip trigger, Popover trigger, Select panel (focus-within), Toggle (peer-driven outline-focus-ring). .form-field adopts it via :focus-within, replacing the ~1:1 ring-4. - Dialog close button is a DS::Button icon variant, so it inherits the focus-visible-only ring and keeps no resting border (fixes "stuck ring"). Verified in-browser, light+dark: focus-visible ring on button, input, and full-width menu row — consistent blue 2px+offset, legible on both surfaces. Remaining follow-up: >=44px touch targets (disclosure trigger, composer send); bespoke notification / account-new close buttons that still carry a permanent border. * fix(ds): #2136 interactive-state follow-ups — touch target + close-button chrome - Disclosure default trigger: add min-h-11 (44px) so the standalone disclosure summary clears the touch-target minimum (was px-3 py-2 ~36px). Composer send + the coming-soon icons are already DS::Button icon/md (w-11 h-11). - Notification close buttons (sync_toast, notice): drop the resting border-alpha-black-50 box ("frame shouts, glyph muted"); keep a bg-container + shadow-xs chip so the corner control stays visible over the page, and brighten the muted glyph on hover (text-subdued -> hover:text-primary). * refactor(ds): focus ring -> neutral hugging box-shadow (was blue outline) Per design feedback: the blue 2px outline + 2px offset read as a loud, detached frame on the otherwise-neutral UI. Switch the canonical .focus-ring to a soft box-shadow ring that hugs the control (follows border-radius, no gap), in the theme-aware neutral focus-ring token (alpha-black/white-400). Transparent outline kept as a forced-colors fallback; toggle peer-driver switched from outline-* to ring-* to match. Still one token, :focus-visible only. Strength is tunable (currently subtle ~1.5:1). * fix(ds): focus ring vanished on shadowed controls — outline, not box-shadow The neutral box-shadow ring lived in the components layer, so any utility-layer shadow-* (or .form-field's focus-within:shadow-none) on the same element overrode it and the ring silently disappeared on shadowed buttons/inputs. Draw the same subtle neutral ring with a hugging `outline` (outline-offset: 0) instead — a separate property with no box-shadow conflict, and it doubles as the forced-colors indicator. Toggle peer-driver switched ring-* -> outline-* to match. Look is unchanged (neutral, hugging, subtle); it just no longer vanishes. * fix(a11y): enlarge sync-toast close-button touch target (p-0.5 -> p-1.5) The hover-revealed close button had ~2px padding around a 20px icon (~24px total), at the WCAG 2.5.8 AAA boundary. p-1.5 brings the interactive area to ~32px. Addresses CodeRabbit review on #2140. * fix(ds): keep form-field's resting halo; stop the outline color flash Two testing findings: - .form-field reverts to its original always-on soft ring (focus-within ring-4 at low alpha, theme-aware) instead of adopting the keyboard-only outline. It's a resting decoration, not a focus indicator, and the lower-opacity halo was the better look. The canonical block's comment documents the deliberate opt-out. - .focus-ring/.focus-ring-within now carry a base transparent 2px outline so consumers with transition-all (form-field had it) animate transparent -> token on focus instead of passing through currentColor, which flashed as a black border appearing and then fading out. * feat(ds): focus-ring token clears WCAG 3:1 non-text contrast alpha-black-400 (20%) measured ~1.6:1 against white — visible but below the AA bar for focus indicators. Bump to the 700 stop (50%): ~3.95:1 on light containers, ~4.6:1 on dark. Recipe unchanged; one token edit via tokens:build. * fix(ds): ring the hand-rolled privacy toggle too The header pair showed two different focus treatments: panel-right (a DS::Button) got the new token ring while the hand-rolled privacy toggle next to it fell back to the browser-default ring — the sweep covered DS primitives but not bespoke buttons. Both privacy toggles (mobile + desktop) now carry .focus-ring. Also documents the transition interplay on the focused-state rule: consumers with transition-colors fade the ring in over 150ms because Tailwind v4's color transition list includes outline-color. Verified settled value at the intended 50% alpha via Playwright. * fix(ds): ring the sidebar and settings nav links The reshoot caught both nav species falling back to the browser's blue default ring — main sidebar items and settings nav items are bespoke link_to markup the primitive sweep missed, and they're the primary keyboard path in the app. Both adopt .focus-ring (main nav adds rounded-lg so the outline follows a shape). * fix(ds): retire the legacy base-layer button ring for the canonical outline The @layer base button rule still painted a ring-2 ring-offset-2 box-shadow on :focus-visible. Box-shadow and outline are independent properties, so .focus-ring (an outline) could never clear it and every button-tag primitive double-painted both indicators on keyboard focus. Apply the canonical recipe to the base button rule itself: every <button> now gets the transparent resting outline + focus-ring token on :focus-visible by default. Two bespoke buttons suppressed the outline with focus:outline-none and relied on the base ring for their keyboard indicator (category dropdown rows, the sign-up password toggle). Drop the suppression so they pick up the canonical outline — :focus-visible keeps it keyboard-only, which is what the suppression was protecting against anyway. * fix(ds): segmented control adopts the canonical focus recipe The segment rule inlined its own focus-visible outline (offset 2, alpha-400 colors) with a comment noting it was temporary until the canonical token landed — this branch is that token. Drop the inlined utilities: button segments get the outline from the base button rule, and link segments now carry .focus-ring.
71 lines
2.5 KiB
Ruby
71 lines
2.5 KiB
Ruby
# An extension to `link_to` helper. All options are passed through to the `link_to` helper with some additional
|
|
# options available.
|
|
class DS::Link < DS::Buttonish
|
|
attr_reader :frame
|
|
|
|
VARIANTS = VARIANTS.reverse_merge(
|
|
default: {
|
|
# Underline + `text-link` so the link is distinguishable by more
|
|
# than color alone (WCAG 1.4.1). Keyboard focus uses the canonical
|
|
# `.focus-ring` (#2136) so every primitive shares one indicator.
|
|
container_classes: "text-link underline underline-offset-2 hover:no-underline focus-ring",
|
|
icon_classes: "text-secondary"
|
|
}
|
|
).freeze
|
|
|
|
def merged_opts
|
|
merged_opts = opts.dup || {}
|
|
data = merged_opts.delete(:data) || {}
|
|
|
|
if frame
|
|
data = data.merge(turbo_frame: frame)
|
|
end
|
|
|
|
# External link hardening: `target="_blank"` without `rel="noopener"`
|
|
# exposes window.opener to the new tab (reverse-tabnabbing). Always
|
|
# set `noopener noreferrer` when we send the user off-tab. Authors
|
|
# can override by passing `rel:` explicitly.
|
|
if merged_opts[:target].to_s == "_blank"
|
|
merged_opts[:rel] ||= "noopener noreferrer"
|
|
end
|
|
|
|
# Icon-only links have no visible text node, so screen readers fall
|
|
# back to announcing the href. Derive a humanized fallback from the
|
|
# icon key so AT users hear *something* meaningful; explicit
|
|
# `aria: { label: }` on the caller still wins. Mirrors DS::Button.
|
|
#
|
|
# When the link also opens in a new tab, fold the cue into the
|
|
# generated `aria-label` itself — `aria-label` overrides the
|
|
# descendant accessible name, so the sr-only "(opens in new tab)"
|
|
# span in the template would otherwise be masked.
|
|
if icon_only? && icon.present?
|
|
aria = (merged_opts[:aria] || {}).symbolize_keys
|
|
if aria[:label].blank? && merged_opts[:"aria-label"].blank?
|
|
label = icon.to_s.tr("-_", " ").humanize
|
|
if merged_opts[:target].to_s == "_blank"
|
|
label = "#{label} #{I18n.t("ds.link.opens_in_new_tab", default: "(opens in new tab)")}"
|
|
end
|
|
aria[:label] = label
|
|
merged_opts[:aria] = aria
|
|
end
|
|
end
|
|
|
|
merged_opts.merge(
|
|
class: class_names(container_classes, extra_classes),
|
|
data: data
|
|
)
|
|
end
|
|
|
|
# Render an sr-only suffix when the link opens in a new tab so AT
|
|
# users hear "(opens in new tab)" — visual is a separate concern
|
|
# (callers can render a `external-link` icon if they want a glyph).
|
|
def opens_in_new_tab?
|
|
opts[:target].to_s == "_blank"
|
|
end
|
|
|
|
private
|
|
def container_size_classes
|
|
super unless variant == :default
|
|
end
|
|
end
|