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

阻止在元素上使用 aria-hidden，因为其后代元素保留了焦点。焦点不能对辅助技术用户隐藏。避免在获得焦点的元素或其祖先元素上使用 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，没有找到有关此警告的具体指导。

$(function() {
$(“.js-gps-inline-related-questions .spacer”).on(“click”, function () {
fireRelatedEvent($(this).index() + 1, $(this).data(‘question-id’));
});

function fireRelatedEvent(position, questionId) {
StackExchange.using(“gps”, function() {
StackExchange.gps.track(‘related_questions.click’,
{
position: position,
originQuestionId: 79159883,
relatedQuestionId: +questionId,
location: ‘inline’,
source: ‘Baseline_Fallback’
});
});
}
});

function toggleInlineRelated(showMore) {
var inlineRelatedLess = document.getElementById(“inline_related_var_a_less”);
var inlineRelatedMore = document.getElementById(“inline_related_var_a_more”);

var inlineRelatedSeeMore = document.getElementById(“inline_related_see_more”);
var inlineRelatedSeeLess = document.getElementById(“inline_related_see_less”);

if (showMore) {
inlineRelatedLess.classList.add(“d-none”);
inlineRelatedSeeMore.classList.add(“d-none”);

inlineRelatedMore.classList.remove(“d-none”);
inlineRelatedSeeLess.classList.remove(“d-none”);
}
else {
inlineRelatedMore.classList.add(“d-none”);
inlineRelatedSeeLess.classList.add(“d-none”);

inlineRelatedLess.classList.remove(“d-none”);
inlineRelatedSeeMore.classList.remove(“d-none”);
}
}

0