关闭Bootstrap模态框后控制台出现aria-hidden警告的解决方法

我的网站代码仓库：https://github.com/anup-sdp/drink-site
在线演示地址：https://anup-sdp.github.io/drink-site/

点击详情按钮弹出Bootstrap模态框，关闭时浏览器控制台出现如下警告：

警告信息：
drink-site/:1 阻止了元素上的aria-hidden属性，因为它的后代元素仍保留焦点。辅助技术用户不能被隐藏焦点。请避免在拥有焦点的元素或其祖先上使用aria-hidden。考虑改用inert属性，它还能阻止焦点获取。更多详情请查看WAI-ARIA规范中的aria-hidden章节：https://w3c.github.io/aria/#aria-hidden。
拥有焦点的元素：<div.modal fade#exampleModal>
带有aria-hidden的祖先元素：<div.modal fade#exampleModal>

即使是从Bootstrap官网复制的示例模态框代码，也会出现类似警告，请问如何消除这个警告？

附Bootstrap官方示例代码：

<!-- bootstrap modal example -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap modal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <h1>bs modal</h1>
        <!-- modal button -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">show modal</button> 
        <br><br>
        <button onclick="customShow()">custom show</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">details</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body">
                <p>description</p>
            </div>
            <div class="modal-footer">
                <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>  

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
    <script>
        function customShow(){
            let myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
            myModal.show();
        }
    </script>
  </body>
</html>

<!-- 
warning in console:
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: <div.modal fade#exampleModal>
Ancestor with aria-hidden: <div.modal fade#exampleModal> 
-->

这个警告的核心原因是：模态框关闭时，焦点仍停留在带有aria-hidden="true"的模态框元素上，而辅助技术规范不允许隐藏拥有焦点的元素及其祖先。可以通过以下两种方式解决：

方法1：手动监听关闭事件，恢复焦点到触发按钮 #

在模态框的hidden.bs.modal事件中，主动将焦点移回当初打开模态框的按钮，避免焦点留在已隐藏的模态框上。

修改示例中的脚本部分：

<script>
    const triggerBtn = document.querySelector('[data-bs-target="#exampleModal"]');
    const customBtn = document.querySelector('button[onclick="customShow()"]');
    const modal = new bootstrap.Modal(document.getElementById('exampleModal'));

    function customShow(){
        modal.show();
    }

    // 监听模态框关闭事件，将焦点恢复到触发按钮
    modal._element.addEventListener('hidden.bs.modal', () => {
        if(document.activeElement === modal._element){
            triggerBtn.focus();
        }
    });
</script>

方法2：升级Bootstrap版本（推荐） #

这个焦点处理问题在Bootstrap 5.3.6及以上版本中已经被官方修复。只需替换示例中的Bootstrap资源链接为5.3.6或更高版本即可：

<!-- 替换为5.3.6版本 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

升级后Bootstrap会自动处理焦点回收逻辑，无需额外编写代码即可消除警告。

内容的提问来源于stack exchange，提问作者Anup Barua