carbon-components-svelte 0.87.0 → 0.87.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.87.0",
+  "version": "0.87.1",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/DataTable/DataTable.svelte

@@ -170,6 +170,10 @@
   const batchSelectedIds = writable(false);
   const tableRows = writable(rows);
 
+  // Internal ID prefix for radio buttons, checkboxes, etc.
+  // since there may be multiple `DataTable` instances that have overlapping row ids.
+  const id = "ccs-" + Math.random().toString(36);
+
   // Store a copy of the original rows for filter restoration.
   $: originalRows = [...rows];
 
@@ -350,6 +354,10 @@
               <button
                 type="button"
                 class:bx--table-expand__button={true}
+                aria-label={expanded ? "Collapse all rows" : "Expand all rows"}
+                aria-controls={expandableRowIds
+                  .map((id) => `expandable-row-${id}`)
+                  .join(" ")}
                 on:click={() => {
                   expanded = !expanded;
                   expandedRowIds = expanded ? expandableRowIds : [];
@@ -357,7 +365,10 @@
                   dispatch("click:header--expand", { expanded });
                 }}
               >
-                <ChevronRight class="bx--table-expand__svg" />
+                <ChevronRight
+                  aria-hidden="true"
+                  class="bx--table-expand__svg"
+                />
               </button>
             {/if}
           </th>
@@ -370,6 +381,8 @@
             <InlineCheckbox
               bind:ref={refSelectAll}
               aria-label="Select all rows"
+              name="{id}-select-all"
+              value="all"
               checked={selectAll}
               {indeterminate}
               on:change={(e) => {
@@ -470,6 +483,7 @@
                 <button
                   type="button"
                   class:bx--table-expand__button={true}
+                  aria-controls={`expandable-row-${row.id}`}
                   aria-label={expandedRows[row.id]
                     ? "Collapse current row"
                     : "Expand current row"}
@@ -486,7 +500,10 @@
                     });
                   }}
                 >
-                  <ChevronRight class="bx--table-expand__svg" />
+                  <ChevronRight
+                    aria-hidden="true"
+                    class="bx--table-expand__svg"
+                  />
                 </button>
               {/if}
             </TableCell>
@@ -497,9 +514,12 @@
               class:bx--table-column-radio={radio}
             >
               {#if !nonSelectableRowIds.includes(row.id)}
+                {@const inputId = `${id}-${row.id}`}
+                {@const inputName = `${id}-name`}
                 {#if radio}
                   <RadioButton
-                    name="select-row-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       selectedRowIds = [row.id];
@@ -508,7 +528,8 @@
                   />
                 {:else}
                   <InlineCheckbox
-                    name="select-row-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       if (selectedRowIds.includes(row.id)) {
@@ -550,6 +571,7 @@
 
         {#if expandable}
           <tr
+            id={`expandable-row-${row.id}`}
             data-child-row
             class:bx--expandable-row={true}
             on:mouseenter={() => {

package/src/Dropdown/Dropdown.svelte

@@ -250,7 +250,6 @@
           }
         } else if (key === "Tab") {
           open = false;
-          ref.blur();
         } else if (key === "ArrowDown") {
           if (!open) open = true;
           change(1);

package/src/MultiSelect/MultiSelect.svelte

@@ -374,7 +374,6 @@
             selectionRef.focus();
           } else {
             open = false;
-            fieldRef.blur();
           }
         } else if (key === "ArrowDown") {
           change(1);
@@ -414,7 +413,6 @@
               ...item,
               checked: false,
             }));
-            if (fieldRef) fieldRef.blur();
           }}
           translateWithId={translateWithIdSelection}
           {disabled}
@@ -450,7 +448,6 @@
               }
             } else if (key === "Tab") {
               open = false;
-              inputRef.blur();
             } else if (key === "ArrowDown") {
               change(1);
             } else if (key === "ArrowUp") {