Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: Element Handles for Cross-root ARIA #200

Closed
wants to merge 7 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Minor edits for clarity and to fix typos
  • Loading branch information
behowell committed Jul 19, 2023
commit 23e0e05f6bc10a5d7b1b4a9b77af3b82e8d8c88d
10 changes: 5 additions & 5 deletions element-handles-explainer.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Author: [Ben Howell](https://github.com/behowell)

## Introduction

The Shadow DOM provides a powerful way to encapsulate web components and keep their implementation details separate from other code on the page. However, this presents a problem for accessibility, which needs to establish semantic relationships between elements on the page. There is currently no way to refer to an element inside another shadow tree from an attribute like `aria-labelledby`. Referring across shadow roots has been called "cross-root ARIA", although it affects non-ARIA properties like the label's `for` attribute as well.
The Shadow DOM provides a powerful way to encapsulate web components and keep their implementation details separate from other code on the page. However, this presents a problem for accessibility, which needs to establish semantic relationships between elements on the page. There is currently no way to refer to an element inside another shadow tree from an attribute like `aria-labelledby`. Referring to elements across shadow root boundaries is called "cross-root ARIA", although it affects non-ARIA properties like the label's `for` attribute as well.

For more detailed background on the problem and other proposals to solve it, see Alice Boxhall's article [How Shadow DOM and accessibility are in conflict](https://alice.pages.igalia.com/blog/how-shadow-dom-and-accessibility-are-in-conflict/).

Expand All @@ -15,11 +15,11 @@ As laid out in Alice's article, there are separate but related problems to solve
* There is also the combined case, where an element in one shadow tree needs to refer to an element in a sibling shadow tree (or any relationship that is not a direct ancestor/descendant relationship). A complete solution should work in this case as well.
* An example of when this is needed is described by Nolan Lawson: [ARIA element reflection across non-descendant/ancestor shadow roots](https://github.com/WICG/aom/issues/192).

This problem has been discussed for several years, and there have been many proposed solutions. Existing proposals are described below, in the **Alternative Solutions** sections. The proposal here draws on the ideas from many of the other proposals.
The cross-root ARIA problem has been discussed for several years, and there have been many proposed solutions. Existing proposals are described below, in the **Alternative Solutions** sections. This proposal draws on the ideas from many of the other proposals.

## Proposal: Element Handles

Element handles are a way to refer to an element inside a shadow tree from an ID reference attribute like `aria-labelledby` or `for`, while preserving shadow DOM encapsulation. Handles can be summed up as "like [shadow parts](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part), but for ID references." Much of the API is designed to be parallel to the shadow parts API, and follows similar syntax.
Element handles are a way to refer to an element inside a shadow tree from an ID reference attribute like `aria-labelledby` or `for`, while preserving shadow DOM encapsulation. Handles can be summed up as "like [shadow parts](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part), but for ID references." Much of the API is designed to be parallel to the shadow parts API and follows similar syntax.

**Goals**

Expand Down Expand Up @@ -162,7 +162,7 @@ Supporting handles in JavaScript requires several new APIs and updates to existi

Find an Element by its handle name in the given document fragment (aka shadow root). Similar to [`DocumentFragment.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/getElementById).

In the event that the referenced handle was an exported handle, this returns the element that has the `exporthandle` attribute, and does _not_ drill into the nested shadow tree. If needed, it is possible for the caller to call `getElementByHandle` again with the .
In the event that the referenced handle was an exported handle, this returns the element that has the `exporthandles` attribute, and does _not_ drill into the nested shadow tree. If needed, it is possible for the caller to call `getElementByHandle` again with the .
behowell marked this conversation as resolved.
Show resolved Hide resolved

#### `Element.handle` property

Expand Down Expand Up @@ -331,7 +331,7 @@ For example:
```html
<label for="x-input::the-input">Example</label>
<x-input id="x-input">
# shadowRoot
#shadowRoot
| <input id="the-input" exportid />
</template>
</x-input>
Expand Down