From 9c16bf9707cb9bc6c33033268a57d55c7109ab48 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Tue, 5 May 2026 09:48:53 +0200 Subject: [PATCH] fix(ui): render focus ring on Link via data-focus-visible Style the bui-Link itself when keyboard-focused using the ring token, matching the established pattern from ButtonLink. Also tweak the changeset wording to reflect the new behavior. Co-Authored-By: Claude Opus 4.6 Signed-off-by: Emma Indal --- .changeset/link-focus-visible.md | 4 ++-- packages/ui/src/components/Link/Link.module.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.changeset/link-focus-visible.md b/.changeset/link-focus-visible.md index e43b027f9d..34c7f3e496 100644 --- a/.changeset/link-focus-visible.md +++ b/.changeset/link-focus-visible.md @@ -2,6 +2,6 @@ '@backstage/ui': patch --- -Fix `Card href=...` not showing a focus indicator on keyboard navigation. `Link` now composes `useFocusRing` and emits `data-focus-visible`, so the Card's existing focus-ring CSS matches when the trigger is focused. +Fix `Card href=...` not showing a focus indicator on keyboard navigation. `Link` now composes `useFocusRing`, emits `data-focus-visible`, and renders a `--bui-ring` outline when keyboard-focused. The Card's existing focus-ring CSS matches when the trigger is focused. -*Affected components*: Card, Link +_Affected components_: Card, Link diff --git a/packages/ui/src/components/Link/Link.module.css b/packages/ui/src/components/Link/Link.module.css index 27ffe244fb..d5cd176c96 100644 --- a/packages/ui/src/components/Link/Link.module.css +++ b/packages/ui/src/components/Link/Link.module.css @@ -37,6 +37,11 @@ text-underline-offset: calc(0.025em + 2px); text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); } + + &[data-focus-visible] { + outline: 2px solid var(--bui-ring); + outline-offset: 2px; + } } .bui-Link[data-variant='title-large'] {