mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Anthony Lio
5d78b1da1a
## What kind of change does this PR introduce? bug fix for accessibility, fixes [docs-1280](https://linear.app/supabase/issue/DOCS-1280/projectconfigvariables-label-the-readonly-inputs-and-name) ## What is the current behavior? the project url and api key fields in `ProjectConfigVariables` have no associated label, so a screen reader announces an edit field with no indication of which value it holds ## What is the new behavior? - associates a `<label>` with each readonly input, so the fields announce as "project url" and "publishable key" - names each copy button after the value it copies - drops `role="combobox"` from the trigger, keeping the `aria-haspopup`, `aria-expanded` and `aria-controls` radix already supplies - names the trigger from its content instead of `aria-label`, so it announces the current selection - names the shared `CommandInput` reset button and hides its icons ## test - `pnpm dev:docs` - `/docs/guides/getting-started/quickstarts/nextjs` (`url` + `publishable`) - `/docs/guides/auth/server-side/creating-a-client`, branch selector, needs a branching-enabled project - `/docs/guides/observability/log-drains` - `api_settings` in any getting-started quickstart ## Additional context reverses part of #49952 as that pr added `aria-label` to satisfy `button-name`, but did replace the accessible name rather than adding to it _ the sr-only prefix added here keeps the rule passing and announces the selection <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility** * Improved screen reader support for variable configuration controls, including clearer labels and copy-status announcements. * Enhanced combobox and search interactions with accessible labeling, empty-result announcements, and clearer reset-button names. * Decorative icons and visual-only messages are now hidden from assistive technologies. * **Tests** * Added accessibility coverage for search input icons and the clear-search control. <!-- end of auto-generated comment: release notes by coderabbit.ai -->