- From: Daniel Freedman <notifications@github.com>
- Date: Tue, 30 Mar 2021 21:24:12 -0700
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/917@github.com>
# 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`. ```html <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> ``` ```js 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}); } } ``` -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/WICG/webcomponents/issues/917
Received on Wednesday, 31 March 2021 04:24:25 UTC