Zakładki z nawigacją strzałkami

<main class="studio"><header><h1>Kolekcja ilustracji.</h1><p>Miasto, wybrzeże i góry.</p></header><div class="tabs" role="tablist" aria-label="Serie fotografii"><button id="tab-city" role="tab" aria-selected="true" aria-controls="panel-city" tabindex="0">Miasto</button><button id="tab-coast" role="tab" aria-selected="false" aria-controls="panel-coast" tabindex="-1">Wybrzeże</button><button id="tab-mountain" role="tab" aria-selected="false" aria-controls="panel-mountain" tabindex="-1">Góry</button></div><section id="panel-city" role="tabpanel" aria-labelledby="tab-city" tabindex="0"><svg viewBox="0 0 600 190" role="img" aria-label="Abstrakcyjna panorama miasta"><rect width="600" height="190" fill="#bcc7bf"/><path d="M0 70H65V30H130V94H190V52H240V10H318V64H394V22H462V80H520V40H600V190H0Z" fill="#315061"/><path d="M42 190 255 102H348L568 190" fill="#d9c9a8"/><path d="M255 102 280 190M348 102 335 190" stroke="#eff0df" stroke-width="4"/></svg><div><h2>Miasto o świcie</h2><p>Ulice i budynki o świcie.</p></div></section><section id="panel-coast" role="tabpanel" aria-labelledby="tab-coast" tabindex="0" hidden><svg viewBox="0 0 600 190" role="img" aria-label="Abstrakcyjna ilustracja wybrzeża"><rect width="600" height="190" fill="#acc7d3"/><path d="M0 102Q140 55 300 98T600 90V190H0" fill="#4c8395"/><path d="M0 159Q180 126 330 160T600 141V190H0" fill="#e2cca4"/><circle cx="470" cy="50" r="23" fill="#f0deac"/></svg><div><h2>Brzeg i horyzont</h2><p>Wybrzeże z widokiem na horyzont.</p></div></section><section id="panel-mountain" role="tabpanel" aria-labelledby="tab-mountain" tabindex="0" hidden><svg viewBox="0 0 600 190" role="img" aria-label="Abstrakcyjna ilustracja gór"><rect width="600" height="190" fill="#bac0d2"/><path d="M0 190 100 50 185 149 300 20 438 165 512 60 600 190" fill="#5d657d"/><path d="M240 98 300 20 369 100 322 79 302 100 274 77Z" fill="#f2ede5"/></svg><div><h2>Wysoko i cicho</h2><p>Górskie szczyty i skalne grzbiety.</p></div></section></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#edf0ec;--ink:#234353;--focus:#915933}.studio{max-width:820px;margin:auto;padding:34px}h1{font-family:Georgia,serif;font-size:42px;margin-bottom:5px}header p{font-size:14px;color:#5c7076}.tabs{display:flex;gap:10px;border-bottom:1px solid #8caaa8;margin:22px 0 18px}.tabs button{border:0;border-bottom:4px solid transparent;background:transparent;padding:10px 20px;color:#234353}.tabs button[aria-selected=true]{border-color:#234353;font-weight:700}section svg{width:100%;height:190px;object-fit:cover}section>div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:16px}h2{font-size:22px;margin-bottom:0}section p{font-size:14px;max-width:310px;margin:0;color:#5c7076}@media(max-width:480px){.studio{padding:24px}h1{font-size:34px}.tabs{gap:0}.tabs button{padding:10px 12px;flex:1}section svg{height:auto}section>div{display:block}section p{margin-top:7px}}

(()=>{
const tabs=[...document.querySelectorAll('[role=tab]')];function activate(tab,focus=false){tabs.forEach(t=>{const selected=t===tab;t.setAttribute('aria-selected',String(selected));t.tabIndex=selected?0:-1;document.querySelector('#'+t.getAttribute('aria-controls')).hidden=!selected;});if(focus)tab.focus();}tabs.forEach((tab,index)=>{tab.addEventListener('click',()=>activate(tab));tab.addEventListener('keydown',e=>{let next;if(e.key==='ArrowRight')next=(index+1)%tabs.length;if(e.key==='ArrowLeft')next=(index-1+tabs.length)%tabs.length;if(e.key==='Home')next=0;if(e.key==='End')next=tabs.length-1;if(next!==undefined){e.preventDefault();activate(tabs[next],true);}});});
})();