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
What
Docs examples rendered controls with no accessible name (flagged by axe). This updates the examples so they model correct usage, and gives
CommandInputa default label.aria-labelon the icon-only size examplearia-labelon the chevron and bold/italic/underline icon buttonsaria-labelon the icon-only triggeraria-labelon each bar and in the usage snippetaria-labelon the placeholder-only and file inputs, and in the usage snippetaria-labelon eachInputGroupInput, and in the usage snippetFieldLabelnow linked to its control withhtmlFor/id(preview and snippet)account.fullName,account.email).TextFieldderivesidfrom 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 toprofile.CommandInputsetsaria-label={t("search_input")}("Search") before spreading props, so consumers can override it. New key added tolocales/en.jsononly; thecommandregistry item now depends onreact-i18nextand shipslib/vertex-translation.ts, same asdialogandpagination.Notes
CommandInputdefault becauseComboboxInputreuses it, so "Search commands" would be wrong there.aria-labelledbyon its input, pointing at its own visually hidden<label>, which is empty unlessCommandgets alabelprop. Browsers and axe fall back toaria-labelwhen that label is empty, but strict accname implementations (for exampledom-accessibility-apiin jsdom) don't. PassinglabeltoCommandis the other way to name it.Progressdoesn't forwardvalueto the Radix root, soaria-valuenowis never set.Verification
pnpm lint(oxlint type-aware),pnpm typecheckandpnpm testinpackages/apollo-vertexandapps/apollo-vertexpnpm lint:deps,pnpm -w knip,pnpm --filter apollo-vertex registry:buildCommandInput(not committed): the defaultaria-labelrenders. Axe in jsdom passes with or without it, so that run doesn't reproduce the original finding. A consumeraria-labelwins because props are spread after the default.