htmlForElements on <label>

[dandclark]

Description of bug or feature request

Should there be support for having a <label> inside a shadow DOM apply to an element outside that shadow?

Generally speaking, when an author needs to set up an ARIA relationship from inside a shadow DOM to the light DOM, the current (though not yet universally supported) answer is to use one of the ARIA reflection properties, e.g. in the example given by @alice here: https://alice.pages.igalia.com/blog/how-shadow-dom-and-accessibility-are-in-conflict/#referring-from-shadow-dom-outwards.

However there doesn't seem to be a way to have a <label> element inside a shadow apply to something outside of a shadow.

<input id="labeled-input">
<custom-label>
  <template shadowrootmode="open">
    <label>Special label for my input field</label>
  </template>
</custom-label>
<script>
  class CustomLabel extends HTMLElement {
    constructor() {
      super();

      const shadow = this.attachInternals().shadowRoot;
      // Doesn't work since htmlFor only takes an IDRef, not an element.
      shadow.querySelector("label").htmlFor = document.querySelector("#labeled-input");
    }
  }

  customElements.define("custom-label", CustomLabel);
</script>

ReferenceTarget only works in the other direction, for a <label> outside a shadow to apply to content inside a shadow.

Adding a htmlForElements property to <label> could be a way to support the scenario of a <label> in a shadow referring to outer content. It would work similarly to other ARIA reflected properties like ariaActiveDescendantElement.

The only discussion I can find on this is a couple of comments starting here. But it doesn't look like that went anywhere, even though the other ARIA reflection properties are now part of the standard. Maybe this should be revisited?

Will this require a change to CORE-AAM?

No

Will this require a change to the ARIA authoring guide?

No

[dandclark]

I'm not sure if https://github.com/whatwg/html/issues is a better home for this. Happy to move it if so.

[spectranaut]

Hi @dandclark, thanks for your interest! This issue is known about and being worked on in the Web Component community group: https://w3c.github.io/webcomponents-cg/2022.html#cross-root-aria and in the AOM group: https://github.com/WICG/aom

So the issue doesn't really belong here. If you are interested in helping that work along, I suggest getting involved in the web component community group.