BS Modal on mobile view, throwing error on close button click

[alaksandarjesus]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

On Mobile View, click on the close button, we get

Blocked aria-hidden on an element because its descendant retained focus. ....

Reduced test cases

Can test in https://getbootstrap.com/docs/5.3/components/modal/#how-it-works

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3

[ALiaoHaolong]

I met this too!

[julien-deramond]

I can confirm the presence of this message while triggering the modals in our own documentation (but not all the times) in Chrome and Microsoft Edge. The message is not there on Firefox.

Example of error message:

modal/#live-demo:1 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
Ancestor with aria-hidden: 

<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle"
  style="display: none;" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">flex<div class="modal-header">…</div>flex<div class="modal-body"
        style="min-height: 1500px">
        <p>"This is some
          placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we
          use an inline style to set a minimum height, thereby extending the length of the overall modal and
          demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling
          will move the modal as needed."</p>
      </div>
      <div class="modal-footer">flex<button type="button" class="btn
          btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save
          changes</button></div>
    </div>
  </div>
</div>

The error message advises to use the inert attribute instead of aria-hidden. Please note that the inert attribute is not available until Safari 15.5, and we still have to support Safari 12.

[bravedave]

reported here: #41005

[julien-deramond]

Thanks @bravedave, hadn't spotted it was a duplicate. So I'm closing this one.