From 2949fdd1b0b1e8c3dcc5919156e22b7b5713abdd Mon Sep 17 00:00:00 2001
From: JOY <anh@metados.com>
Date: Mon, 26 Oct 2026 09:05:46 +0700
Subject: [PATCH] fix(a11y): label the /inspect link input (#1088)

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>
---
 apps/web/e2e/input-labels.spec.ts                    | 12 +++++++++++-
 apps/web/locales/cs.json                             |  1 +
 apps/web/locales/en.json                             |  1 +
 apps/web/locales/vi.json                             |  1 +
 .../src/components/inspect/DeepInspectWorkspace.tsx  |  3 +++
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/web/e2e/input-labels.spec.ts b/apps/web/e2e/input-labels.spec.ts
index 8ca2c665..bcbb7876 100644
--- a/apps/web/e2e/input-labels.spec.ts
+++ b/apps/web/e2e/input-labels.spec.ts
@@ -3,7 +3,17 @@ import { expect, test } from '@playwright/test';
 // A placeholder is not a label: it disappears as soon as the user types.
 // Every visible field must be named by a <label>, aria-label or
 // aria-labelledby (WCAG 1.3.1, 3.3.2; DOS/Rate#1077).
-const PAGES = ['/smartphones', '/deals', '/merchants', '/leaderboard'];
+const PAGES = [
+  '/smartphones',
+  '/deals',
+  '/merchants',
+  '/leaderboard',
+  // The pre-filled link input was named only by its placeholder
+  // (DOS/Rate#1088).
+  '/inspect',
+  '/contact-us',
+  '/compare',
+];
 
 for (const path of PAGES) {
   test(`visible fields have a label on ${path}`, async ({ page }) => {
diff --git a/apps/web/locales/cs.json b/apps/web/locales/cs.json
index bf2461c4..02ebf640 100644
--- a/apps/web/locales/cs.json
+++ b/apps/web/locales/cs.json
@@ -733,6 +733,7 @@
     "title": "Kontrola odkazů z tržišť a detekce uměle navýšených cen",
     "subtitle": "Vložte odkaz ze Shopee, Lazada, Tiki či TikTok Shop nebo název zařízení a porovnejte ho se skutečnou historií cen, rizikovými skóre prodejce a podílem falešných recenzí.",
     "inputPlaceholder": "Vložte URL produktu/obchodu (např. https://shopee.vn/...-i.88201679.27110898667) nebo název modelu...",
+    "inputAria": "Odkaz na produkt nebo obchod, nebo název modelu",
     "inspectBtn": "Zkontrolovat",
     "inspectingBtn": "Kontroluji...",
     "copyLinkBtn": "Kopírovat odkaz na report",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 3db34d6e..8ae090dd 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -733,6 +733,7 @@
     "title": "Check a product link and spot inflated list prices",
     "subtitle": "Paste a Shopee, Lazada, Tiki or TikTok Shop link, or a device name, to compare it with real price history and see the seller's risk scores and fake-review share.",
     "inputPlaceholder": "Paste product/shop URL (e.g. https://shopee.vn/...-i.88201679.27110898667) or model name...",
+    "inputAria": "Product or shop link, or model name",
     "inspectBtn": "Check now",
     "inspectingBtn": "Checking...",
     "copyLinkBtn": "Copy result link",
diff --git a/apps/web/locales/vi.json b/apps/web/locales/vi.json
index 11cc9093..da11c176 100644
--- a/apps/web/locales/vi.json
+++ b/apps/web/locales/vi.json
@@ -733,6 +733,7 @@
     "title": "Kiểm tra link sản phẩm và phát hiện giá gốc bị nâng khống",
     "subtitle": "Dán link Shopee, Lazada, Tiki, TikTok Shop hoặc tên thiết bị để so với lịch sử giá thật, xem điểm rủi ro của gian hàng và tỷ lệ đánh giá ảo.",
     "inputPlaceholder": "Dán URL sản phẩm/gian hàng (vd: https://shopee.vn/...-i.88201679.27110898667) hoặc nhập tên máy...",
+    "inputAria": "Link sản phẩm, gian hàng hoặc tên máy",
     "inspectBtn": "Kiểm tra ngay",
     "inspectingBtn": "Đang kiểm tra...",
     "copyLinkBtn": "Sao chép link kết quả",
diff --git a/apps/web/src/components/inspect/DeepInspectWorkspace.tsx b/apps/web/src/components/inspect/DeepInspectWorkspace.tsx
index 05e81bf8..0cc7d12d 100644
--- a/apps/web/src/components/inspect/DeepInspectWorkspace.tsx
+++ b/apps/web/src/components/inspect/DeepInspectWorkspace.tsx
@@ -462,6 +462,9 @@ export default function DeepInspectWorkspace({
                   type="text"
                   className="form-control text-dark border-0"
                   placeholder={t('inputPlaceholder')}
+                  // The sample URL pre-fills it, so the placeholder is never a
+                  // visible label (DOS/Rate#1088).
+                  aria-label={t('inputAria')}
                   value={queryInput}
                   onChange={(e) => setQueryInput(e.target.value)}
                 />