"aria-required-parent" check to use the composed tree in getAriaOwners

[WilcoFiers]

"aria-required-parent" check to use the composed tree in getAriaOwners

[marcysutton]

This check has functionality for detecting missing roles with ariaOwns. My question is: what use-cases should we add for Shadow DOM and the aria-owns context, if any? IDrefs won't work across the boundary. So most of these tests don't seem worth pursuing from a Shadow DOM perspective.

For example:

it('should pass when required parent is present in an aria-owns context', function () {
    fixture.innerHTML = '<div role="list" aria-owns="target"></div><div><p role="listitem" id="target">Nothing here.</p></div>';
    var node = fixture.querySelector('#target');
    assert.isTrue(checks['aria-required-parent'].evaluate.call(checkContext, node));
});

Any thoughts on this? Otherwise, I'm focusing on the hierarchal DOM tests.

[WilcoFiers]

@marcysutton Just add a test to verity that aria-owns doesn't reach outside it's context. The rest of the shadow DOM stuff for this one is about getting parents from the composed tree rather than from the .parentNode property.

[dylanb]

@marcysutton as @WilcoFiers said - and ID references stay within the same document context i.e. if it is the light DOM of the document, the ID refs only dereference within that light DOM. If it is the shadow DOM, the ID refs only dereference within that shadow DOM. I have an example here http://dylanb.github.io/shadowDOM/aria_shadow.html (not aria-owns but it gets the point across)

[marcysutton]

The hierarchal code in this check uses findUp to look for candidate matches, not .parentNode, but it's only looking at the shadow subtree fetched with getRootNode. dom.getComposedParent doesn't recursively go up the tree, so wouldn't it miss code like this?

<div role="list">
    <div class="someStyleContainer">
        ▼ shadow root (open)
                <div role="listitem"></div>
    </div>
</div>

I'm trying to wrap my mind around how you'd look up the flattened tree for a match (i.e. ol,ul,dl,[role="list"]) when that parent is in the light DOM.

[WilcoFiers]

I think there's a bug in find up. I build your example, and with findUp I'm unable to get the list element.

<div role="list">
    <div class="someStyleContainer"></div>
</div>
<script src="/axe.js"></script>
<script>
  var shadow = document.querySelector('.someStyleContainer').attachShadow({ mode: 'open' })
  shadow.innerHTML = '<div role="listitem">item 1</div>';
  var listItem = shadow.querySelector('[role=listitem]')
  var list = axe.commons.dom.findUp(listItem, '[role=list]');
  console.log(list, listItem); // null, <div role="listitem">
</script>

I'll work on a patch for this.

[marcysutton]

Closed with #451.