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.
carbon-design-system · Mar 7, 2024 · 8bffc17 · 8bffc17
1 parent a0d5028
commit 8bffc17
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }