Taaktegels met A-Z-index Nieuw

<!-- Taaktegels met A-Z-index · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tta">
  <div class="tta__in">
    <div class="tta__head">
      <p class="tta__org"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M4 28h24M7 28V14M13 28V14M19 28V14M25 28V14M3 12L16 4l13 8z"/></svg>Gemeente Lindehoven</p>
      <h2 class="tta__h">Wat wilt u regelen?</h2>
    </div>
    <ul class="tta__tiles">
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="7" y="4" width="18" height="24" rx="2"/><circle cx="16" cy="14" r="4"/><path d="M11 23h10"/></svg><b>Paspoort of ID-kaart</b><span>Afspraak binnen 5 werkdagen</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M4 15L16 6l12 9M8 13v14h16V13"/><path d="M14 27v-7h4v7"/></svg><b>Verhuizing doorgeven</b><span>Binnen 5 dagen na de verhuizing</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M16 4v4M16 24v4M6 16H4M28 16h-2"/><circle cx="16" cy="16" r="8"/><path d="M16 12v5l3 2"/></svg><b>Melding openbare ruimte</b><span>Losse tegel, kapotte lamp, zwerfafval</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="5" y="5" width="22" height="22" rx="3"/><path d="M13 23V10h5a4 4 0 0 1 0 8h-5"/></svg><b>Parkeervergunning</b><span>Bewoners en bezoekers</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M5 9h22M12 9V5h8v4M8 9l2 18h12l2-18"/></svg><b>Grofvuil ophalen</b><span>Gratis, 4 keer per jaar</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="4" y="8" width="24" height="16" rx="2"/><circle cx="11" cy="16" r="3"/><path d="M17 14h7M17 18h5"/></svg><b>Rijbewijs</b><span>Verlengen of vervangen</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M8 4h11l5 5v19H8z"/><path d="M19 4v5h5M12 15h8M12 19h8M12 23h5"/></svg><b>Uittreksel BRP</b><span>Direct downloaden met DigiD</span></a></li>
      <li><a class="tta__tile" href="#"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M6 27V11l10-6 10 6v16"/><path d="M11 27v-8h10v8M6 27h20"/></svg><b>WOZ-waarde</b><span>Inzien of bezwaar maken</span></a></li>
    </ul>

    <div class="tta__az">
      <div class="tta__azhead">
        <h3 class="tta__azh" id="tta-azh">Alle onderwerpen van A tot Z</h3>
        <label class="tta__search"><span class="tta__vh">Zoek een onderwerp</span><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="6"/><path d="M14 14l4 4"/></svg><input type="search" class="tta__input" placeholder="Zoek een onderwerp, bv. afval" autocomplete="off"></label>
      </div>
      <div class="tta__letters" role="toolbar" aria-label="Filter op beginletter" aria-controls="tta-list"></div>
      <p class="tta__count" aria-live="polite"></p>
      <ul class="tta__list" id="tta-list" aria-labelledby="tta-azh"></ul>
      <div class="tta__empty" hidden><b>Geen onderwerp gevonden.</b> Probeer een ander woord of bel ons op (0318) 12 34 56, op werkdagen van 8.30 tot 17.00 uur. <button type="button" class="tta__reset">Toon alle onderwerpen</button></div>
    </div>
  </div>
</div>
</div>

/* Taaktegels met A-Z-index · NedDev · eigen werk. */
/* fonts (Fontshare): red-hat-display@400,500,700 */
.tta{--ink:#152238;--mut:#4f5c70;--blue:#154273;--blue2:#0e3157;--soft:#eef3f8;--line:#d4dde8;--yel:#ffb612;background:#fff;color:var(--ink);font-family:'Red Hat Display','Switzer',sans-serif;box-sizing:border-box}
.tta *,.tta *::before{box-sizing:border-box}
.tta [hidden]{display:none!important}
.tta__in{max-width:1140px;margin:0 auto;padding:40px 32px 40px}
.tta__org{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-weight:700;font-size:15px;color:var(--blue)}
.tta__org svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.tta__h{margin:0 0 20px;font-weight:700;font-size:clamp(26px,3vw,36px);letter-spacing:-.01em}
.tta__tiles{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tta__tile{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;height:100%;padding:16px;background:var(--blue);color:#fff;text-decoration:none;border-radius:4px;transition:background-color .15s ease}
.tta__tile svg{grid-row:1/3;width:32px;height:32px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tta__tile b{font-size:16px;font-weight:700;line-height:1.2}
.tta__tile span{font-size:13px;color:#cbd9ea;line-height:1.3}
.tta__tile:hover{background:var(--blue2)}
.tta__tile:hover b{text-decoration:underline;text-underline-offset:3px}
.tta__tile:active{background:#0a2440}
.tta__tile:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.tta__az{background:var(--soft);border-radius:6px;padding:22px 24px 24px}
.tta__azhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tta__azh{margin:0;font-size:19px;font-weight:700}
.tta__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tta__search{position:relative;display:block;flex:0 1 340px}
.tta__search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--mut);stroke-width:2}
.tta__input{width:100%;font:500 15px 'Red Hat Display',sans-serif;color:var(--ink);padding:11px 12px 11px 38px;border:2px solid var(--line);border-radius:4px;background:#fff;outline:none;transition:border-color .15s ease}
.tta__input:hover{border-color:#a8b7c9}
.tta__input:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px var(--yel)}
.tta__letters{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px}
.tta__l{min-width:32px;height:34px;padding:0 5px;font:700 14px 'Red Hat Display',sans-serif;color:var(--blue);background:#fff;border:1px solid var(--line);border-radius:3px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tta__l:hover:not(:disabled){background:#dfe8f2}
.tta__l[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.tta__l:disabled{color:#a3adba;background:transparent;border-color:transparent;cursor:not-allowed}
.tta__l:focus-visible{outline:3px solid var(--yel);outline-offset:1px}
.tta__l--all{padding:0 12px}
.tta__count{margin:0 0 8px;font-size:13px;color:var(--mut);min-height:18px}
.tta__list{list-style:none;margin:0;padding:0;columns:3;column-gap:28px}
.tta__list li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line)}
.tta__list a{color:var(--blue);font-weight:500;font-size:15px;text-decoration:none}
.tta__list a:hover{text-decoration:underline;text-underline-offset:3px}
.tta__list a:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.tta__empty{padding:16px;background:#fff;border:1px dashed #a8b7c9;border-radius:4px;font-size:14px;line-height:1.5}
.tta__empty b{display:block;margin-bottom:4px}
.tta__reset{margin-top:10px;display:block;font:700 14px 'Red Hat Display',sans-serif;color:#fff;background:var(--blue);border:0;border-radius:3px;padding:9px 14px;cursor:pointer}
.tta__reset:hover{background:var(--blue2)}
.tta__reset:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
@media (max-width:900px){.tta__tiles{grid-template-columns:1fr 1fr}.tta__list{columns:2}}
@media (max-width:560px){
  .tta__in{padding:28px 14px 28px}
  .tta__tiles{grid-template-columns:1fr;gap:6px}
  .tta__tile{padding:12px 14px}
  .tta__az{padding:16px 12px}
  .tta__search{flex-basis:100%}
  .tta__list{columns:1}
  .tta__l{min-width:30px;height:32px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.tta *{transition:none!important}}

// Taaktegels met A-Z-index · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.tta'); if(!w) return;
const T=['Aanbouw en verbouwing','Adreswijziging doorgeven','Afvalkalender','Afvalpas','Bijstandsuitkering','Bewonersparkeren','Bomen kappen','Containerpas','Dakkapel plaatsen','Evenement organiseren','Gehandicaptenparkeerkaart','Geboorteaangifte','Gemeentelijke belastingen','Grofvuil ophalen','Hondenbelasting','Huwelijk en partnerschap','ID-kaart','Inburgering','Kwijtschelding','Leerlingenvervoer','Melding openbare ruimte','Naturalisatie','Omgevingsvergunning','Overlijden aangeven','Paspoort','Parkeervergunning','Rijbewijs','Schuldhulpverlening','Subsidie voor verenigingen','Terrasvergunning','Uitkering aanvragen','Uittreksel BRP','Verhuizing doorgeven','Verklaring omtrent gedrag (VOG)','Vergunning standplaats','Wmo-hulp aanvragen','WOZ-waarde','Zwerfafval melden'];
const lettersEl=w.querySelector('.tta__letters'), list=w.querySelector('.tta__list'), count=w.querySelector('.tta__count'), empty=w.querySelector('.tta__empty'), inp=w.querySelector('.tta__input');
const have=new Set(T.map(t=>t[0].toUpperCase()));
let letter='', q='';
const mk=(lab,val)=>{const b=document.createElement('button'); b.type='button'; b.className='tta__l'+(val===''?' tta__l--all':''); b.textContent=lab; b.dataset.v=val; b.setAttribute('aria-pressed',val===letter?'true':'false'); if(val&&!have.has(val)){b.disabled=true; b.setAttribute('aria-label',lab+', geen onderwerpen');} lettersEl.appendChild(b); return b;};
mk('Alle','');
'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(c=>mk(c,c));
const btns=[...lettersEl.querySelectorAll('.tta__l')];
const enabled=()=>btns.filter(b=>!b.disabled);
const setRoving=(cur)=>enabled().forEach(b=>b.tabIndex=(b===cur?0:-1));
setRoving(btns[0]);
const render=()=>{
  const ql=q.trim().toLowerCase();
  const hits=T.filter(t=>(!letter||t[0].toUpperCase()===letter)&&(!ql||t.toLowerCase().includes(ql)));
  list.innerHTML=hits.map(t=>'<li><a href="#">'+t+'</a></li>').join('');
  empty.hidden=hits.length>0; list.hidden=hits.length===0;
  const what=letter?' met de letter '+letter:'';
  count.textContent=hits.length?(hits.length+(hits.length===1?' onderwerp':' onderwerpen')+what+(ql?' voor “'+q.trim()+'”':'')):'0 onderwerpen gevonden';
};
lettersEl.addEventListener('click',e=>{const b=e.target.closest('.tta__l'); if(!b||b.disabled) return; letter=b.dataset.v; btns.forEach(x=>x.setAttribute('aria-pressed',x===b?'true':'false')); setRoving(b); render();});
lettersEl.addEventListener('keydown',e=>{const en=enabled(); const i=en.indexOf(document.activeElement); if(i<0) return; let n=-1;
  if(e.key==='ArrowRight') n=(i+1)%en.length; else if(e.key==='ArrowLeft') n=(i-1+en.length)%en.length; else if(e.key==='Home') n=0; else if(e.key==='End') n=en.length-1;
  if(n>-1){e.preventDefault(); setRoving(en[n]); en[n].focus();}});
inp.addEventListener('input',()=>{q=inp.value; render();});
w.querySelector('.tta__reset').addEventListener('click',()=>{q=''; inp.value=''; letter=''; btns.forEach(x=>x.setAttribute('aria-pressed',x.dataset.v===''?'true':'false')); setRoving(btns[0]); render(); inp.focus();});
w.querySelectorAll('a[href="#"]').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
list.addEventListener('click',e=>{if(e.target.closest('a')) e.preventDefault();});
render();
}
init(document.querySelector('.jouw-container'));