3.2 KiB
3.2 KiB
F-065 — Implementer evidence
Scope delivered
<input type="search"> controls across the storefront frontend and the
admin backoffice were missing the id and name attributes, which
fails the a11y lint rule form-field-element-required (and similar
browser autofill heuristics). Every affected search input now carries
both attributes.
Changes
| File | Input | Added |
|---|---|---|
project/frontend/src/components/layout/Header.tsx |
header live search | id="site-search" name="q" |
project/frontend/src/app/search/page.tsx |
full search form | id="search-page-q" |
project/apps/admin/src/app/(dashboard)/products/page.tsx |
products list search | id="admin-products-search" name="q" |
project/apps/admin/src/app/(dashboard)/customers/page.tsx |
customers search | id="admin-customers-search" name="q" |
project/apps/admin/src/app/(dashboard)/inventory/page.tsx |
inventory search | id="admin-inventory-search" name="q" |
project/apps/admin/src/app/(dashboard)/orders/page.tsx |
orders search | id="admin-orders-search" name="q" |
name="q" is meaningful for the forms that submit via GET (header live
search and the storefront /search page use it as the query parameter),
and for the admin filters it provides a stable identifier that browser
autofill can latch onto.
Acceptance traceability
| Acceptance criterion | How it is met |
|---|---|
Every search input has an id attribute and a meaningful name attribute |
All six inputs updated. |
a11y lint rule form-field-element-required (and equivalents) are happy |
The original report referenced A form field element should have an id or name attribute; both are now present. |
verify.sh is green |
Exit 0. |
Manual verification
$ curl -s http://192.168.18.93:3003/ | python3 -c "import re,sys; html=sys.stdin.read(); print('\n'.join(re.findall(r'<input[^>]*type=\"search\"[^>]*>', html)[:1]))"
<input type="search" id="site-search" placeholder="…" class="…" name="q" value=""/>
$ curl -s http://192.168.18.93:3003/search | python3 -c "import re,sys; html=sys.stdin.read(); print('\n'.join(re.findall(r'<input[^>]*type=\"search\"[^>]*>', html)))"
<input type="search" id="site-search" placeholder="…" class="…" name="q" value=""/>
<input id="search-page-q" type="search" placeholder="…" name="q" value=""/>
The admin inputs are client-rendered; the source was updated and the typecheck/build passes.
Build verification
npx tsc --noEmit(frontend / admin) — exit 0./scripts/verify.sh— exit 0- Admin and frontend services restarted via
monolith.sh prod restart
Files touched
project/frontend/src/components/layout/Header.tsx (id + name)
project/frontend/src/app/search/page.tsx (id)
project/apps/admin/src/app/(dashboard)/products/page.tsx (id + name)
project/apps/admin/src/app/(dashboard)/customers/page.tsx (id + name)
project/apps/admin/src/app/(dashboard)/inventory/page.tsx (id + name)
project/apps/admin/src/app/(dashboard)/orders/page.tsx (id + name)