feat(structured-list)!: integration StructuredList with v11 (#1965)

src/StructuredList/StructuredList.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /**
    * Specify the selected structured list row value
    * @type {string}
@@ -17,10 +19,11 @@
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
 
+  /** @type {import("svelte").EventDispatcher<{ change: string; }>} */
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
 
-  setContext("StructuredListWrapper", {
+  setContext("StructuredList", {
     selectedValue,
     update: (value) => {
       selectedValue.set(value);
@@ -31,8 +34,6 @@
   $: dispatch("change", $selectedValue);
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
   role="table"
   class:bx--structured-list="{true}"
@@ -40,10 +41,6 @@
   class:bx--structured-list--condensed="{condensed}"
   class:bx--structured-list--flush="{flush}"
   {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
 >
   <slot />
 </div>

src/StructuredList/StructuredListBody.svelte

@@ -1,13 +1,7 @@
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
   role="rowgroup"
   class:bx--structured-list-tbody="{true}"
   {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
 >
   <slot />
 </div>

src/StructuredList/StructuredListCell.svelte

@@ -1,22 +1,21 @@
 <script>
-  /** Set to `true` to use as a header */
-  export let head = false;
+  // @ts-check
 
   /** Set to `true` to prevent wrapping */
   export let noWrap = false;
+
+  import { getContext } from "svelte";
+
+  /** @type {undefined | import("svelte/store").Writable<{}>} */
+  const head = getContext("StructuredListHead");
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  role="{head ? 'columnheader' : 'cell'}"
   class:bx--structured-list-th="{head}"
   class:bx--structured-list-td="{!head}"
   class:bx--structured-list-content--nowrap="{noWrap}"
   {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
+  role="{head ? 'columnheader' : 'cell'}"
 >
   <slot />
 </div>

src/StructuredList/StructuredListHead.svelte

@@ -1,13 +1,10 @@
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<div
-  role="rowgroup"
-  class:bx--structured-list-thead="{true}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
+<script>
+  // @ts-check
+  import { setContext } from "svelte";
+
+  setContext("StructuredListHead", {});
+</script>
+
+<div {...$$restProps} role="rowgroup" class:bx--structured-list-thead="{true}">
   <slot />
 </div>

src/StructuredList/StructuredListInput.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /** Set to `true` to check the input */
   export let checked = false;
 
@@ -17,9 +19,19 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { getContext } from "svelte";
+  /**
+   * Specify the icon to render
+   * @type {typeof import("svelte").SvelteComponent<any>}
+   */
+  export let icon = CheckmarkFilled;
 
-  const { selectedValue, update } = getContext("StructuredListWrapper");
+  /** Specify the ARIA label for the accordion item chevron icon. */
+  export let iconDescription = "Select an option";
+
+  import { getContext } from "svelte";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+
+  const { selectedValue, update } = getContext("StructuredList");
 
   if (checked) {
     update(value);
@@ -31,15 +43,24 @@
 <input
   bind:this="{ref}"
   type="radio"
-  tabindex="-1"
+  tabindex="{-1}"
   checked="{checked}"
   id="{id}"
   name="{name}"
   title="{title}"
   value="{value}"
   class:bx--structured-list-input="{true}"
+  class:bx--visually-hidden="{true}"
   {...$$restProps}
+  on:change
   on:change="{() => {
     update(value);
   }}"
 />
+<div role="{'cell'}" class:bx--structured-list-td="{true}">
+  <svelte:component
+    this="{icon}"
+    class="bx--structured-list-svg"
+    aria-label="{iconDescription}"
+  />
+</div>

src/StructuredList/StructuredListRow.svelte

@@ -1,44 +1,31 @@
 <script>
-  /** Set to `true` to use as a header */
-  export let head = false;
+  // @ts-check
 
-  /** Set to `true` to render a label slot */
-  export let label = false;
+  /**
+   * Specify the tag name
+   * @type {keyof HTMLElementTagNameMap}
+   */
+  export let tag = "div";
 
-  /** Specify the tabindex */
-  export let tabindex = "0";
+  /**
+   * Set to `true` to use the selected state
+   * @type {boolean}
+   */
+  export let selected = false;
+
+  import { getContext } from "svelte";
+
+  /** @type {undefined | import("svelte/store").Writable<{}>} */
+  const head = getContext("StructuredListHead");
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-{#if label}
-  <!-- svelte-ignore a11y-label-has-associated-control -->
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <label
-    tabindex="{tabindex}"
-    class:bx--structured-list-row="{true}"
-    class:bx--structured-list-row--header-row="{head}"
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:keydown
-  >
-    <slot />
-  </label>
-{:else}
-  <!-- svelte-ignore a11y-interactive-supports-focus -->
-  <div
-    role="row"
-    class:bx--structured-list-row="{true}"
-    class:bx--structured-list-row--header-row="{head}"
-    {...$$restProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-  >
-    <slot />
-  </div>
-{/if}
+<svelte:element
+  this="{tag}"
+  class:bx--structured-list-row="{true}"
+  class:bx--structured-list-row--header-row="{head}"
+  class:bx--structured-list-row--selected="{selected}"
+  {...$$restProps}
+  role="row"
+>
+  <slot />
+</svelte:element>

src/StructuredList/StructuredListSkeleton.svelte

@@ -1,19 +1,11 @@
 <script>
+  // @ts-check
+  
   /** Specify the number of rows */
-  export let rows = 5;
+  export let count = 5;
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class:bx--skeleton="{true}"
-  class:bx--structured-list="{true}"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
+<div class:bx--skeleton="{true}" class:bx--structured-list="{true}">
   <div class:bx--structured-list-thead="{true}">
     <div
       class:bx--structured-list-row="{true}"
@@ -25,7 +17,7 @@
     </div>
   </div>
   <div class:bx--structured-list-tbody="{true}">
-    {#each Array.from({ length: rows }, (_, i) => i) as row, i (row)}
+    {#each Array.from({ length: count }) as row}
       <div class:bx--structured-list-row="{true}">
         <div class:bx--structured-list-td="{true}"></div>
         <div class:bx--structured-list-td="{true}"></div>