@toptal/picasso-link 100.0.2-alpha-pf-react-19-improvements-970580a42.0 → 100.0.2

package/dist-package/src/Link/Link.d.ts

@@ -21,7 +21,7 @@ export type Props = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
     variant?: VariantType;
     /** Controls color of the link */
     color?: ColorType;
-    /** Indicates the order of receiving focus. If not set will not receive focus. */
+    /** Indicates the order of receiving focus. Defaults to 0 for a link with `onClick` and no `href` */
     tabIndex?: number;
     /** Indicates that the user cannot interact with the Link or its children */
     disabled?: boolean;
@@ -42,6 +42,8 @@ type ViewModel = {
     weight: 'inherit' | 'semibold';
     style?: React.CSSProperties;
     tabIndex?: number;
+    role?: React.AriaRole;
+    onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>;
     as: Props['as'];
     ariaDisabled?: boolean;
     nativeHTMLAttributes: Omit<Props, keyof BaseProps>;

package/dist-package/src/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7E,QAAA,MAAM,eAAe,4BAA6B,CAAA;AAClD,QAAA,MAAM,iBAAiB,+BAAgC,CAAA;AAEvD,KAAK,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,KAAK,SAAS,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AA0CjD,MAAM,MAAM,KAAK,GAAG,SAAS,GAC3B,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACxC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAKH,KAAK,SAAS,GAAG;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,SAAS,CAAC,CAAA;CACnD,CAAA;AAGD,eAAO,MAAM,kBAAkB,UAAW,KAAK,KAAG,SAqDjD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,oBAAoB,CAAC,KAAK,CAyC3C,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7E,QAAA,MAAM,eAAe,4BAA6B,CAAA;AAClD,QAAA,MAAM,iBAAiB,+BAAgC,CAAA;AAEvD,KAAK,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,KAAK,SAAS,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAkDjD,MAAM,MAAM,KAAK,GAAG,SAAS,GAC3B,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACxC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oGAAoG;IACpG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAKH,KAAK,SAAS,GAAG;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,MAAM,EAAE,SAAS,GAAG,UAAU,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAA;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;IACzD,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,SAAS,CAAC,CAAA;CACnD,CAAA;AAkBD,eAAO,MAAM,kBAAkB,UAAW,KAAK,KAAG,SA+DjD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,oBAAoB,CAAC,KAAK,CA2C3C,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist-package/src/Link/Link.js

@@ -46,19 +46,37 @@ const COLOR_DISABLED_MAP = {
         },
     },
 };
+// One shadow class and no radius, so a component rendered `as={Link}` keeps
+// its own focus ring and corners
+const FOCUS_RING_MAP = {
+    blue: 'focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)]',
+    white: 'focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.white)_48%,transparent)]',
+};
 const defaultColor = 'blue';
 const defaultVariant = 'anchor';
+// Enter and Space click it, as they do a button
+const createActionKeyDownHandler = (onKeyDown) => (event) => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (!event.defaultPrevented &&
+        (event.key === 'Enter' || event.key === ' ')) {
+        event.preventDefault();
+        event.currentTarget.click();
+    }
+};
 /* eslint-disable complexity */
 export const calculateViewModel = (props) => {
-    const { href, onClick, className, as = 'a', color: inputColor = 'blue', style, variant: inputVariant = 'anchor', tabIndex, target, rel, disabled, visited = false, noUnderline, 'aria-disabled': ariaDisabled } = props, nativeHTMLAttributes = __rest(props, ["href", "onClick", "className", "as", "color", "style", "variant", "tabIndex", "target", "rel", "disabled", "visited", "noUnderline", 'aria-disabled']);
+    const { href, onClick, className, as = 'a', color: inputColor = 'blue', style, variant: inputVariant = 'anchor', tabIndex, target, rel, disabled, visited = false, noUnderline, 'aria-disabled': ariaDisabled, role, onKeyDown } = props, nativeHTMLAttributes = __rest(props, ["href", "onClick", "className", "as", "color", "style", "variant", "tabIndex", "target", "rel", "disabled", "visited", "noUnderline", 'aria-disabled', "role", "onKeyDown"]);
     const sanitizedRel = sanitizeRel(rel, target);
+    // An `<a>` without `href` can't be focused or operated by keyboard
+    const isAction = as === 'a' && !href && Boolean(onClick);
+    const isEnabledAction = isAction && !disabled;
     // When Link is used as={Link}, TypeScript can't ensure the input to the Link is compatible with its Props type.
     const color = supportedColors.includes(inputColor) ? inputColor : defaultColor;
     const variant = supportedVariants.includes(inputVariant)
         ? inputVariant
         : defaultVariant;
     return {
-        className: twMerge('focus:outline-hidden hover:underline leading-[inherit]', COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'], disabled ? 'cursor-not-allowed' : '', noUnderline ? 'no-underline!' : '', visited
+        className: twMerge('focus:outline-hidden hover:underline leading-[inherit]', FOCUS_RING_MAP[color], COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'], disabled ? 'cursor-not-allowed' : '', noUnderline ? 'no-underline!' : '', visited
             ? color === 'blue'
                 ? 'visited text-purple-500'
                 : 'visited text-gray-500'
@@ -70,7 +88,11 @@ export const calculateViewModel = (props) => {
         weight: variant === 'action' ? 'semibold' : 'inherit',
         color: 'inherit',
         style,
-        tabIndex,
+        tabIndex: isEnabledAction ? tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0 : tabIndex,
+        role: isAction ? role !== null && role !== void 0 ? role : 'button' : role,
+        onKeyDown: isEnabledAction
+            ? createActionKeyDownHandler(onKeyDown)
+            : onKeyDown,
         as,
         ariaDisabled: disabled || ariaDisabled,
         nativeHTMLAttributes,
@@ -84,7 +106,7 @@ export const Link = forwardRef(function Link(_a, ref) {
         noUnderline }));
     return (React.createElement(Typography, Object.assign({}, viewModel.nativeHTMLAttributes, { ref: ref, as: viewModel.as, 
         // @ts-expect-error Typography is incompatible with href prop
-        href: viewModel.href, target: viewModel.target, rel: viewModel.rel, onClick: viewModel.onClick, color: viewModel.color, weight: viewModel.weight, className: viewModel.className, style: viewModel.style, tabIndex: viewModel.tabIndex, "aria-disabled": viewModel.ariaDisabled }), props.children));
+        href: viewModel.href, target: viewModel.target, rel: viewModel.rel, onClick: viewModel.onClick, color: viewModel.color, weight: viewModel.weight, className: viewModel.className, style: viewModel.style, tabIndex: viewModel.tabIndex, role: viewModel.role, onKeyDown: viewModel.onKeyDown, "aria-disabled": viewModel.ariaDisabled }), props.children));
 });
 Link.displayName = 'Link';
 export default Link;

package/dist-package/src/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-link",
-  "version": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
+  "version": "100.0.2",
   "description": "Toptal UI components library - Link",
   "publishConfig": {
     "access": "public"
@@ -18,26 +18,26 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-utils": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-typography": "100.0.2-alpha-pf-react-19-improvements-970580a42.0"
+    "@toptal/picasso-utils": "100.0.1",
+    "@toptal/picasso-typography": "100.0.1"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@toptal/picasso-tailwind-merge": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-provider": "^100.2.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-tailwind": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0"
+    "react": ">=17.0.0 < 19.0.0",
+    "@toptal/picasso-tailwind-merge": "^100.0.0",
+    "@toptal/picasso-tailwind": "^100.0.0",
+    "@toptal/picasso-provider": "^100.2.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "100.2.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-tailwind-merge": "100.0.1-alpha-pf-react-19-improvements-970580a42.0",
-    "@toptal/picasso-test-utils": "100.1.1-alpha-pf-react-19-improvements-970580a42.0"
+    "@toptal/picasso-tailwind-merge": "100.0.0",
+    "@toptal/picasso-provider": "100.2.0",
+    "@toptal/picasso-test-utils": "100.1.0"
   },
   "files": [
     "dist-package/**",

package/src/Link/Link.tsx

@@ -50,6 +50,14 @@ const COLOR_DISABLED_MAP: Record<
   },
 }
 
+// One shadow class and no radius, so a component rendered `as={Link}` keeps
+// its own focus ring and corners
+const FOCUS_RING_MAP: Record<ColorType, string> = {
+  blue: 'focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)]',
+  white:
+    'focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.white)_48%,transparent)]',
+}
+
 export type Props = BaseProps &
   AnchorHTMLAttributes<HTMLAnchorElement> & {
     /** Content of the component */
@@ -67,7 +75,7 @@ export type Props = BaseProps &
     variant?: VariantType
     /** Controls color of the link */
     color?: ColorType
-    /** Indicates the order of receiving focus. If not set will not receive focus. */
+    /** Indicates the order of receiving focus. Defaults to 0 for a link with `onClick` and no `href` */
     tabIndex?: number
     /** Indicates that the user cannot interact with the Link or its children */
     disabled?: boolean
@@ -93,11 +101,28 @@ type ViewModel = {
   weight: 'inherit' | 'semibold'
   style?: React.CSSProperties
   tabIndex?: number
+  role?: React.AriaRole
+  onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>
   as: Props['as']
   ariaDisabled?: boolean
   nativeHTMLAttributes: Omit<Props, keyof BaseProps>
 }
 
+// Enter and Space click it, as they do a button
+const createActionKeyDownHandler =
+  (onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>) =>
+  (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+    onKeyDown?.(event)
+
+    if (
+      !event.defaultPrevented &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      event.preventDefault()
+      event.currentTarget.click()
+    }
+  }
+
 /* eslint-disable complexity */
 export const calculateViewModel = (props: Props): ViewModel => {
   const {
@@ -115,10 +140,15 @@ export const calculateViewModel = (props: Props): ViewModel => {
     visited = false,
     noUnderline,
     'aria-disabled': ariaDisabled,
+    role,
+    onKeyDown,
     ...nativeHTMLAttributes
   } = props
 
   const sanitizedRel = sanitizeRel(rel, target)
+  // An `<a>` without `href` can't be focused or operated by keyboard
+  const isAction = as === 'a' && !href && Boolean(onClick)
+  const isEnabledAction = isAction && !disabled
 
   // When Link is used as={Link}, TypeScript can't ensure the input to the Link is compatible with its Props type.
   const color = supportedColors.includes(inputColor) ? inputColor : defaultColor
@@ -129,6 +159,7 @@ export const calculateViewModel = (props: Props): ViewModel => {
   return {
     className: twMerge(
       'focus:outline-hidden hover:underline leading-[inherit]',
+      FOCUS_RING_MAP[color],
       COLOR_DISABLED_MAP[color][variant][disabled ? 'disabled' : 'normal'],
       disabled ? 'cursor-not-allowed' : '',
       noUnderline ? 'no-underline!' : '',
@@ -147,7 +178,11 @@ export const calculateViewModel = (props: Props): ViewModel => {
     weight: variant === 'action' ? 'semibold' : 'inherit',
     color: 'inherit',
     style,
-    tabIndex,
+    tabIndex: isEnabledAction ? tabIndex ?? 0 : tabIndex,
+    role: isAction ? role ?? 'button' : role,
+    onKeyDown: isEnabledAction
+      ? createActionKeyDownHandler(onKeyDown)
+      : onKeyDown,
     as,
     ariaDisabled: disabled || ariaDisabled,
     nativeHTMLAttributes,
@@ -190,6 +225,8 @@ export const Link: OverridableComponent<Props> = forwardRef<
       className={viewModel.className}
       style={viewModel.style}
       tabIndex={viewModel.tabIndex}
+      role={viewModel.role}
+      onKeyDown={viewModel.onKeyDown}
       aria-disabled={viewModel.ariaDisabled}
     >
       {props.children}

package/src/Link/__snapshots__/test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Link renders 1`] = `
     class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
-      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] text-blue visited:text-purple no-underline"
     >
       Please verify your email
     </a>
@@ -21,7 +21,7 @@ exports[`Link when disabled renders disabled link 1`] = `
   >
     <a
       aria-disabled="true"
-      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-gray underline cursor-pointer"
+      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] text-gray underline cursor-pointer"
       download="filename"
       rel="noopener"
     >
@@ -37,7 +37,7 @@ exports[`Link when native attributes are provided renders native attributes 1`]
     class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
     <a
-      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
+      class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] text-blue visited:text-purple no-underline cursor-pointer"
       download="filename"
       href="https://toptal.com/filename.txt"
       rel="noopener"
@@ -56,7 +56,7 @@ exports[`Link when using react-router Link renders a Link from react-router 1`]
   >
     <div>
       <a
-        class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+        class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] text-blue visited:text-purple no-underline"
         href="/"
       >
         Please verify your email

package/src/Link/test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@toptal/picasso-test-utils'
+import { render, fireEvent, screen } from '@toptal/picasso-test-utils'
 import { MemoryRouter, Link as RouterLink } from 'react-router-dom'
 
 import { calculateViewModel } from './Link'
@@ -110,6 +110,85 @@ describe('Link', () => {
       expect(document.querySelector('a')).not.toHaveAttribute('rel', 'noopener')
     })
   })
+
+  describe('when focused with the keyboard', () => {
+    it.each([
+      ['blue', 'blue.500'],
+      ['white', 'white'],
+    ] as const)('shows a %s focus ring', (color, ringColor) => {
+      render(
+        <Link href='#' color={color}>
+          Link
+        </Link>
+      )
+
+      expect(screen.getByRole('link')).toHaveClass(
+        `focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.${ringColor})_48%,transparent)]`
+      )
+    })
+  })
+
+  describe('when it has onClick and no href', () => {
+    it('renders a focusable button', () => {
+      render(<Link onClick={jest.fn()}>Action</Link>)
+
+      expect(screen.getByRole('button', { name: 'Action' })).toHaveAttribute(
+        'tabindex',
+        '0'
+      )
+    })
+
+    it.each(['Enter', ' '])('calls onClick on "%s"', key => {
+      const handleClick = jest.fn()
+
+      render(<Link onClick={handleClick}>Action</Link>)
+      fireEvent.keyDown(screen.getByRole('button'), { key })
+
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('lets onKeyDown prevent the click', () => {
+      const handleClick = jest.fn()
+
+      render(
+        <Link onClick={handleClick} onKeyDown={event => event.preventDefault()}>
+          Action
+        </Link>
+      )
+      fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
+
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+
+    it('is not focusable or operable when disabled', () => {
+      const handleClick = jest.fn()
+
+      render(
+        <Link onClick={handleClick} disabled>
+          Action
+        </Link>
+      )
+      const action = screen.getByRole('button')
+
+      fireEvent.keyDown(action, { key: 'Enter' })
+
+      expect(action).not.toHaveAttribute('tabindex')
+      expect(action).toHaveAttribute('aria-disabled', 'true')
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when it has href and onClick', () => {
+    it('stays a link', () => {
+      render(
+        <Link href='#' onClick={jest.fn()}>
+          Link
+        </Link>
+      )
+
+      expect(screen.getByRole('link')).not.toHaveAttribute('tabindex')
+    })
+  })
 })
 
 describe('calculateViewModel', () => {
@@ -186,7 +265,7 @@ describe('calculateViewModel', () => {
       const whiteResult = calculateViewModel(whiteProps)
 
       expect(blueResult.className).toContain(
-        'focus:outline-hidden hover:underline leading-[inherit] text-gray-600 underline cursor-not-allowed'
+        'text-gray-600 underline cursor-not-allowed'
       )
       expect(whiteResult.className).toContain('text-gray-600')
     })