Blocked aria-hidden on a <input> element

[davideprevosto]

Hi there,

In a Laravel Livewire project, I am displaying a dialogue box with a couple of input fields inside it.
Since a few days/weeks I am getting this error into the console:

Blocked aria-hidden on a <input> element because the element that just received focus must not be hidden from assistive technology users. 

Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. 

For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. 

<input wire:model.blur=​"form.lastName" autocomplete=​"off" list=​"autocompleteOff" class=​" form__element" type=​"text" id=​"lastName" name=​"lastName" placeholder=​"Inserisci il cognome" required maxlength=​"50">​

The code I am using to show the modal is:

<div x-cloak x-data="{
    isOpen: false,
    openModal: function(modalId) {
        if (modalId === '{{ $modalId }}') {
            this.isOpen = true;
        }
    },
    closeModal: function(modalId) {
        this.isOpen = false;
        if ({{ var_export($emitCloseEvent, true) }}) {
            $dispatch('close-modal', { modalId })
        }
    }
}" @keydown.escape.window="isOpen ? closeModal('{{ $modalId }}') : null"
    x-trap.inert="isOpen" @open-modal.window="openModal($event.detail.modalId)">
    <template x-teleport="body">
        <div x-show="isOpen" x-trap.inert="isOpen" class="modal fixed inset-0 isolate z-[999] grid place-content-center px-4" role="dialog" aria-modal="true">
            <div class="modal__overlay absolute -z-10 size-full bg-secondary/80 text-white backdrop-blur-sm"
                @click="closeModal('{{ $modalId }}')"></div>

            <span
                class="sticky mx-auto grid size-12 -translate-y-1 cursor-pointer place-content-center rounded-full text-2xl text-on-inverse-surface transition-colors duration-200 hover:bg-surface/80 hover:text-on-surface md:ml-auto md:mr-0 md:translate-x-full"
                @click.prevent="closeModal('{{ $modalId }}')" x-trap.inert.noscroll="isOpen">&times;
            </span>

            {{-- Container --}}
            <div
                class="modal__container relative z-10 grid h-full max-h-[80dvh] w-full max-w-2xl cursor-auto gap-2 overflow-y-auto overflow-x-clip rounded-2xl bg-surface px-10 py-8 text-on-surface/80">
                <div class="modal__body border-t border-outline/20 pt-6">
                    {{ $slot }}
                </div>
            </div>
        </div>
    </template>
</div>

Do you have any suggestion on this issue? Is anyone getting the same?

Thanks

[ekwoka]

The issue is that you have x-trap.inert that isn't around the focused element.

In your code here, you have 2 x-trap.inert that will be in separate parts of the dom, so they will make everything inert.

[davideprevosto]

Thanks for the reply @ekwoka. I tried removing the x-trap attribute completely and the error disappeared. Now I need to re-study the x-trap attribute, because it seems I have made a big mistake here.
Thank you

[ekwoka]

The issue was that you had it outside the template and inside the template on the same condition.

Just the inside one is all you need.

Though maybe look at using the Dialog element instead.

[davideprevosto]

Did you mean https://alpinejs.dev/component/headless-dialog or https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?

[ekwoka]

The second.