fix(a11y): add accessible labels to icon-only controls

[msmps]

Description

• Add aria-labels to icon-only controls in MenuBar and Combobox

Problem

Several icon-only controls were missing explicit accessible labels, so screen readers could announce them as unlabeled buttons.

Controls:

• MenuBar option buttons (icon-only)
• Combobox.TriggerInput clear button
• Combobox.TriggerInput dropdown trigger button
• Combobox.ChipRemove button in multi-select chips

Solution

Add aria-label to each icon-only control:

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@50

commit: d6d2913

[github-actions]

Docs Preview

View docs preview

Commit: d6d2913

[mattrothenberg]

Can we make these props with a default values of the english text so that we can ultimately pass a translated string down where we consume this?

[github-actions]

Visual Regression Report

1 screenshot(s) with visual changes:

Combobox (Open)

17 px (0%) changed

Before	After	Diff

2 screenshot(s) unchanged

• Menu Bar / Text Formatting
• Menu Bar / Without Active State

---

Generated by Kumo Visual Regression

[geoquant]

Thanks for the contribution — the a11y gaps you identified are real and the fix direction is correct. Merge conflict is now resolved. A few changes needed before this can land:

1. Make labels configurable props (per @mattrothenberg's feedback)

Hardcoded English strings prevent i18n. Each label should be a prop with an English default.

TriggerInput:

function TriggerInput({
  clearLabel = "Clear selection",
  showOptionsLabel = "Show options",
  ...props
}: ComboboxBase.Input.Props & {
  /** Accessible label for the clear button. @default "Clear selection" */
  clearLabel?: string;
  /** Accessible label for the dropdown trigger. @default "Show options" */
  showOptionsLabel?: string;
}) {
  // ...
  <ComboboxBase.Clear aria-label={clearLabel} ...>
  <ComboboxBase.Trigger aria-label={showOptionsLabel} ...>
}

Chip:

function Chip({
  removeLabel = "Remove",
  ...props
}: ComboboxBase.Chip.Props & {
  /** Accessible label for the chip remove button. @default "Remove" */
  removeLabel?: string;
}) {
  // ...
  <ComboboxBase.ChipRemove aria-label={removeLabel} ...>
}

2. Chip label wording

Change "Remove selection" → "Remove". In chip context, the chip is the selection — "Remove selection" is ambiguous when there are multiple chips.

3. MenuBar — looks good as-is

aria-label={tooltip} on the icon-only button is correct and necessary — the Tooltip component provides aria-describedby (supplementary), not aria-label (name). No change needed here.