🐛(react) fix button link disabled state

When disabled, a button rendered as a link does
not have disabled styles applied.

Author: jbpenrath

.changeset/bright-pandas-lose.md

@@ -0,0 +1,5 @@
+---
+"@gouvfr-lasuite/cunningham-react": patch
+---
+
+Fix disabled state for button rendered as link

packages/react/src/components/Button/_index.scss

@@ -22,7 +22,8 @@
 
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled="true"] {
       background-color: var(--c--contextuals--background--semantic--disabled--primary);
       color: var(--c--contextuals--content--semantic--disabled--primary);
     }
@@ -44,7 +45,8 @@
       );
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled="true"] {
       background-color: var(--c--contextuals--background--semantic--disabled--secondary);
       color: var(--c--contextuals--content--semantic--disabled--primary);
     }
@@ -64,7 +66,8 @@
       background-color: var(--c--contextuals--background--semantic--contextual--primary);
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled="true"] {
       background-color: transparent;
       color: var(--c--contextuals--content--semantic--disabled--primary);
     }
@@ -85,7 +88,8 @@
       background-color: var(--c--contextuals--background--semantic--contextual--primary);
     }
 
-    &:disabled {
+    &:disabled,
+    &[aria-disabled="true"] {
       background-color: transparent;
       color: var(--c--contextuals--content--semantic--disabled--primary);
       border-color: var(--c--contextuals--border--semantic--disabled--primary);

packages/react/src/components/Button/index.spec.tsx

@@ -66,14 +66,28 @@ describe("<Button/>", () => {
     expect(handleClick).not.toHaveBeenCalled();
   });
 
-  it("renders disabled link", async () => {
+  it("renders disabled link with aria-disabled and preserves href", async () => {
     render(
       <Button href="https://perdu.com" disabled={true}>
         Test button link
       </Button>,
     );
     const button = screen.getByRole("link", { name: "Test button link" });
-    expect(button.classList).toContain("c__button--disabled");
+    expect(button).toHaveAttribute("aria-disabled", "true");
+    expect(button).toHaveAttribute("href", "https://perdu.com");
+  });
+
+  it("does not call onClick when click occurs on a disabled link", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(
+      <Button href="https://perdu.com" disabled={true} onClick={handleClick}>
+        Test button link
+      </Button>,
+    );
+    const button = screen.getByRole("link", { name: "Test button link" });
+    await act(async () => user.click(button));
+    expect(handleClick).not.toHaveBeenCalled();
   });
 
   it("renders as link when href is used", () => {

packages/react/src/components/Button/index.stories.tsx

@@ -12,9 +12,11 @@ type Story = StoryObj<typeof Button>;
 
 type AllButtonsProps = ButtonProps & {
   color: ButtonProps["color"];
+  asLink?: boolean;
 };
 
-const AllButtons = ({ color = "brand" }: AllButtonsProps) => {
+const AllButtons = ({ color = "brand", asLink = false }: AllButtonsProps) => {
+  const href = asLink ? "#" : undefined;
   return (
     <div
       style={{
@@ -34,23 +36,23 @@ const AllButtons = ({ color = "brand" }: AllButtonsProps) => {
         }}
       >
         <h4 className={`clr-content-semantic-${color}-primary`}>Primary</h4>
-        <Button {...Primary.args} color={color} />
-        <Button {...PrimaryDisabled.args} color={color} />
+        <Button {...Primary.args} color={color} href={href} />
+        <Button {...PrimaryDisabled.args} color={color} href={href} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         <h4 className={`clr-content-semantic-${color}-primary`}>Secondary</h4>
-        <Button {...Secondary.args} color={color} />
-        <Button {...SecondaryDisabled.args} color={color} />
+        <Button {...Secondary.args} color={color} href={href} />
+        <Button {...SecondaryDisabled.args} color={color} href={href} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         <h4 className={`clr-content-semantic-${color}-primary`}>Tertiary</h4>
-        <Button {...BrandTertiary.args} color={color} />
-        <Button {...TertiaryDisabled.args} color={color} />
+        <Button {...BrandTertiary.args} color={color} href={href} />
+        <Button {...TertiaryDisabled.args} color={color} href={href} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         <h4 className={`clr-content-semantic-${color}-primary`}>Bordered</h4>
-        <Button {...Bordered.args} color={color} />
-        <Button {...BrandBorderedDisabled.args} color={color} />
+        <Button {...Bordered.args} color={color} href={href} />
+        <Button {...BrandBorderedDisabled.args} color={color} href={href} />
       </div>
     </div>
   );
@@ -226,12 +228,7 @@ export const IconOnly: Story = {
 };
 
 export const AsLink: Story = {
-  args: {
-    children: "Go to fun-mooc.fr",
-    icon: <span className="material-icons">link</span>,
-    variant: "primary",
-    href: "https://www.fun-mooc.fr/",
-    target: "_blank",
-    rel: "noopener noreferrer",
+  render: () => {
+    return <AllButtons color="brand" asLink />;
   },
 };

packages/react/src/components/Button/index.tsx

@@ -60,16 +60,18 @@ export const Button = ({
   if (fullWidth) {
     classes.push("c__button--full-width");
   }
-  if (props.href && props.disabled) {
-    classes.push("c__button--disabled");
-  }
   const iconElement = <span className="c__button__icon">{icon}</span>;
+  const isDisabledLink = !!props.href && !!props.disabled;
   const tagName = props.href ? "a" : "button";
   return createElement(
     tagName,
     {
       className: classes.join(" "),
       ...props,
+      ...(isDisabledLink && {
+        "aria-disabled": true,
+        onClick: (e: React.MouseEvent) => e.preventDefault(),
+      }),
       ref,
     },
     <>