Dialog potwierdzenia z natywnym focusem

<main class="delivery"><div class="stamp">Dostawa paczki</div><h1>Punkt<br>odbioru.</h1><div class="ticket"><div><span>Odbiór</span><strong>Pracownia na Rynku</strong><p>Rynek 12, Kraków<br>pon.–pt. 9:00–18:00</p></div><svg viewBox="0 0 110 90" aria-hidden="true"><path d="M15 28 55 8 95 28 95 65 55 85 15 65Z" fill="#ee9757"/><path d="M15 28 55 48 95 28M55 48V85M35 18 75 38" fill="none" stroke="#24404e" stroke-width="3"/></svg></div><button id="open-dialog">Zmień punkt odbioru</button><p id="delivery-result" class="status" aria-live="polite">Wybrano: Pracownia na Rynku</p></main>
<dialog id="delivery-dialog" aria-labelledby="dialog-title"><h2 id="dialog-title">Wybierz punkt odbioru</h2><p>Przykładowe punkty odbioru.</p><div class="dialog-form"><label for="delivery-point">Punkt odbioru</label><select id="delivery-point"><option>Pracownia na Rynku</option><option>Biblioteka nad Wisłą</option><option>Kiosk przy dworcu</option></select><div class="dialog-actions"><button value="cancel">Anuluj</button><button id="confirm-delivery" value="confirm">Potwierdź</button></div></div></dialog>

*{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:#dae9eb;--ink:#24404e;--focus:#ba531b}.delivery{max-width:680px;margin:0 auto;padding:30px}.stamp{font:14px monospace;border-bottom:1px solid #759299;padding-bottom:12px}h1{font-size:clamp(36px,5vw,58px);letter-spacing:-2px;line-height:1.05;margin:23px 0}.ticket{display:flex;justify-content:space-between;align-items:center;border:2px solid #24404e;padding:22px;background:#f9fbf7;margin-bottom:22px}.ticket span{display:block;font-size:13px;color:#48636e}.ticket strong{font-family:Georgia,serif;font-size:24px}.ticket p{margin:8px 0 0;font-size:14px}.ticket svg{width:115px;flex-shrink:0}button{padding:10px 20px;border:1px solid #24404e;background:#24404e;color:#fff}.status{margin:12px 0 0}dialog{border:2px solid #24404e;padding:28px;width:min(440px,calc(100% - 32px));color:#24404e;background:#f9fbf7}dialog::backdrop{background:#102a3bb3}dialog h2{font-size:25px}dialog p{font-size:14px}label{display:block;font-weight:600}select{width:100%;min-height:44px;margin:8px 0 22px;border:1px solid #759299;padding:8px;background:white}.dialog-actions{display:flex;gap:10px;justify-content:flex-end}.dialog-actions button:first-child{color:#24404e;background:transparent}@media(max-width:400px){.delivery{padding:22px}.ticket{padding:16px}.ticket strong{font-size:20px}.ticket svg{width:75px}.dialog-actions{flex-wrap:wrap}}

(()=>{
const dialog=document.querySelector('dialog');document.querySelector('#open-dialog').addEventListener('click',()=>dialog.showModal());dialog.querySelectorAll('button[value]').forEach(button=>button.addEventListener('click',()=>{if(button.value==='confirm')document.querySelector('#delivery-result').textContent='Wybrano: '+document.querySelector('#delivery-point').value;dialog.close(button.value);}));
})();