1566324 - aria-activedescendant broken inside shadow DOM

Status: RESOLVED FIXED

(Core :: Disability Access APIs, defect, P2)

Description

[James Teh [:Jamie]]

STR (with the NVDA screen reader):

1. Open this test case:
   data:text/html,<button>outside</button><div id="host"></div><script>shadow = host.attachShadow({mode: "open"}); shadow.innerHTML = '<div role="listbox" id="list" tabindex="0" aria-activedescendant="item"><div role="option" id="item">item</div>></div>';</script>
2. Tab to the button.
3. Press tab again.
   • Expected: NVDA should say "list, item..."
   • Actual: NVDA says just "list"

This bug means that the accessibility implemented for the password list in about:logins in bug 1560359 doesn't work.

Works in Chrome.

Unfortunately, fixing this properly will probably break the address bar, since I believe it uses aria-activedescendant to refer to an autocomplete result which is outside the address bar's binding. That might be fixed by bug 1513337. In the interim, I'm not quite sure how to proceed here.

Comment 1

[James Teh [:Jamie]]

(In reply to James Teh [:Jamie] from comment #0)

Unfortunately, fixing this properly will probably break the address bar, since I believe it uses aria-activedescendant to refer to an autocomplete result which is outside the address bar's binding. That might be fixed by bug 1513337.

Bug 1513337 is now fixed, so now, the active descendants are in the same scope. Thus, a proper implementation is now possible here.

Comment 2

[James Teh [:Jamie]]

Expanded STR that tests changing the active descendant as well:

STR (with the NVDA screen reader):

1. Open this test case:
   data:text/html,<button>outside</button><div id="host"></div><script>shadow = host.attachShadow({mode: "open"}); shadow.innerHTML = '<div role="listbox" id="list" tabindex="0" aria-activedescendant="item1"><div role="option" id="item1">item1</div><div role="option" id="item2">item2</div></div>'; shadow.getElementById("list").addEventListener("keydown", function(event) { if (event.key == "ArrowDown") event.target.setAttribute("aria-activedescendant", "item2"); });</script>
2. Tab to the button.
3. Press tab again.
   • Expected: NVDA should say "list, item1..."
   • Actual: NVDA says just "list"
4. Press down arrow.
   • Expected: NVDA should say "item2..."
   • Actual: NVDA says nothing.

Comment 3

[James Teh [:Jamie]]

Attachment: Bug 1566324 part 1: Make a static version of IDRefsIterator::GetElem which can be called to get an id reference for any element.

IDRefsIterator::GetElem was previously an instance method which could only be used if you instantiated IDRefsIterator.
This is overkill for attributes which can only take a single id reference (rather than an id reference list).
Now, there is a static version of IDRefsIterator::GetElem which can be called with an arbitrary source element.
Any accessibility code should henceforth be using this instead of calling GetElementById directly, as this deals with shadow DOM, etc.

Comment 4

[James Teh [:Jamie]]

Attachment: Bug 1566324 part 2: Respect shadow DOM for aria-activedescendant.

Previously, the target element for aria-activedescendant was retrieved by calling GetElementById on the owner document.
This meant that aria-activedescendant inside shadow DOM looked for ids in the owner document instead of the shadow DOM.
To fix this, use IDRefsIterator::GetElem instead.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/381183f36e38
part 1: Make a static version of IDRefsIterator::GetElem which can be called to get an id reference for any element. r=eeejay
https://hg.mozilla.org/integration/autoland/rev/9c49cf0958b9
part 2: Respect shadow DOM for aria-activedescendant. r=eeejay

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/381183f36e38
https://hg.mozilla.org/mozilla-central/rev/9c49cf0958b9