From eeb15e204d28f2cccca3a977543baf96ca6770f9 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 8 Feb 2022 08:17:52 -0800
Subject: [PATCH] fix(multi-select): resolve a11y violations

Fixes #1071
---
 src/ListBox/ListBoxField.svelte    |  2 +-
 src/MultiSelect/MultiSelect.svelte | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index b49e4dbf..1f8d5485 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -45,7 +45,7 @@
 
 <div
   bind:this="{ref}"
-  role="{ariaExpanded ? 'combobox' : role}"
+  role="{role}"
   aria-expanded="{ariaExpanded}"
   aria-owns="{(ariaExpanded && menuId) || undefined}"
   aria-controls="{(ariaExpanded && menuId) || undefined}"
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 97931b97..d3c00ef1 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -268,8 +268,7 @@
     </label>
   {/if}
   <ListBox
-    aria-label="{ariaLabel}"
-    id="{id}"
+    role="{undefined}"
     disabled="{disabled}"
     invalid="{invalid}"
     invalidText="{invalidText}"
@@ -470,10 +469,17 @@
       {/if}
     </ListBoxField>
     {#if open}
-      <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
+      <ListBoxMenu
+        aria-label="{ariaLabel}"
+        id="{id}"
+        aria-multiselectable="true"
+      >
         {#each filterable ? filteredItems : sortedItems as item, i (item.id)}
           <ListBoxMenuItem
             id="{item.id}"
+            role="option"
+            aria-labelledby="checkbox-{item.id}"
+            aria-selected="{item.checked}"
             active="{item.checked}"
             highlighted="{highlightedIndex === i}"
             on:click="{() => {