From 531aa31a9fbd3da1ee49f8680dbc98adb35101ce Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Fri, 2 Sep 2022 03:24:51 +0000 Subject: [PATCH] Add Cross Root Aria status (#46) SHA: 690c40c76a856f305519363b6d5fc06e2ebd8eca Reason: push, by @Westbrook Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- 2022.html | 179 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 113 insertions(+), 66 deletions(-) diff --git a/2022.html b/2022.html index 4b2f9e1..c4e704b 100644 --- a/2022.html +++ b/2022.html @@ -150,8 +150,8 @@ "xref": "web-platform", "group": "webcomponents", "tocIntroductory": true, - "publishISODate": "2022-09-01T00:00:00.000Z", - "generatedSubtitle": "Draft Community Group Report 01 September 2022" + "publishISODate": "2022-09-02T00:00:00.000Z", + "generatedSubtitle": "Draft Community Group Report 02 September 2022" }
@@ -159,7 +159,7 @@

Web Components Community Group: 2022 Spec/API status

Draft Community Group Report - +

@@ -228,7 +228,7 @@

Web Components Community Group: 2022 Spec/API statu discussion of this specification. -

+

1. Introduction

This section is non-normative.

The initial slate of APIs that browsers shipped with web components "v1" left many important features and use-cases on a future to-do list, to be finalized out after the core custom element and shadow DOM features landed. While the web components GitHub issues and face-to-face meets have tracked and discussed many of these features individually, there hasn't been a comprehensive overview of what's left to "finish" web components.

@@ -544,51 +544,98 @@

Web Components Community Group: 2022 Spec/API statu
Previous WCCG Report(s)
2021
GitHub issues:
-
---
+
Cross-root ARIA Delegation
+
Cross-root ARIA Reflection
Browser positions:
---

3.2 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. +

3.3 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. +

3.4 Initial API Summary/Quick API Proposal

-

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

-
+

3.4.1 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);
+
+

3.4.2 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);
+
+

3.5 Key Scenarios

-

---

-
-

3.6 Concerns

- -
    -
  • ---
    • -
+

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.

-

3.7 Dissenting Opinion

+ - @@ -623,13 +670,13 @@

Web Components Community Group: 2022 Spec/API statu

---

-

4.6 Concerns

+

4.6 Concerns

  • ---
-

4.7 Dissenting Opinion

+

4.7 Dissenting Opinion

  • ---
    • @@ -685,13 +732,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

5.7 Concerns

+

5.7 Concerns

  • ---
-

5.8 Dissenting Opinion

+

5.8 Dissenting Opinion

  • ---
    • @@ -761,13 +808,13 @@

    Web Components Community Group: 2022 Spec/API statu
  • Plug in systems. Plug-ins might bring their own custom element definitions which should not collide with the application or other plugins.

-

6.6 Concerns

+

6.6 Concerns

  • Interaction with declarative shadow DOM (addressed)
-

6.7 Dissenting Opinion

+

6.7 Dissenting Opinion

  • None
    • @@ -835,14 +882,14 @@

    Web Components Community Group: 2022 Spec/API statu

    Server-Side Rendering: Without Declarative Shadow DOM, servers cannot deliver complete websites that include web component content. Markup cannot be efficiently delivered and then hydrated with JavaScript client-side.

    JavaScript-less environments: Many web components could be implemented without JavaScript, taking advantage of encapsulated DOM and styles. However, web components cannot currently be rendered by users who have JavaScript disabled. Developers who are more comfortable with markup than with scripting may avoid shadow DOM altogether due to its tight coupling with JavaScript..

-

7.7 Concerns

+

7.7 Concerns

  • Mozilla considers this to be non-harmful, though debates the merits on ROI to developers weighed against the added complexity to be added to the HTML parser from a performance perspective.
  • Safari would like to see compatibility with Scoped Element Registry addressed first.
-

7.8 Dissenting Opinion

+

7.8 Dissenting Opinion

  • N / A
    • @@ -893,13 +940,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

8.6 Concerns

+

8.6 Concerns

  • ---
-

8.7 Dissenting Opinion

+

8.7 Dissenting Opinion

  • ---
    • @@ -955,13 +1002,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

9.7 Concerns

+

9.7 Concerns

  • ---
-

9.8 Dissenting Opinion

+

9.8 Dissenting Opinion

  • ---
    • @@ -1027,14 +1074,14 @@

    Web Components Community Group: 2022 Spec/API statu
  • Children inserted/removed: This proposal would provide better ergonomics to react to insertion or removal of children nodes than using a MutationObserver.

-

10.6 Concerns

+

10.6 Concerns

  • Too expensive to implement: this is no longer the case, all engines have mechanisms for this already
  • The addition of the parsing behavior might encourage assuming a set of initial children exists and not reacting to changes in them.
-

10.7 Dissenting Opinion

+

10.7 Dissenting Opinion

  • Some people believe using a MutationObserver is enough to cover the insertion/removal cases and want to avoid creating a duplicate similar API for custom elements. But the async nature of MutationObserver seems to cause timing issues.
    • @@ -1087,13 +1134,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

11.6 Concerns

+

11.6 Concerns

  • ---
-

11.7 Dissenting Opinion

+

11.7 Dissenting Opinion

  • ---
    • @@ -1171,7 +1218,7 @@

    Web Components Community Group: 2022 Spec/API statu
  • Codify framework "single file component" patterns in the platform.

-

12.6 Concerns

+

12.6 Concerns

  • Binding syntax for attributes is extremely verbose. e.g. "{{root.attributes.percentage.value}}" is used instead of something terser like "{{percentage}}" .
    • @@ -1181,7 +1228,7 @@

    Web Components Community Group: 2022 Spec/API statu
  • The current proposal conflicts in syntax with Declarative Shadow DOM.

-

12.7 Dissenting Opinion

+

12.7 Dissenting Opinion

No dissenting opinions yet.

@@ -1264,13 +1311,13 @@

Web Components Community Group: 2022 Spec/API statu

---

-

13.6 Concerns

+

13.6 Concerns

  • ---
-

13.7 Dissenting Opinion

+

13.7 Dissenting Opinion

  • ---
    • @@ -1320,13 +1367,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

14.6 Concerns

+

14.6 Concerns

  • ---
-

14.7 Dissenting Opinion

+

14.7 Dissenting Opinion

  • ---
    • @@ -1376,13 +1423,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

15.6 Concerns

+

15.6 Concerns

  • ---
-

15.7 Dissenting Opinion

+

15.7 Dissenting Opinion

  • ---
    • @@ -1432,13 +1479,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

16.6 Concerns

+

16.6 Concerns

  • ---
-

16.7 Dissenting Opinion

+

16.7 Dissenting Opinion

  • ---
    • @@ -1488,13 +1535,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

17.6 Concerns

+

17.6 Concerns

  • ---
-

17.7 Dissenting Opinion

+

17.7 Dissenting Opinion

  • ---
    • @@ -1580,7 +1627,7 @@

    Web Components Community Group: 2022 Spec/API statu

-

18.6 Concerns

+

18.6 Concerns

  • @@ -1588,7 +1635,7 @@

    Web Components Community Group: 2022 Spec/API statu

-

18.7 Dissenting Opinion

+

18.7 Dissenting Opinion

  • @@ -1752,7 +1799,7 @@

    Web Components Community Group: 2022 Spec/API statu

-

19.6 Concerns

+

19.6 Concerns

  • @@ -1760,7 +1807,7 @@

    Web Components Community Group: 2022 Spec/API statu

-

19.7 Dissenting Opinion

+

19.7 Dissenting Opinion

  • @@ -1854,13 +1901,13 @@

    Web Components Community Group: 2022 Spec/API statu

    ---

-

20.6 Concerns

+

20.6 Concerns

  • ---
-

20.7 Dissenting Opinion

+

20.7 Dissenting Opinion

  • ---
    • @@ -1953,11 +2000,11 @@

    Web Components Community Group: 2022 Spec/API statu

-

21.6 Concerns

+

21.6 Concerns

No concerns yet.

-

21.7 Dissenting Opinion

+

21.7 Dissenting Opinion

No dissenting opinions yet.

@@ -2040,13 +2087,13 @@

Web Components Community Group: 2022 Spec/API statu

---

-

22.6 Concerns

+

22.6 Concerns

  • ---
-

22.7 Dissenting Opinion

+

22.7 Dissenting Opinion

  • ---