警告：“在 Angular 模态中，由于其后代保留了焦点，因此阻止了咏叹调隐藏在元素上”

Question

我在 Angular 应用程序中遇到一条警告：

阻止了咏叹调隐藏在元素上，因为它的后代保留了焦点。不能向辅助技术用户隐藏焦点。避免在聚焦元素或其祖先上使用 aria-hidden。考虑使用 inert 属性来代替。

我正在使用使用 Angular Bootstrap (ng-bootstrap) 库创建的模式对话框。这是相关代码的简化版本：

<div class="modal-header">
  <h4 class="modal-title">Serial Number</h4>
  <button type="button" class="btn-close" aria-label="Close" aria-label="Close" (click)="popupClose(false)">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

问题： 该警告表明带有 aria-hidden 的元素阻碍了其后代元素的焦点。我想确保我的模式可以访问并且不会给辅助技术用户带来问题。

我考虑按照建议使用 inert 属性，但我不确定如何在这种情况下实现它。 我浏览了

ng-bootstrap

文档，没有发现有关此警告的具体指导。

Answer 1

当某个元素或其祖先之一具有 aria-hidden="true" 属性时，会出现此警告，该属性会向屏幕阅读器等辅助技术隐藏该元素。但是，如果此元素（或其任何子元素）是可聚焦的，辅助技术用户仍可能“看到”它，这可能会造成令人困惑的用户体验。

解决方法如下：

Remove aria-hidden="true" from any element that has focusable children (like buttons). Focusable elements should not be hidden from assistive technology users, so it’s best to avoid using aria-hidden="true" on these elements or their ancestors.

Use the inert attribute if you need to make the element temporarily inactive or "invisible" for both interaction and focus purposes. The inert attribute prevents both keyboard focus and interaction, which can be useful if you’re working with modals or dynamically displayed content. However, note that inert is not supported in all browsers, so you may need a polyfill.

Check the modal logic: If you are using Bootstrap modals, ensure that the aria-hidden="true" attribute is not added to elements that will have focus. Sometimes, these attributes can be added by JavaScript frameworks or libraries, so check your modal configuration.

以下是如何调整按钮的示例：

通过删除 aria-hidden="true" 并使用 aria-label 来提高可访问性，您可以避免与可聚焦元素的冲突。如果您需要暂时隐藏该按钮，请考虑将其设置为 display: none，因为这会将其从辅助功能树中完全删除。