Angular 2：如何将动态 html 属性(aria-hidden = "true")添加到正文正下方的所有元素？

Question

我制作了一个自定义的Modal实现，并希望确保可访问性。因此，当模式窗口弹出时(模式元素直接添加到文档主体(，主体中的所有其他元素(主体的直接子元素(都应该具有aria hidden="true"。如何将此动态添加到所有身体子项？

Answer 1

最简单的方法可能是标记父元素，然后将所有子元素标记为隐藏的aria。类似这样的东西：

<my-modal></my-modal>
<div class="rest-of-content" aria-hidden="true">
// All of these will be affected by the aria-hidden of the parent element
<div>
.....
</div>
<div>
....
</div>
</div>

除此之外，没有什么神奇的方法可以将所有其他元素标记为隐藏的咏叹调(据我所知(。你必须自己实现这个逻辑。

Answer 2

我写了这个。我不知道直接在Angular应用程序中使用文档有多糟糕/有多好，但它是有效的。

我还将这些修改后的元素保存在数组中，以便在关闭modal后反转更改。

// Add aria-hidden="true" to all direct children of the body element (unless the element does not have already)
Array.from(document.body.children).forEach(function(item) {
if(!item.hasAttribute('aria-hidden')) {
this.elementsWithoutAriaHidden.push(item);
this.renderer.setAttribute(item, 'aria-hidden', true);
} else if(item.getAttribute('aria-hidden') === 'false') {
this.elementsWithAriaHiddenFalse.push(item);
this.renderer.setAttribute(item, 'aria-hidden', true);
}
}, this);

*渲染器是这样初始化的(我有Angular 5(：

constructor(private rendererFactory: RendererFactory2) {
this.renderer = rendererFactory.createRenderer(null, null);
}