Merge pull request #34119 from backstage/fix-card-link-focus-ring

fix(ui): show focus indicator on Card when used as a link

.changeset/link-focus-visible.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+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

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'] {

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}