<html>
<body>
<!-- Show/Hide events only need to occur on the root of what's shown/hidden,
not for each descendant. -->
<div role="main" id="root">
<div role="group" id="child1" lang="fr"> <!-- becomes ignored+included -->
<div role="link" id="grandchild1" lang="ch">
1
</div>
</div>
<div role="group" id="child2" lang="es"> <!-- becomes ignored+included -->
<div role="link" id="grandchild2" lang="ukr"> <!-- becomes ignored+included -->
2
</div>
</div>
</div>
<script>
function go() {
// Setting the role to "none" makes the node ignored, while the lang
// attribute makes it "ignored but included in tree".
document.querySelector('#child1').role = 'none';
document.querySelector('#child2').role = 'none';
document.querySelector('#grandchild2').role = 'none';
}
</script>
</body>
</html>