From 30a5f2c201b0e054198d72492ac0ed36e8437a4b Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 9 Feb 2022 19:49:30 -0800
Subject: [PATCH] fix(multi-select): resolve a11y violations (#1072)

- role="listbox" children require the role="option" attribute
- add a "aria-multiselectable" attribute to the listbox menu
- move "aria-label" attribute from listbox to listbox menu
- listbox field should not have a "combobox" role when expanded (the non-filterable variant serves as a button)
---
 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="{() => {