From bf21a3da3314c27bd3274b6dd4e8acb691990d00 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 17 Aug 2025 12:46:14 -0700
Subject: [PATCH] fix(list-box): address a11y issues

---
 src/ListBox/ListBoxSelection.svelte | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index 297e2a7f..7b243791 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -64,10 +64,9 @@
     <span class:bx--tag__label={true} title={selectionCount}>
       {selectionCount}
     </span>
-    <div
+    <button
       bind:this={ref}
-      role="button"
-      tabindex={disabled ? -1 : 0}
+      type="button"
       class:bx--tag__close-icon={true}
       on:click|preventDefault|stopPropagation={(e) => {
         if (!disabled) {
@@ -84,15 +83,15 @@
       title={description}
     >
       <Close />
-    </div>
+    </button>
   </div>
 {:else}
-  <div
+  <button
     bind:this={ref}
-    role="button"
+    type="button"
+    {disabled}
     aria-label={description}
     title={description}
-    tabindex={disabled ? "-1" : "0"}
     class:bx--list-box__selection={true}
     class:bx--tag--filter={selectionCount}
     class:bx--list-box__selection--multi={selectionCount}
@@ -110,5 +109,5 @@
   >
     {#if selectionCount !== undefined}{selectionCount}{/if}
     <Close />
-  </div>
+  </button>
 {/if}