Skip to content

fix(apollo-vertex): give docs example controls accessible names - #1392

Merged
ruudandriessen merged 1 commit into
mainfrom
fix/vertex-docs-accessible-names
Oct 16, 2026
Merged

ruudandriessen merged 1 commit into
mainfrom
fix/vertex-docs-accessible-names

Conversation

@ruudandriessen

@ruudandriessen ruudandriessen commented Oct 16, 2026 •

Copy link
Copy Markdown
Collaborator

What

Docs examples rendered controls with no accessible name (flagged by axe). This updates the examples so they model correct usage, and gives CommandInput a default label.

  • button: aria-label on the icon-only size example
  • button-group: aria-label on the chevron and bold/italic/underline icon buttons
  • tooltip: aria-label on the icon-only trigger
  • progress: aria-label on each bar and in the usage snippet
  • input: aria-label on the placeholder-only and file inputs, and in the usage snippet
  • input-group: aria-label on each InputGroupInput, and in the usage snippet
  • field: FieldLabel now linked to its control with htmlFor/id (preview and snippet)
  • form-wizard: the headless demo used the same field names as the main demo (account.fullName, account.email). TextField derives id from the field name, so the page had duplicate ids and the second demo's labels pointed at the first demo's inputs. Its first step group is renamed to profile.
  • command: CommandInput sets aria-label={t("search_input")} ("Search") before spreading props, so consumers can override it. New key added to locales/en.json only; the command registry item now depends on react-i18next and ships lib/vertex-translation.ts, same as dialog and pagination.

Notes

  • I chose a generic "Search" for the CommandInput default because ComboboxInput reuses it, so "Search commands" would be wrong there.
  • cmdk always sets aria-labelledby on its input, pointing at its own visually hidden <label>, which is empty unless Command gets a label prop. Browsers and axe fall back to aria-label when that label is empty, but strict accname implementations (for example dom-accessibility-api in jsdom) don't. Passing label to Command is the other way to name it.
  • Out of scope, but spotted: Progress doesn't forward value to the Radix root, so aria-valuenow is never set.
  • No changeset: this repo releases from conventional commits.

Verification

  • pnpm lint (oxlint type-aware), pnpm typecheck and pnpm test in packages/apollo-vertex and apps/apollo-vertex
  • pnpm lint:deps, pnpm -w knip, pnpm --filter apollo-vertex registry:build
  • Ran a temporary jsdom render of CommandInput (not committed): the default aria-label renders. Axe in jsdom passes with or without it, so that run doesn't reproduce the original finding. A consumer aria-label wins because props are spread after the default.
  • I did not run the docs site in a browser or rerun the full axe scan

Docs examples rendered icon-only buttons, progress bars and inputs with no
accessible name, which axe flags and which models the wrong usage.

- button, button-group, tooltip: aria-label on icon-only buttons
- progress: aria-label on each bar, including the usage snippet
- input, input-group: aria-label on placeholder-only inputs and snippets
- field: link FieldLabel to its control with htmlFor/id
- form-wizard: the headless demo reused the main demo's field names, so
  both rendered duplicate ids and the second demo's labels pointed at the
  first demo's inputs; rename its first step group to "profile"
- CommandInput: default aria-label from the new "search_input" locale key,
  overridable via props; registry item now ships vertex-translation
@ruudandriessen
ruudandriessen requested a review from a team as a code owner October 16, 2026 11:45
@ruudandriessen
ruudandriessen requested a balanced review from Copilot and removed request for Copilot October 16, 2026 11:45
@github-actions github-actions Bot added the size:M 30-99 changed lines. label Oct 16, 2026
@github-actions
github-actions Bot temporarily deployed to preview/apollo-landing October 16, 2026 11:45 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-design October 16, 2026 11:45 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-docs October 16, 2026 11:45 Destroyed
@github-actions
github-actions Bot temporarily deployed to preview/apollo-vertex October 16, 2026 11:45 Destroyed
@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • ✅ 1947 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1713
ISC 91
Apache-2.0 56
BSD-3-Clause 28
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.3.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@github-actions

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core — — — — —
@uipath/apollo-react — — — — —
@uipath/apollo-ui-icons — — — — —
@uipath/apollo-vertex 68.8% — (3 untracked) 325.9 KB 1.84 MB +32 B
@uipath/apollo-wind — — — — —
@uipath/ap-chat — — — — —

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

@github-actions

Copy link
Copy Markdown
Contributor

Storybook visual diff

✅ No stories are affected by this PR's changes; nothing to compare. Logs

Updated (PT): Oct 16, 2026, 04:55:14 AM

@ruudandriessen
ruudandriessen merged commit 21413af into main Oct 16, 2026
51 of 59 checks passed
@ruudandriessen
ruudandriessen deleted the fix/vertex-docs-accessible-names branch October 16, 2026 12:06

This branch was successfully deployed

No deployments
preview/apollo-vertex — 6117f60d Deployed Oct 16, 2026 by github-actions[bot]
preview/apollo-docs — 6117f60d Deployed Oct 16, 2026 by github-actions[bot]
preview/apollo-design — 6117f60d Deployed Oct 16, 2026 by github-actions[bot]
preview/apollo-landing — 6117f60d Deployed Oct 16, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants