feat(get-role): add presentation role resolution and inheritance

[straker]

With proper conflict resolution, we can now set up rule selector to be a matcher which would allow us to only find elements that match their role. This would allow simpler resolutions, such as the bug #2217 could be fixed by having the selector be:

{
  "selector": {
    "nodeName": "li",
    "role": "listitem"
  }
}

and since the presentation role on the ul or ol parent would change the role to presentation for the child, we would not have to look at the parent role in the check (the same for similar bug for dl elements).

Closes issue: #2212

Reviewer checks

Required fields, to be filled out by PR reviewer(s)

• Follows the commit message policy, appropriate for next version
• Code is reviewed for security

[WilcoFiers]

This shouldn't be necessary. IsFocusable is getting this wrong. For the purpose of what we're doing here, iframes are focusable areas. Unlike other areas they route focus to the first focusable area inside of it, unless there is none in which case you can clearly see iframes are focusable. Take this example:

<button>hello</button>
<iframe width="100" height="100"></iframe>
<button>world</button>

There is a tab stop between "hello" and "world". It isn't visible, the :focus style doesn't apply, but activeElement is set. Here's where to find it in the HTML spec: https://html.spec.whatwg.org/#bc-focus-ergo-bcc-focus

I think what we need to do is update isFocusable, give it a flag to return true for iframes. Something like this:

const myFrame = document.querySelector('iframe')
isFocusable(myFrame) // false
isFocusable(myFrame, { focusRouters: true }) // true

[straker]

That's fine, but I think that's outside the scope of this pr. We should create another pr that fixes the iframe issue of isFocusable.

Resolved

Resolved

[WilcoFiers]

I get it throws without the ul, why does it throw when the ul is there?

[straker]

Because I specifically made the virtual tree have just the <li> to show that it will fail even if the parent exists in the DOM.

var node = fixture.querySelector('#target');
flatTreeSetup(node);

[WilcoFiers]

I just looked these up, as far as I can tell this stuff doesn't work with dl, which is good because otherwise we'd have to deal with div being allowed to group dd / dt elements.

Suggested change

	dt: ['dl'],
	dd: ['dl'],
	dl: []

[straker]

It doesn't work in Chrome but does in Firefox, Safari/VO, and IE11/JAWS:

[straker]

I had assumed <div> would stop the chain as we've seen in other things, but after testing it does in fact carry through the role inheritance so we'll need to add that.

Resolved