Add name/type=search to search inputs (autofill/a11y warning)

The room filter, message search, and channel-search inputs had neither
id nor name — browsers warn and can't autofill correctly. Give each a
name + type=search + autoComplete=off. Bump SW cache v12 -> v13.
This commit is contained in:
Jean Chevronnet 2026-06-19 02:00:39 +00:00
parent a35884871f
commit 9be124a477
4 changed files with 4 additions and 4 deletions

View file

@ -1,7 +1,7 @@
// Tchatou service worker — installable PWA + offline app shell.
// Scope: /app/. Only handles same-origin /app/ GETs; the IRC websocket and all
// API calls (cloudflare, change_password, upload) pass straight through.
const CACHE = 'tchatou-v12';
const CACHE = 'tchatou-v13';
const SHELL = ['/app/', '/app/index.html', '/app/favicon.svg', '/app/manifest.webmanifest'];
self.addEventListener('install', (e) => {

View file

@ -88,7 +88,7 @@ export function Sidebar({ onNavigate }: { onNavigate: () => void }) {
<div className="side-search">
<span className="side-search__icon">🔍</span>
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher" aria-label="Rechercher" />
<input name="room-filter" type="search" autoComplete="off" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher" aria-label="Rechercher" />
</div>
<div className="pills">

View file

@ -24,7 +24,7 @@ export function Topbar({ onMenu, onMembers }: { onMenu: () => void; onMembers: (
<div className="topbar topbar--search">
<button className="nav-toggle" onClick={onMenu} aria-label="Salons"></button>
<span className="topbar__searchicon">🔍</span>
<input className="topbar__searchinput" autoFocus placeholder={`Rechercher dans ${label}`}
<input className="topbar__searchinput" name="message-search" type="search" autoComplete="off" autoFocus placeholder={`Rechercher dans ${label}`}
value={search} onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Escape') { setSearch(''); setSearching(false); } }} />
<button className="topbar__searchclose" onClick={() => { setSearch(''); setSearching(false); }} aria-label="Fermer la recherche"></button>

View file

@ -78,7 +78,7 @@ function ExploreModal() {
return (
<Modal title="Explorer les salons" onClose={() => setModal('')}>
<div className="set-inline" style={{ marginBottom: '.7rem' }}>
<input className="modal__input" placeholder="Rechercher ou créer #salon…" value={q}
<input className="modal__input" name="channel-search" type="search" autoComplete="off" placeholder="Rechercher ou créer #salon…" value={q}
onChange={(e) => setQ(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter' && q.trim()) join(q); }} autoFocus />
<button className="upbtn upbtn--primary" onClick={() => join(q)} disabled={!q.trim()}>Rejoindre</button>