Repository navigation
Conversation
The input was named only by its placeholder, and the page pre-fills it with a sample URL, so no caption was ever visible. Give it an aria-label from a new inspect.inputAria key and cover /inspect, /contact-us and /compare in the input-labels spec. Co-authored-by: JOY <anh@metados.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
If your organization's extra usage balance is empty, an organization admin can add extra usage credits at claude.ai/admin-settings/usage. If its monthly spend limit was reached, an admin can raise it on the same page. If neither applies, contact Anthropic support.
Once extra usage is available, someone with write access to this repository can comment @claude review on this pull request to trigger a review.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the
|
Promotes
devtomain:No
supabase/changes.🤖 Generated with Claude Code
📌 TL;DR
This PR resolves an accessibility violation (#1088) by adding an
aria-labelto the pre-filled link input in the Deep Inspect workspace, ensuring the field is properly named for screen readers. It also expands the E2E test suite to cover additional pages and updates localization files to support the new accessibility attribute.🎯 Type of Change
🔍 Changes Walkthrough
apps/web/e2e/input-labels.spec.ts/inspect,/contact-us, and/compareto the list of pages tested for input label accessibility compliance.apps/web/locales/cs.jsoninputAriatranslation key for Czech.apps/web/locales/en.jsoninputAriatranslation key for English.apps/web/locales/vi.jsoninputAriatranslation key for Vietnamese.apps/web/src/components/inspect/DeepInspectWorkspace.tsxaria-labelattribute to the text input using the newinputAriatranslation, fixing the issue where the placeholder was the only identifier for the pre-filled field.📊 Architectural Flow
flowchart TD A[User Visits /inspect] --> B[DeepInspectWorkspace Component] B --> C[Text Input Element] C --> D{Is field pre-filled?} D -- Yes --> E[Placeholder is hidden/irrelevant] E --> F[aria-label provides accessible name] F --> G[Screen Reader announces label] D -- No --> H[Placeholder visible] H --> I[aria-label still provides accessible name] I --> G