From 690c40c76a856f305519363b6d5fc06e2ebd8eca Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Thu, 1 Sep 2022 23:22:55 -0400 Subject: [PATCH] Add Cross Root Aria status (#46) * Add Cross Root Aria status * Add code sample * Remove unused sections. --- reports/2022.html | 97 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 76 insertions(+), 21 deletions(-) diff --git a/reports/2022.html b/reports/2022.html index 27ad6a5..74d0a84 100644 --- a/reports/2022.html +++ b/reports/2022.html @@ -370,51 +370,106 @@

Links

Previous WCCG Report(s)
2021
GitHub issues:
-
---
+
Cross-root ARIA Delegation
+
Cross-root ARIA Reflection
Browser positions:
---

Description

-

---

+

+ Shadow boundaries prevent content on either side of the boundary from referencing each other via ID references. ID references being the basis of the majority of the accessibility patters outlines by aria attributes, this causes a major issue in developing accessible content with shadow DOM. While there are ways to develop these UIs by orchestrating the relationships between elements of synthesizing the passing of content across a shadow boundary, these practices generally position accessible development out of reach for most developers, both at component creation and component consumption time. +

+

+ Developers of a custom element should be able to outline to browsers how content from outside of their shadow root realtes to the content within it and visa versa. Cross-root ARIA Delegation would allow developers to define how content on the outside is mapped to the content within a shadow root, while Cross-root ARIA Reflection would define how content within a shadow root was made available to content outside of it. +

Status

- +

+ Implementors participating in bi-weekly Accessibility Object Model syncs with WICG have all been favorable to the delegation work and are interested in the reflection work as a tighly related API that maybe is a fast follower. Leo Balter is working on finalizing proposal text for the delegation API at which time Westbrook Johnson will apply similar teminology to the reflection API proposal. +

Initial API Summary/Quick API Proposal

-

Summary or proposal based on current status; paragraph(s) and code.

+

Delegation API

+

HTML

+ 
+          
+            <span id="foo">Description!</span>
+            <template id="template1">
+              <input id="input" autoarialabel autoariadescribedby />
+              <span autoarialabel>Another target</span>
+            </template>
+            <x-foo aria-label="Hello!" aria-describedby="foo"></x-foo>
+          
+
+

JS

+ 
+          
+            const template = document.getElementById('template1');
+
+            class XFoo extends HTMLElement {
+              constructor() {
+                super();
+                this.attachShadow({ mode: "open", delegatesAriaLabel: true, delegatesAriaDescribedBy: true });
+                this.shadowRoot.appendChild(template.content.cloneNode(true));
+              }
+            }
+
+            customElements.define("x-foo", XFoo);
+          
+
+

Reflection API

+

HTML

+ 
+          
+            <input aria-controlls="foo" aria-activedescendent="foo">Description!</span>
+            <template id="template1">
+              <ul reflectariacontrols>
+                <li>Item 1</li>
+                <li reflectariaactivedescendent>Item 2</li>
+                <li>Item 3</li>
+              
+            </template>
+            <x-foo id="foo"></x-foo>
+          
+
+

JS

+ 
+          
+            const template = document.getElementById('template1');
+
+            class XFoo extends HTMLElement {
+              constructor() {
+                super();
+                this.attachShadow({ mode: "open", reflectsAriaControls: true, reflectsAriaActivedescendent: true });
+                this.shadowRoot.appendChild(template.content.cloneNode(true));
+              }
+            }
+            customElements.define("x-foo", XFoo);
+          
+

Key Scenarios

-

---

-
-
-

Concerns

- -
-
-

Dissenting Opinion

- +

When developing many of the patterns outlines in the ARIA Authoring Practices Guide having this capability would allow for encapsulating responsibilities outlined by the `role` attribute in a shadow root.

Related Specs

Open Questions