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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user