Synopsis

The AOM group has been discussing a "delegation" API to allow for ARIA attributes and properties set on a webcomponent to be forwarded to elements inside of its shadowroot as a simpler solution to the issues raised in WICG/aom#169.
This mechanism will allow users to apply standard best practices for ARIA, and should solve a large margin of accessibility use cases. This API is most suited for one-to-one delegation, but should also work for one-to-many setups. There is no mechanism for directly relating two elements in different shadowroots together, but this will still be possible manually with the element reflection API.

The AOM group considered two very similar API proposals, ElementInternals::delegate and ShadowRoot::delegate. Both have the same syntax, but the group did not agree strongly on whether ElementInternals or ShadowRoot was the "better" fit.

Example

The my-input element delegates the aria-label and aria-describedby attributes, and ariaLabel and ariaDescribedByElements properties to an internal input element.

Users of my-input can use either the attributes or properties as expected, and the internal input element will announce instead of my-input.

<span id="description">Description</span>
<!-- announces nothing for the screen reader -->
<my-input aria-label="Label" aria-describedby="description">
  <!-- shadow root -->
  <!-- announces with label "Label" and description "Description" -->
  <input>
  <!-- /shadow root -->
</my-input>

class MyInput extends HTMLElement {
  constructor() {
    super();
    const input = document.createElement('input');
    this.shadowRoot.appendChild(input);
    // Option 1
    this.shadowRoot.delegate({ariaLabel: input, ariaDescribedByElements: input});
    // Option 2
   const internals = this.attachInternals();
   internals.delegate({ariaLabel: input, ariaDescribedByElements: input});
  }
}