Modal hide error - Blocked aria-hidden

Wappler General Need Help
1

Hi all,

I am getting this console error throughout my app, when closing a modal

Blocked aria-hidden on an element because its descendant retained focus. The 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.
Element with focus: <button.close>
Ancestor with aria-hidden: <div.modal#editRecordModal> <div class=​"modal" id=​"editRecordModal" is=​"dmx-bs4-modal" tabindex=​"-1" dmx-on:hide-bs-modal=​"editRecordForm.reset()​" dmx-on:show-bs-modal=​"editStartDateVar.setValue(editRecordForm.data_detail_perdiem.data.trips[tripIndex.value]​.startDate)​;​editEndDateVar.setValue(editRecordForm.data_detail_perdiem.data.trips[tripIndex.value]​.startDate)​" style=​"padding-right:​ 15px;​ display:​ block;​" aria-hidden=​"true">​…​</div>​

I have this import in my main layout

Here's the beginning code for my modal

<div class="modal" id="editRecordModal" is="dmx-bs4-modal" tabindex="-1" role="dialog" aria-hidden="true" dmx-on:hide-bs-modal="editRecordForm.reset()" dmx-on:show-bs-modal="editStartDateVar.setValue(editRecordForm.data_detail_perdiem.data.trips[tripIndex.value].startDate);editEndDateVar.setValue(editRecordForm.data_detail_perdiem.data.trips[tripIndex.value].startDate)">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar registo<small class="pl-2">ajuda de custo</small></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

Any tips where I might be able to start to fix this problem?

It seems like the modal is being closed whilst one of the elements is in focus and searching the web, I should remove its focus before closing the modal.

TIA

2

In trying to formulate an answer, I decided to ask Copilot to help me out. This is the reply

You're bumping into a common accessibility warning that browsers throw when a focused element is hidden from assistive technologies. Here's what’s happening and how to fix it:

:warning: What's the issue?

  • The modal <div> has aria-hidden="true", which hides it and all its children from screen readers.
  • But the <button class="close"> inside it still has focus.
  • This creates a conflict: focused elements must be visible to assistive tech users.

:white_check_mark: How to resolve it

You’ve got a few options:

  • Use the inert attribute on the modal instead of aria-hidden.
    This will prevent interaction and focus, and also hide it from assistive tech.

  • Remove focus before hiding the modal.
    For example, shift focus to a neutral element (like body) before applying aria-hidden.

  • Avoid setting aria-hidden="true" on any ancestor of a focused element.
    If the modal is still visible and interactive, it shouldn’t be hidden from accessibility APIs.

:brain: Why it matters

This warning helps ensure that users relying on screen readers or other assistive tools aren’t left behind when modals or overlays are manipulated. Accessibility isn’t just a checkbox—it’s part of good UX.

If you’re using a framework like Bootstrap or ng-bootstrap, this issue can pop up when modals are opened or closed. You might want to check how focus is managed in your modal lifecycle.

3

Thank you @ben . I have tried copilot and chatgpt also, as well as other web forums for the problem, but the proposed solutions don't seem to provide a fix.

I am a bit surprised to have not found this error reported in this forum as this seems to be an issue with the way modals are being shown/hidden in the platform rather than just a coding issue, albeit not saying I don't have one :slight_smile: .

Could be more of a config issue when using bootstrap 4 though..

4

This is not an error message, just a warning that has only recently appeared in the Chrome/Edge browser. It is a warning aimed at the developer about an accessibility issue.

When the modal is hidden from view, assistive technology will see:
aria-hidden="true"

When the modal shows, the same technology will see:
style="display: block;"

The warning means that a focused element (your .btn-close) is inside a container (#loginModal) that’s marked aria-hidden="true", which makes it invisible to assistive technologies—something screen readers really don’t appreciate.

Click outside of the modal to close it and you will find no warning.

The best way to remove the focus before hiding the modal is by using JavaScript as in:

  <script>
    document.querySelectorAll('.modal').forEach(modal => {
      modal.addEventListener('hide.bs.modal', () => {
        document.activeElement.blur();
      });
    });
  </script>

NB: The reason that I asked Copilot, the reply took a few seconds, while this reply took a few minutes. My apologies. :pray:

5

Hi @ben

thank you so much for your quick response.
No apologies needed. Just wanted to add before that I had explored that avenue also.

Meanwhile, I seem to have fixed it with other code changes, probably header js src imports.

I do understand it is a warning and probably was giving it more importance that it should have had due to the late hours and the annoying message in the console.

I had tried JS as well but to no avail, and have tried to recall what might have fixed it but unfortunately can't at the moment, but I think copilot helped with some trial and error.

Thanks again and keep up the good work please!

1 Like