a11y(web): label the search VIN input and announce history rows

Add a visually hidden Label for the VIN input (the previous version
relied on placeholder text only) and an aria-label on each history row
so screen readers announce the vehicle and VIN before activation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-31 17:19:30 +03:00
parent 1fd21bd04b
commit 81d1086fef

View File

@@ -6,7 +6,7 @@ import { startAction } from "@/lib/faro";
import { KEYS_6, KEYS_17 } from "@/lib/keys";
import { capture } from "@/lib/posthog";
import { toast } from "@/lib/toast";
import { Badge, Button, Input, Separator } from "@sase/ui";
import { Badge, Button, Input, Label, Separator } from "@sase/ui";
import { useQuery } from "@tanstack/react-query";
import { Link, createFileRoute, useNavigate } from "@tanstack/react-router";
import { AlertCircle, Car, Clock, Loader2, Search, Send } from "lucide-react";
@@ -509,9 +509,13 @@ function SearchPage() {
{/* Form */}
<form onSubmit={handleSearch} className="space-y-4">
{/* Input */}
<Label htmlFor="vin" className="sr-only">
Şase numarası
</Label>
<div className="relative">
<VinBrandIcon vin={vin} className="absolute left-4 top-1/2 -translate-y-1/2" />
<Input
id="vin"
ref={inputRef}
placeholder="Şase numarasını girin (17 karakter)"
value={vin}
@@ -709,6 +713,7 @@ function SearchPage() {
<button
key={v.id}
type="button"
aria-label={`${v.brandName} ${v.model ?? ""} — şase ${v.vin}, geçmişten aç`}
onClick={() => {
querySourceRef.current = "history";
const ageDays = v.lastAccessedAt