fix: #213

apps/docs/src/examples/link.module.css

@@ -7,6 +7,15 @@
   text-decoration: underline;
 }
 
+.link[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.link[data-disabled]:hover {
+  text-decoration: none;
+}
+
 [data-kb-theme="dark"] .link {
   color: hsl(198 93% 60%);
 }

apps/docs/src/examples/link.tsx

@@ -9,3 +9,11 @@ export function BasicExample() {
     </Link.Root>
   );
 }
+
+export function DisabledExample() {
+  return (
+    <Link.Root class={style["link"]} href="https://kobalte.dev" target="_blank" disabled>
+      Kobalte
+    </Link.Root>
+  );
+}

apps/docs/src/routes/docs/core/components/link.mdx

@@ -1,5 +1,5 @@
 import { Preview, Kbd, TabsSnippets } from "../../../../components";
-import { BasicExample, ClientHandledExample } from "../../../../examples/link";
+import { BasicExample, DisabledExample } from "../../../../examples/link";
 
 # Link
 
@@ -64,12 +64,37 @@ The link consists of:
     .link:hover {
       text-decoration: underline;
     }
+
+    .link[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .link[data-disabled]:hover {
+      text-decoration: none;
+    }
     ```
 
   </TabsSnippets.Content>
   {/* <!-- prettier-ignore-end -->*/}
 </TabsSnippets>
 
+## Usage
+
+### Disabled state
+
+Use the `disabled` prop to disable a link while keeping it accessible for screen readers.
+
+<Preview>
+  <DisabledExample />
+</Preview>
+
+```tsx
+<Link.Root href="https://kobalte.dev" disabled>
+  Kobalte
+</Link.Root>
+```
+
 ## API Reference
 
 ### Link.Root

packages/core/src/index.tsx

@@ -32,7 +32,7 @@ export * as Progress from "./progress";
 export * as RadioGroup from "./radio-group";
 export * as Select from "./select";
 export * as Separator from "./separator";
-export * as Slider from "./slider";
+//export * as Slider from "./slider";
 export * as Switch from "./switch";
 export * as Tabs from "./tabs";
 export * as TextField from "./text-field";

packages/core/src/link/link-root.tsx

@@ -6,8 +6,8 @@
  * https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/link/src/useLink.ts
  */
 
-import { callHandler, mergeRefs, OverrideComponentProps } from "@kobalte/utils";
-import { JSX, splitProps } from "solid-js";
+import { mergeRefs, OverrideComponentProps } from "@kobalte/utils";
+import { splitProps } from "solid-js";
 
 import { AsChildProp, Polymorphic } from "../polymorphic";
 import { createTagName } from "../primitives";
@@ -25,31 +25,22 @@ export interface LinkRootProps extends OverrideComponentProps<"a", LinkRootOptio
 export function LinkRoot(props: LinkRootProps) {
   let ref: HTMLAnchorElement | undefined;
 
-  const [local, others] = splitProps(props, ["ref", "type", "disabled", "onClick"]);
+  const [local, others] = splitProps(props, ["ref", "type", "href", "disabled"]);
 
   const tagName = createTagName(
     () => ref,
     () => "a"
   );
 
-  const onClick: JSX.EventHandlerUnion<any, MouseEvent> = e => {
-    if (local.disabled) {
-      e.preventDefault();
-      return;
-    }
-
-    callHandler(e, local.onClick);
-  };
-
   return (
     <Polymorphic
       as="a"
       ref={mergeRefs(el => (ref = el), local.ref)}
-      role={tagName() !== "a" ? "link" : undefined}
+      role={tagName() !== "a" || local.disabled ? "link" : undefined}
       tabIndex={tagName() !== "a" && !local.disabled ? 0 : undefined}
+      href={!local.disabled ? local.href : undefined}
       aria-disabled={local.disabled ? true : undefined}
       data-disabled={local.disabled ? "" : undefined}
-      onClick={onClick}
       {...others}
     />
   );

packages/core/src/link/link.test.tsx

@@ -51,6 +51,38 @@ describe("Link", () => {
     expect(link).not.toHaveAttribute("tabindex", "0");
   });
 
+  it("should not have attribute 'data-disabled' by default", async () => {
+    render(() => <Link.Root data-testid="link">Link</Link.Root>);
+
+    const link = screen.getByTestId("link");
+
+    expect(link).not.toHaveAttribute("data-disabled");
+  });
+
+  it("should have attribute 'role=link' when disabled", () => {
+    render(() => (
+      <Link.Root data-testid="link" href="https://kobalte.dev" disabled>
+        Link
+      </Link.Root>
+    ));
+
+    const link = screen.getByTestId("link");
+
+    expect(link).toHaveAttribute("role", "link");
+  });
+
+  it("should not have attribute 'href' when disabled", () => {
+    render(() => (
+      <Link.Root data-testid="link" href="https://kobalte.dev" disabled>
+        Link
+      </Link.Root>
+    ));
+
+    const link = screen.getByTestId("link");
+
+    expect(link).not.toHaveAttribute("href");
+  });
+
   it("should not have attribute 'tabindex=0' when it's disabled", () => {
     render(() => (
       <Link.Root data-testid="link" disabled asChild>
@@ -75,14 +107,6 @@ describe("Link", () => {
     expect(link).toHaveAttribute("aria-disabled", "true");
   });
 
-  it("should not have attribute 'data-disabled' by default", async () => {
-    render(() => <Link.Root data-testid="link">Link</Link.Root>);
-
-    const link = screen.getByTestId("link");
-
-    expect(link).not.toHaveAttribute("data-disabled");
-  });
-
   it("should have attribute 'data-disabled' when disabled", () => {
     render(() => (
       <Link.Root data-testid="link" disabled>

packages/core/src/text-field/text-field-text-area.tsx

@@ -7,7 +7,12 @@
  * https://github.com/adobe/react-spectrum/blob/0af91c08c745f4bb35b6ad4932ca17a0d85dd02c/packages/@react-spectrum/textfield/src/TextArea.tsx
  */
 
-import { composeEventHandlers, mergeDefaultProps, mergeRefs, OverrideComponentProps } from "@kobalte/utils";
+import {
+  composeEventHandlers,
+  mergeDefaultProps,
+  mergeRefs,
+  OverrideComponentProps,
+} from "@kobalte/utils";
 import { createEffect, on, splitProps } from "solid-js";
 
 import { AsChildProp } from "../polymorphic";
@@ -17,7 +22,7 @@ import { TextFieldInputBase } from "./text-field-input";
 export interface TextFieldTextAreaOptions extends AsChildProp {
   /** Whether the textarea should adjust its height when the value changes. */
   autoResize?: boolean;
-  
+
   /** Whether the form should be submitted when the user presses the enter key. */
   submitOnEnter?: boolean;
 }