Can ElementInternals have ARIA properties pointing inside the shadow root?

[nolanlawson]

ElementInternals is defined as having an ARIAMixin. This means it would get all the Element- and FrozenElement-reflecting properties like ariaLabelledByElements and ariaActiveDescendantElement.

For the purposes of determining the valid attr-associated elements, should the "location" of the ElementInternals be considered as 1) the shadow root attached to the custom element, or 2) the containing document or shadow root of the custom element?

In other words, can you do this?

class CustomElement extends HTMLElement {
  constructor() {
    super()
    const element = document.createElement('div')
    element.textContent = 'My description'
    this.attachShadow({ mode: 'closed' }).appendChild(element)
    this.attachInternals().ariaDescribedByElements = [element]
  }
}

Arguments in favor of (1):

• There aren't many use cases (?) for using ElementInternals in a shadowless component.
• ElementInternals exposes the element's shadowRoot (if one is attached).
• This gives developers more flexibility in setting default aria* attr-associated elements to point to elements inside of the shadow root.

Arguments in favor of (2):

• ElementInternals is, in fact, usable today with shadowless components. So it may be a bit strange for IDREFs to be able to peek into the shadow root (but only if it exists).
• There aren't many valid use cases (?) for pointing aria* properties to a component's own shadow root. (Typically, it would probably point to something outside.)

Another question is how this would interact with cross-root ARIA delegation, since there is a lot of overlap.

Current browser implementations

Codepen

• Chrome Canary 110 with "experimental web platform features" enabled: tab crashes. 😕
• Safari Technology Preview 146: does not support attachInternals

Edit: updated the description to provide better examples and avoid mentioning IDREFs, since this isn't really about IDREFs.

[nolanlawson]

Related: there is a PR on HTML to add ARIA prop/attr reflection to ElementInternals: whatwg/html#8496

Based on my reading, this would implement (2) as there is no reference to shadow roots and instead only references to the element (host) of the ElementInternals.

[caridy]

@nolanlawson I don't fully understand this issue. One thing though, in some scenarios, the only way to grab the shadowRoot instance is by using attachInternals().

[nolanlawson]

@caridy I added an example to clarify. Keep in mind that ariaDescribedBy (and similar properties) are restricted in which elements they can reference: WICG/aom#192

So it's important to know whether the owning DocumentOrShadowRoot of the ElementInternals is considered to be the host or the attached shadow root.

[nolanlawson]

Related discussion: whatwg/html#8544

[annevk]

this.attachInternals().ariaDescribedBy = 'foo'

I don't see how this could work as the ID search would happen within the node tree. But if you point directly to an element I think it can work and we should make it work. In fact, any element that shares the same shadow-including root ought to be fine as ElementInternals is supposed to be encapsulated itself.

[nolanlawson]

@annevk Thanks, you're right, I was not thinking this through clearly. A better example would be using ariaDescribedByElements instead. I've updated the original comment above.

(I also realized IDREFs for ElementInternals do not make much sense, since they accept ARIA properties and not ARIA attributes. And ariaDescribedBy is not even a reflected property; my bad.)

[nolanlawson]

Closing as I think this is answered pretty clearly in whatwg/html#8544 (comment).