Keyboard Focus and Accessibility

Hyvä modals automatically manage keyboard focus and accessibility.

Focus Shift: Showing and Hiding Dialogs

By default, when a modal opens, focus shifts to its first focusable element. To specify a different element, add the x-focus-first attribute to it.

<?= $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 a modal closes, focus returns to the element that opened it. This behavior extends to nested modals.

Focus Trapping

For modals with a backdrop, focus is trapped within the modal. Users cannot tab or Shift-Tab to elements outside the dialog.