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

@@ -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}"

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="{() => {