authorgravatar for saphid@gmail.comAlex Southwell <saphid@gmail.com> 2026-09-06 17:22:21+10:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-06 00:22:21-07:00
log55333833ec260a5c9eefa05690086de768d6970c
treedd889538348d104171609109cba9c7ad8ba5c963
parent82689782eee0f0cf27d5601e1d533381587b64f8
signature Signed by PGP key B5690EEEBB952194

fix(web): name combobox chip removal targets (#10127)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

1 files changed, 15 insertions(+), 5 deletions(-)

apps/web/src/components/ui/combobox.tsx+15-5
...@@ -352,27 +352,37 @@ function ComboboxChips({...@@ -352,27 +352,37 @@ function ComboboxChips({
352}352}
353353
354function ComboboxChip({ children, ...props }: ComboboxPrimitive.Chip.Props) {354function ComboboxChip({ children, ...props }: ComboboxPrimitive.Chip.Props) {
355 const labelId = React.useId();
356
355 return (357 return (
356 <ComboboxPrimitive.Chip358 <ComboboxPrimitive.Chip
357 className="flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"359 className="flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
358 data-slot="combobox-chip"360 data-slot="combobox-chip"
359 {...props}361 {...props}
360 >362 >
361 {children}363 <span id={labelId}>{children}</span>
362 <ComboboxChipRemove />364 <ComboboxChipRemove labelId={labelId} />
363 </ComboboxPrimitive.Chip>365 </ComboboxPrimitive.Chip>
364 );366 );
365}367}
366368
367function ComboboxChipRemove(props: ComboboxPrimitive.ChipRemove.Props) {369function ComboboxChipRemove({
370 labelId,
371 ...props
372}: ComboboxPrimitive.ChipRemove.Props & { labelId: string }) {
373 const removeLabelId = `${labelId}-remove`;
374
368 return (375 return (
369 <ComboboxPrimitive.ChipRemove376 <ComboboxPrimitive.ChipRemove
370 aria-label="Remove"377 aria-labelledby={`${removeLabelId} ${labelId}`}
371 className="h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"378 className="h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
372 data-slot="combobox-chip-remove"379 data-slot="combobox-chip-remove"
373 {...props}380 {...props}
374 >381 >
375 <XIcon />382 <span id={removeLabelId} className="sr-only">
383 Remove
384 </span>
385 <XIcon aria-hidden="true" />
376 </ComboboxPrimitive.ChipRemove>386 </ComboboxPrimitive.ChipRemove>
377 );387 );
378}388}