fix(multi-select): resolve a11y violations

Fixes #1071
This commit is contained in:
metonym 2022-02-08 08:17:52 -08:00
commit eeb15e204d
2 changed files with 10 additions and 4 deletions

View file

@ -45,7 +45,7 @@
<div <div
bind:this="{ref}" bind:this="{ref}"
role="{ariaExpanded ? 'combobox' : role}" role="{role}"
aria-expanded="{ariaExpanded}" aria-expanded="{ariaExpanded}"
aria-owns="{(ariaExpanded && menuId) || undefined}" aria-owns="{(ariaExpanded && menuId) || undefined}"
aria-controls="{(ariaExpanded && menuId) || undefined}" aria-controls="{(ariaExpanded && menuId) || undefined}"

View file

@ -268,8 +268,7 @@
</label> </label>
{/if} {/if}
<ListBox <ListBox
aria-label="{ariaLabel}" role="{undefined}"
id="{id}"
disabled="{disabled}" disabled="{disabled}"
invalid="{invalid}" invalid="{invalid}"
invalidText="{invalidText}" invalidText="{invalidText}"
@ -470,10 +469,17 @@
{/if} {/if}
</ListBoxField> </ListBoxField>
{#if open} {#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)} {#each filterable ? filteredItems : sortedItems as item, i (item.id)}
<ListBoxMenuItem <ListBoxMenuItem
id="{item.id}" id="{item.id}"
role="option"
aria-labelledby="checkbox-{item.id}"
aria-selected="{item.checked}"
active="{item.checked}" active="{item.checked}"
highlighted="{highlightedIndex === i}" highlighted="{highlightedIndex === i}"
on:click="{() => { on:click="{() => {