Keyboard focus and accessibility

Hyvä modals handle keyboard focus and accessibility automatically as much as possible.

Focus shift when showing and hiding dialogs

When a modal is shown, the first focusable element is selected automatically. To specify a different element to be focussed, add the x-focus-first attribute.

<?= $modalViewModel->createModal()->withContent(<<<END_OF_CONTENT
<div class="mt-20 flex justify-between gap-2">
    <button @click="hide" type="button" class="btn">
        {$escaper->escapeHtml(__('Cancel'))}
    </button>
    <button x-focus-first @click="alert('beep')" type="button" class="btn btn-primary">
        {$escaper->escapeHtml(__('I agree'))}
    </button>
</div>

When the modal is hidden, the focus is moved back to the element that triggered the modal.
This also works when opening multiple nested dialogs.

Focus trapping

When a modal with a backdrop is shown, the website elements outside the modal dialog can no longer be focused with Tab / Shift-Tab.