mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(combo-box): address accessibility issues (#2186)

Browse source 
Supports #2172
This commit is contained in:
Eric Liu 2025-08-19 10:35:18 -07:00 • committed by GitHub
commit 2fc884caca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/ComboBox/ComboBox.svelte
View file

@ -116,7 +116,6 @@
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import ListBox from "../ListBox/ListBox.svelte";
import ListBoxField from "../ListBox/ListBoxField.svelte";
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
@ -254,22 +253,12 @@
{warn}
{warnText}
>
<ListBoxField
role="button"
aria-expanded={open}
on:click={async () => {
if (disabled) return;
open = true;
await tick();
ref.focus();
}}
{id}
{disabled}
{translateWithId}
>
<div class:bx--list-box__field={true}>
<input
bind:this={ref}
bind:value
type="text"
role="combobox"
tabindex="0"
autocomplete="off"
aria-autocomplete="list"
@ -287,6 +276,10 @@
class:bx--text-input={true}
class:bx--text-input--light={light}
class:bx--text-input--empty={value === ""}
on:click={() => {
if (disabled) return;
open = true;
}}
on:input={({ target }) => {
if (!open && target.value.length > 0) {
open = true;
@ -384,7 +377,7 @@
{translateWithId}
{open}
/>
</ListBoxField>
</div>
{#if open}
<ListBoxMenu aria-label={ariaLabel} {id} on:scroll bind:ref={listRef}>
{#each filteredItems as item, i (item.id)}