@react-md/core 1.0.0-next.2 → 1.0.0-next.3

package/src/app-bar/__tests__/__snapshots__/AppBar.tsx.snap

@@ -2,98 +2,98 @@
 
 exports[`AppBar should allow for different heights 1`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 2`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 3`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--prominent rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--prominent rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 4`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--prominent-dense rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--prominent-dense rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 5`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--dense rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--dense rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 6`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--auto rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--auto rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 1`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 2`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-secondary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-secondary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 3`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--surface"
+  class="rmd-app-bar rmd-app-bar--surface rmd-box rmd-box--padded rmd-box--full-width"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 4`] = `
 <div
-  class="rmd-app-bar"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 1`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 2`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 3`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--bottom rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--bottom rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -106,7 +106,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container custom-class-name"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container custom-class-name"
   data-testid="app-bar"
   style="background-color: orange;"
 >
@@ -120,7 +120,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -133,7 +133,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -146,7 +146,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -159,7 +159,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 6`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -172,7 +172,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 7`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--auto rmd-app-bar--stacked rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--auto rmd-app-bar--stacked rmd-box rmd-box--padded rmd-box--column rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -183,4 +183,4 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 </div>
 `;
 
-exports[`AppBar styling utils should be callback without any arguments 1`] = `"rmd-app-bar rmd-background-container rmd-primary-container"`;
+exports[`AppBar styling utils should be callback without any arguments 1`] = `"rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"`;

package/src/app-bar/_app-bar.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
 @use "../theme/a11y";
@@ -59,6 +60,9 @@ $vertical-padding: 0 !default;
 
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
+// 3rem is the icon-button's default size. can't use the variables since it's
+// based on font-size now and `em`
+$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !default;
 
 $variables: (height, surface-background-color, surface-color);
 
@@ -121,17 +125,14 @@ $variables: (height, surface-background-color, surface-color);
 
     .rmd-app-bar {
       @include use-var(height);
+      @include box.set-var(gap, $gap);
+      @include box.set-var(padding, $vertical-padding $horizontal-padding);
 
-      align-items: center;
-      display: flex;
       // since app bars can appear a lot in full page dialogs, setting these flex
       // values allows it be be a direct replacement of the `DialogHeader`
       // component without all the offsets and additional styles needed for fixed
       // app bars.
       flex: 0 0 auto;
-      gap: $gap;
-      padding: $vertical-padding $horizontal-padding;
-      width: 100%;
 
       @if not $disable-fixed or not $disable-sticky {
         &--fixed {
@@ -237,10 +238,7 @@ $variables: (height, surface-background-color, surface-color);
         }
 
         &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
+          @include utils.auto-rtl(margin-left, $nav-keyline);
         }
       }
     }

package/src/avatar/Avatar.tsx

@@ -16,7 +16,7 @@ declare module "react" {
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
 export interface AvatarProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
   /**
    * This should be an image `src` attribute to create an avatar from. When this

package/src/badge/_badge.scss

@@ -12,8 +12,9 @@ $disable-secondary-theme: false !default;
 
 $size: 1.5rem !default;
 $font-size: 0.625rem !default;
-$offset-top: 0 !default;
-$offset-right: 0 !default;
+$offset: 0 !default;
+$offset-top: $offset !default;
+$offset-right: $offset !default;
 $border-radius: 50% !default;
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
@@ -101,9 +102,13 @@ $variables: (
     @include set-var(greyscale-background-color, $greyscale-background-color);
     @include set-var(greyscale-color, $greyscale-color);
     @include set-var(size, $size);
-    @include set-var(offset, 0);
-    @include set-var(offset-top, get-var(offset));
-    @include set-var(offset-right, get-var(offset));
+    @include set-var(offset, $offset);
+    @if $offset != $offset-top {
+      @include set-var(offset-top, $offset-top);
+    }
+    @if $offset != $offset-right {
+      @include set-var(offset-right, $offset-right);
+    }
   }
 }
 
@@ -113,8 +118,8 @@ $variables: (
       @include utils.map-to-styles($typography);
       @include use-var(height, size);
       @include use-var(width, size);
-      @include utils.auto-rtl(right, get-var(offset-right));
-      @include use-var(top, offset-top);
+      @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
+      @include use-var(top, offset-top, get-var(offset));
 
       align-items: center;
       border-radius: $border-radius;

package/src/button/TooltippedButton.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { forwardRef, type ReactNode } from "react";
+import { Tooltip, type TooltipProps } from "../tooltip/Tooltip.js";
+import {
+  useTooltip,
+  type ProvidedTooltipProps,
+  type TooltipOptions,
+  type TooltippedElementEventHandlers,
+} from "../tooltip/useTooltip.js";
+import { Button, type ButtonProps } from "./Button.js";
+import { type ButtonType } from "./buttonStyles.js";
+
+const noop = (): void => {
+  // do nothing
+};
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TooltippedButtonProps extends ButtonProps {
+  /** @defaultValue `"icon"` */
+  buttonType?: ButtonType;
+
+  /**
+   * The tooltip children to render. When this is falsey, the tooltip event
+   * listeners will not be enabled and the tooltip will never display.
+   */
+  tooltip?: ReactNode;
+
+  /**
+   * Any additional props to pass to the `Tooltip` component (normally styling
+   * props).
+   */
+  tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;
+
+  /**
+   * Any additional tooltip options to pass to {@link useTooltip}. The most
+   * common options would be:
+   *
+   * ```ts
+   * tooltipOptions={{
+   *   overflowOnly: true,
+   *
+   *   // whatever values you want for these
+   *   hoverTimeout: 0,
+   *   leaveTimeout: 150,
+   *   defaultPosition: "left",
+   * }}
+   * ```
+   */
+  tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;
+}
+
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export const TooltippedButton = forwardRef<
+  HTMLButtonElement,
+  TooltippedButtonProps
+>(function TooltippedButton(props, ref) {
+  const {
+    tooltip,
+    tooltipProps,
+    tooltipOptions,
+    buttonType = "icon",
+    onBlur = noop,
+    onFocus = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+    onTouchStart = noop,
+    onTouchEnd = noop,
+    onContextMenu = noop,
+    ...remaining
+  } = props;
+  const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({
+    ...tooltipOptions,
+    disabled: !tooltip || tooltipOptions?.disabled,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchEnd,
+    onTouchStart,
+    onContextMenu,
+  });
+
+  return (
+    <>
+      <Button
+        {...elementProps}
+        {...remaining}
+        ref={ref}
+        buttonType={buttonType}
+      />
+      <Tooltip {...providedTooltipProps} {...tooltipProps}>
+        {tooltip}
+      </Tooltip>
+    </>
+  );
+});

package/src/button/__tests__/TooltippedButton.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "@jest/globals";
+import { createRef } from "react";
+import { FontIcon } from "../../icon/FontIcon.js";
+import { render, screen, userEvent } from "../../test-utils/index.js";
+import {
+  TooltippedButton,
+  type TooltippedButtonProps,
+} from "../TooltippedButton.js";
+
+describe("TooltippedButton", () => {
+  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
+    const ref = createRef<HTMLButtonElement>();
+    const props = {
+      ref,
+      children: "Content",
+    } as const;
+    const { rerender } = render(<TooltippedButton {...props} />);
+
+    const button = screen.getByRole("button", { name: "Content" });
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(ref.current).toBe(button);
+    expect(button).toMatchSnapshot();
+
+    rerender(
+      <TooltippedButton
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(button).toMatchSnapshot();
+  });
+
+  it("should only display a tooltip when the tooltip prop is truthy", async () => {
+    const user = userEvent.setup();
+    const props: TooltippedButtonProps = {
+      "aria-label": "Favorite",
+      tooltipOptions: {
+        hoverTimeout: 0,
+      },
+      children: <FontIcon>favorite</FontIcon>,
+    };
+    const { rerender } = render(<TooltippedButton {...props} />);
+
+    const button = screen.getByRole("button", { name: "Favorite" });
+    await user.hover(button);
+
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    await user.unhover(button);
+    expect(() => screen.getByRole("tooltip")).toThrow();
+
+    rerender(<TooltippedButton {...props} tooltip="Tooltip" />);
+    await user.hover(button);
+    const tooltip = await screen.findByRole("tooltip", { name: "Tooltip" });
+
+    await user.unhover(button);
+    expect(tooltip).not.toBeInTheDocument();
+  });
+});

package/src/button/__tests__/__snapshots__/TooltippedButton.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TooltippedButton should apply the correct styling, HTML attributes, and allow a ref 1`] = `
+<button
+  class="rmd-button rmd-button--icon rmd-interaction-surface"
+  id=":r0:"
+  type="button"
+>
+  <span>
+    Content
+  </span>
+</button>
+`;
+
+exports[`TooltippedButton should apply the correct styling, HTML attributes, and allow a ref 2`] = `
+<button
+  class="rmd-button rmd-button--icon rmd-interaction-surface custom-class-name"
+  id=":r0:"
+  style="color: white;"
+  type="button"
+>
+  <span>
+    Content
+  </span>
+</button>
+`;

package/src/card/Card.tsx

@@ -62,9 +62,10 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
     const {
       children,
       className,
-      bordered = false,
-      raisable = false,
-      fullWidth = false,
+      bordered,
+      raisable,
+      fullWidth,
+      interactable,
       ...remaining
     } = props;
 
@@ -77,6 +78,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           bordered,
           raisable,
           fullWidth,
+          interactable,
         })}
       >
         {children}

package/src/card/CardContent.tsx

@@ -22,9 +22,9 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
     const {
       children,
       className,
-      disablePadding = false,
-      disableSecondaryColor = false,
-      disableLastChildPadding = false,
+      disablePadding,
+      disableSecondaryColor,
+      disableLastChildPadding,
       ...remaining
     } = props;
 

package/src/card/ClickableCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+import { cnb } from "cnbuilder";
+import { forwardRef, type MouseEventHandler } from "react";
+import { useElementInteraction } from "../interaction/useElementInteraction.js";
+import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
+import { Card, type CardProps } from "./Card.js";
+
+const noop = (): void => {
+  // do nothing
+};
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ClickableCardProps extends CardProps {
+  onClick: MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Set this to `true` to disable all click events.
+   *
+   * Note: Any disabled styling will need to be manually applied.
+   *
+   * @defaultValue `false`
+   */
+  disabled?: boolean;
+}
+
+/**
+ * A Small wrapper around the `Card` component that is clickable and has the
+ * element interaction enabled (ripples).
+ *
+ * @example
+ * SImple Example
+ * ```tsx
+ * import { CardContent, ClickableCard } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * export default function ClickableCardExample(): ReactElement {
+ *   return (
+ *     <ClickableCard
+ *       onClick={() => {
+ *         // do something
+ *       }}
+ *     >
+ *       <CardContent>Wow</CardContent>
+ *     </ClickableCard>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export const ClickableCard = forwardRef<HTMLDivElement, ClickableCardProps>(
+  function ClickableCard(props, ref) {
+    const {
+      role = "button",
+      disabled,
+      tabIndex = disabled ? undefined : 0,
+      onClick,
+      onKeyDown = noop,
+      className,
+      children: propChildren,
+      ...remaining
+    } = props;
+    const { handlers, ripples } = useElementInteraction(remaining);
+    const children = useHigherContrastChildren(propChildren);
+
+    return (
+      <Card
+        {...remaining}
+        {...handlers}
+        aria-disabled={disabled || undefined}
+        ref={ref}
+        role={role}
+        tabIndex={tabIndex}
+        className={cnb("rmd-card--clickable", className)}
+        onClick={(event) => {
+          if (disabled) {
+            return;
+          }
+
+          onClick(event);
+        }}
+        onKeyDown={(event) => {
+          onKeyDown(event);
+          if (disabled) {
+            return;
+          }
+
+          const isSpace = event.key === " ";
+          if (isSpace || event.key === "Enter") {
+            if (isSpace) {
+              event.preventDefault();
+            }
+
+            event.currentTarget.click();
+          }
+        }}
+      >
+        {children}
+        {ripples}
+      </Card>
+    );
+  }
+);

package/src/card/__tests__/ClickableCard.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef } from "react";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
+import { ClickableCard } from "../ClickableCard.js";
+
+describe("ClickableCard", () => {
+  it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    const props = {
+      "data-testid": "card",
+      ref,
+      onClick: jest.fn(),
+    } as const;
+    const { rerender } = render(<ClickableCard {...props} />);
+
+    const element = screen.getByTestId("card");
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current).toBe(element);
+    expect(element).toMatchSnapshot();
+
+    rerender(
+      <ClickableCard
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(element).toMatchSnapshot();
+  });
+
+  it("should not have a tabIndex while disabled", () => {
+    render(<ClickableCard data-testid="card" disabled onClick={jest.fn()} />);
+    const card = screen.getByTestId("card");
+    expect(card).toHaveAttribute("aria-disabled");
+    expect(card).not.toHaveAttribute("tabIndex");
+  });
+
+  it("should keyboard click correctly", () => {
+    const onClick = jest.fn();
+    render(<ClickableCard data-testid="card" onClick={onClick} />);
+
+    const card = screen.getByTestId("card");
+    expect(onClick).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(card, { key: " " });
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(card, { key: "Enter" });
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not fire the click event while disabled", () => {
+    const onClick = jest.fn();
+    render(<ClickableCard data-testid="card" onClick={onClick} disabled />);
+    const card = screen.getByTestId("card");
+
+    fireEvent.click(card);
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    fireEvent.keyDown(card, { key: " " });
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    fireEvent.keyDown(card, { key: "Enter" });
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+});