fix: replace card button with link (#2750)

Co-authored-by: Brandon Lenz <15805554+brandonlenz@users.noreply.github.com>

src/components/Link/Link.stories.tsx

@@ -59,10 +59,15 @@ export const NavLink = (): React.ReactElement => (
 
 export const StyledAsButton = (): React.ReactElement => (
   <p>
-    <Link className="usa-button" variant="unstyled" href={'#'}>
+    <Link
+      className="usa-button"
+      variant="unstyled"
+      allowSpacebarActivation
+      href={'#'}>
       This
     </Link>
-    is a link styled to look like a button.
+    is a link styled to look like a button; it can be activated with the
+    spacebar.
   </p>
 )
 

src/components/Link/Link.tsx

@@ -6,6 +6,7 @@ type StyledLinkProps<T> = {
   variant?: 'external' | 'unstyled' | 'nav'
   className?: string
   children: React.ReactNode
+  allowSpacebarActivation?: boolean
 } & T
 
 // These props are only required on the default Link
@@ -33,6 +34,13 @@ export function isCustomProps<T>(
 ): props is CustomLinkProps<T> {
   return 'asCustom' in props
 }
+// keyboard handler for 'link as a button'
+const handleKeyDown = (e: React.KeyboardEvent) => {
+  if (e.key === ' ' && e.target) {
+    e.preventDefault()
+    ;(e.target as HTMLElement).click()
+  }
+}
 
 function linkClasses<T>(
   variant: StyledLinkProps<T>['variant'],
@@ -75,11 +83,20 @@ export function Link<
       children
     )
   } else {
-    const { children, className, variant, ...linkProps } = props
+    const {
+      children,
+      className,
+      variant,
+      allowSpacebarActivation = false,
+      ...linkProps
+    } = props
 
     const classes = linkClasses(variant, className)
     return (
-      <a className={classes} {...linkProps}>
+      <a
+        className={classes}
+        {...(allowSpacebarActivation && { onKeyDown: handleKeyDown })}
+        {...linkProps}>
         {children}
       </a>
     )