From 5b85902edeb60f347f13641c84c4d42c63eab26b Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Mon, 4 May 2026 17:18:52 +0200
Subject: [PATCH] fix(ui): show focus indicator on Card when used as a link

Card's focus-ring CSS keys off data-focus-visible on the
bui-CardTrigger, but Link (the trigger when href is set) wasn't
emitting it because useLink does not track focus-visible state.
Compose useFocusRing in Link so keyboard focus is now properly
indicated on Card href=... and any other Link styled via
[data-focus-visible].

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .changeset/link-focus-visible.md         | 5 +++++
 packages/ui/src/components/Link/Link.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/link-focus-visible.md

diff --git a/.changeset/link-focus-visible.md b/.changeset/link-focus-visible.md
new file mode 100644
index 0000000000..4af0f661e4
--- /dev/null
+++ b/.changeset/link-focus-visible.md
@@ -0,0 +1,5 @@
+---
+'@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.
diff --git a/packages/ui/src/components/Link/Link.tsx b/packages/ui/src/components/Link/Link.tsx
index a66506deb0..47564ad24c 100644
--- a/packages/ui/src/components/Link/Link.tsx
+++ b/packages/ui/src/components/Link/Link.tsx
@@ -15,7 +15,7 @@
  */
 
 import { forwardRef, useRef } from 'react';
-import { useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import type { LinkProps } from './types';
 import { useDefinition } from '../../hooks/useDefinition';
 import { useResolvedHref } from '../../hooks/useResolvedHref';
@@ -33,6 +33,7 @@ const LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;
 
   const { linkProps } = useLink(restProps, linkRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
   const resolvedHref = useResolvedHref(restProps.href);
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -48,13 +49,14 @@ const LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
 
   return (
     <a
-      {...linkProps}
+      {...mergeProps(linkProps, focusProps)}
       {...dataAttributes}
       {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
       href={resolvedHref}
       ref={linkRef}
       title={title}
       className={classes.root}
+      data-focus-visible={isFocusVisible || undefined}
       onClick={handleClick}
     >
       {children}