Skip to content

fix(a11y): label the /inspect link input (#1088) - #1095

Merged
JOY (JOY) merged 1 commit into
devfrom
fix/inspect-input-label
Oct 26, 2026
Merged

JOY (JOY) merged 1 commit into
devfrom
fix/inspect-input-label

Conversation

@JOY

@JOY JOY (JOY) commented Oct 26, 2026 •

Copy link
Copy Markdown
Contributor

Closes #1088

What

The main input on /inspect (DeepInspectWorkspace.tsx) was named only by its placeholder, and the page pre-fills it with a sample URL, so no caption was ever visible. It now gets aria-label from a new inspect.inputAria key in vi/en/cs ("Link sản phẩm, gian hàng hoặc tên máy" / "Product or shop link, or model name" / "Odkaz na produkt nebo obchod, nebo název modelu").

Test

  • e2e/input-labels.spec.ts now also covers /inspect, /contact-us and /compare; it passes 8/8 locally.
  • Mutation check: with DeepInspectWorkspace.tsx reverted to the pre-fix version, only /inspect fails, reporting the placeholder-only text input; with the fix, 8/8 pass.

🤖 Generated with Claude Code

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: Claude Opus 5.5 <noreply@anthropic.com>
@JOY JOY (JOY) added the agent:brand Claimed by Agent: Brand label Oct 26, 2026

@claude claude Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Code review skipped — your organization has no extra usage available to pay for this review.

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.

@vercel

vercel Bot commented Oct 26, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
rate Ready Ready Preview Oct 26, 2026 2:07am UTC

Request Review

@github-actions github-actions Bot added the area:frontend Frontend / Next.js / UI label Oct 26, 2026
@coderabbitai

coderabbitai Bot commented Oct 26, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 5489dab5-0a7d-4e5a-b8cf-a866f5108eb9
Commits

Reviewing files that changed from the base of the PR and between a1ae633 and 2949fdd.

Files selected for processing: 5
  • apps/web/e2e/input-labels.spec.ts
  • apps/web/locales/cs.json
  • apps/web/locales/en.json
  • apps/web/locales/vi.json
  • apps/web/src/components/inspect/DeepInspectWorkspace.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

The /inspect input now has a localized accessible name in English, Czech, and Vietnamese. The input-label end-to-end test now covers /inspect, /contact-us, and /compare.

Changes: Inspect input accessibility

Layer / File(s) Summary
Localized input label and route coverage
apps/web/src/components/inspect/DeepInspectWorkspace.tsx, apps/web/locales/*.json, apps/web/e2e/input-labels.spec.ts
The inspection input uses the new inspect.inputAria translations. The end-to-end test includes /inspect, /contact-us, and /compare.

Priority: Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested labels: area:frontend

Suggested reviewers: dos

Merge Risk: Minimal · up to 2949f

No actionable merge-blocking risk remains.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files. (3 skipped: 3 … Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title "fix(a11y): label the /inspect link input (#1088)" follows Conventional Commits and names the main change: an accessible label for the /inspect link input. The changeset adds an aria-label f…
Linked Issues check Passed Issue #1088 is open and directly linked. The supplied PR evidence shows DeepInspectWorkspace.tsx uses inspect.inputAria for the main input. The evidence also shows the key in vi.json, en.json,…
Out of Scope Changes check Passed The changes stay within issue #1088. The component change adds the required accessible name, the three locale entries provide the required translations, and the test additions provide the required rou…
Description check Passed The description clearly explains what changed, why it changed, the affected files, the linked issue, and the test results. It does not include the template checklist, PR title section, screenshots sec…
Full details: Title check

Explanation

The title "fix(a11y): label the /inspect link input (#1088)" follows Conventional Commits and names the main change: an accessible label for the /inspect link input. The changeset adds an aria-label from a new inspect.inputAria key in vi/en/cs locales, and extends the e2e input-labels test to cover /inspect, /contact-us, and /compare. The title covers the primary fix and does not describe unrelated work.

Full details: Linked Issues check

Explanation

Issue #1088 is open and directly linked. The supplied PR evidence shows DeepInspectWorkspace.tsx uses inspect.inputAria for the main input. The evidence also shows the key in vi.json, en.json, and cs.json. The Playwright test includes /inspect, /contact-us, and /compare, and checks visible fields for a label, aria-label, or aria-labelledby. Without the new aria-label, the pre-filled /inspect input would remain in the test's unlabelled set.

Full details: Out of Scope Changes check

Explanation

The changes stay within issue #1088. The component change adds the required accessible name, the three locale entries provide the required translations, and the test additions provide the required route coverage. No unrelated change is shown.

Full details: Description check

Explanation

The description clearly explains what changed, why it changed, the affected files, the linked issue, and the test results. It does not include the template checklist, PR title section, screenshots section, or notes section, but the core change and validation details are complete.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files. (3 skipped: 3 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Finishing Touches: 💡 1
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

dos[bot]
dos Bot approved these changes Oct 26, 2026

@dos dos Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⏱️ Code Review completed (5 eligible files · 3,872 chars · 1 model call(s) · 1 PR unit(s))

Whole diff with bounded context at base ba90e86 / head 2949fdd.

✅ CLEAN_PASS: Complete diff reviewed

@JOY
JOY (JOY) merged commit 037dd9f into dev Oct 26, 2026
25 checks passed
@JOY
JOY (JOY) deleted the fix/inspect-input-label branch October 26, 2026 02:28
@JOY JOY (JOY) mentioned this pull request Oct 26, 2026
2 of 6 tasks

This branch was successfully deployed

1 active deployment
Preview — 2949fdd1 Deployed Oct 26, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

agent:brand Claimed by Agent: Brand area:frontend Frontend / Next.js / UI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

a11y: label the /inspect link input

1 participant