使用 aria-expanded="true" 的 Bootstrap Collapse 无法按预期工作答案

【问题标题】：Bootstrap Collapse with aria-expanded="true" doesn't work as expected使用 aria-expanded="true" 的 Bootstrap Collapse 无法按预期工作
【发布时间】：2021-01-06 16:10:03
【问题描述】：

我使用以下代码在 Bootstrap 4.5 中创建折叠元素：

    <div class="container py-2">
        <div class="row">
<button class="btn btn-success my-3" type="button" data-toggle="collapse" data-target="#collapseSelectTable" aria-expanded="true" aria-controls="collapseSelectTable">toggle element</button>
            <div class="container collapse" id="collapseSelectTable">
            <div class="row bg-light border border-info rounded align-items-center">
                <p>the table</p></div>
            </div>
        </div>
    </div>

单击按钮可以很好地切换折叠的元素，但我希望它应该是可见的 'cos "aria-expanded=true"，如 https://getbootstrap.com/docs/4.5/components/collapse/#accessibility 中所述。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

collapse 元素上需要 show 类以使其默认打开...

"如果您已将可折叠元素设置为默认打开，请使用显示类，改为在控件上设置 aria-expanded="true"。"

https://codeply.com/p/wZCrMNXG1S

【讨论】：

如果我理解得很好，aria-expanded 对元素的状态没有贡献吗？可折叠元素的默认状态是通过在其类中添加或删除“显示”来控制的。 “aria-expanded”属性的作用是什么？
如文档中所述，“此属性将与控件相关联的可折叠元素的当前状态明确传达给屏幕阅读器和类似的辅助技术。”它不会控制浏览器状态，只会将其传达给辅助设备。