From 8bffc17d650144ed0d5b778766f79c33334f0275 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 6 Mar 2024 19:07:45 -0800
Subject: [PATCH] fix(link)!: do not render `p` for disabled link

Closes #1924

Svelte 5 will not compile if `div` is nested inside `p` element. Refactor Link to render an `a` instead of `p` when disabled.
---
 COMPONENT_INDEX.md          | 18 +++++++++---------
 docs/src/COMPONENT_API.json | 12 ++++++------
 src/Link/Link.svelte        | 11 +++++++----
 types/Link/Link.svelte.d.ts |  4 ++--
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index bf720d61..db8ab9cd 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1963,15 +1963,15 @@ None.
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                                                                   | Default value          | Description                                              |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
-| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code>      | Obtain a reference to the top-level HTML element         |
-| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>                                          | <code>undefined</code> | Specify the size of the link                             |
-| href      | No       | <code>let</code> | No       | <code>string</code>                                                    | <code>undefined</code> | Specify the href value                                   |
-| inline    | No       | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code>     | Set to `true` to use the inline variant                  |
-| icon      | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>              | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code>     | Set to `true` to disable the checkbox                    |
-| visited   | No       | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code>     | Set to `true` to allow visited styles                    |
+| Prop name | Required | Kind             | Reactive | Type                                                      | Default value          | Description                                              |
+| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
+| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                | <code>null</code>      | Obtain a reference to the top-level HTML element         |
+| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>                             | <code>undefined</code> | Specify the size of the link                             |
+| href      | No       | <code>let</code> | No       | <code>string</code>                                       | <code>undefined</code> | Specify the href value                                   |
+| inline    | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>     | Set to `true` to use the inline variant                  |
+| icon      | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>     | Set to `true` to disable the checkbox                    |
+| visited   | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>     | Set to `true` to allow visited styles                    |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index dc16dc50..89844c68 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5831,7 +5831,7 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the top-level HTML element",
-          "type": "null | HTMLAnchorElement | HTMLParagraphElement",
+          "type": "null | HTMLAnchorElement",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -5851,13 +5851,13 @@
         }
       ],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "p" },
-        { "type": "forwarded", "name": "mouseover", "element": "p" },
-        { "type": "forwarded", "name": "mouseenter", "element": "p" },
-        { "type": "forwarded", "name": "mouseleave", "element": "p" }
+        { "type": "forwarded", "name": "click", "element": "a" },
+        { "type": "forwarded", "name": "mouseover", "element": "a" },
+        { "type": "forwarded", "name": "mouseenter", "element": "a" },
+        { "type": "forwarded", "name": "mouseleave", "element": "a" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "a | p" }
+      "rest_props": { "type": "Element", "name": "a" }
     },
     {
       "moduleName": "ListBox",
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index fc680c3e..629a3973 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -1,6 +1,4 @@
 <script>
-  /** @restProps {a | p} */
-
   /**
    * Specify the size of the link
    * @type {"sm" | "lg"}
@@ -34,10 +32,15 @@
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-no-redundant-roles -->
+<!-- svelte-ignore a11y-interactive-supports-focus -->
 {#if disabled}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <p
+  <a
     bind:this="{ref}"
+    role="link"
+    aria-disabled="true"
     class:bx--link="{true}"
     class:bx--link--disabled="{disabled}"
     class:bx--link--inline="{inline}"
@@ -56,7 +59,7 @@
         </slot>
       </div>
     {/if}
-  </p>
+  </a>
 {:else}
   <a
     bind:this="{ref}"
diff --git a/types/Link/Link.svelte.d.ts b/types/Link/Link.svelte.d.ts
index 3df21652..88434cda 100644
--- a/types/Link/Link.svelte.d.ts
+++ b/types/Link/Link.svelte.d.ts
@@ -1,7 +1,7 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["a"] & SvelteHTMLElements["p"];
+type RestProps = SvelteHTMLElements["a"];
 
 export interface LinkProps extends RestProps {
   /**
@@ -45,7 +45,7 @@ export interface LinkProps extends RestProps {
    * Obtain a reference to the top-level HTML element
    * @default null
    */
-  ref?: null | HTMLAnchorElement | HTMLParagraphElement;
+  ref?: null | HTMLAnchorElement;
 
   [key: `data-${string}`]: any;
 }