Blocked aria-hidden Error #1265
Description
Expected Behavior
When the file upload modal (#uploadModal) is opened, accessibility properties should reflect the visible and interactive state. Screen readers should be able to access the modal content, and no accessibility warnings should be triggered in the browser console.
Actual Behavior
When the upload modal is opened, the root modal container retains aria-hidden="true" even though the modal is visually displayed and contains focusable elements such as buttons. This results in the following browser console warning:
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.btn btn-secondary w-100>
Ancestor with aria-hidden: <div.modal fade#uploadModal> <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="padding-right: 15px; display: block;" aria-hidden="true">…
This issue mainly occurs in Chrome and may affect screen reader users.
Steps to Reproduce the Problem
- Open Laravel Filemanager in the browser.
- Trigger the upload modal (e.g. via the "Upload" button).
- Observe the browser console while the modal is open and focused.
Specifications
- Laravel version : 9.19
- Package version : uniSharp/laravel-filemanager 2.7.0