64 lines
3.2 KiB
Markdown
64 lines
3.2 KiB
Markdown
# 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)
|
|
``` |