From 63fe92219f7d4e94d8092fb943f414ec563caf66 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Tue, 11 Jul 2023 16:47:47 -0700 Subject: [PATCH 1/7] Clarify aria-expanded guidance --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 11a03ea1c..2e1693e5d 100644 --- a/index.html +++ b/index.html @@ -11612,7 +11612,7 @@

Definitions of States and Properties (all aria-* attributes)

Indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content in another element. For example, it is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.

-

If a grouping container that can be expanded or collapsed is not [=ARIA/owned=] by the element that has the aria-expanded attribute, the author SHOULD identify the controlling relationship by referencing the container from the element that has aria-expanded with the aria-controls property.

+

Authors SHOULD set aria-controls on the same interactive element as aria-expanded, thereby identifying which content container it will expand and collapse. Authors MAY omit aria-controls for specific roles where the controlling relationship is implicit, such as row and treeitem.

From 932fdd140404b5f116f059d64345a0476aabf672 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Mon, 17 Jul 2023 21:43:38 -0700 Subject: [PATCH 2/7] Revise clarification --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 2e1693e5d..c645944a9 100644 --- a/index.html +++ b/index.html @@ -11610,9 +11610,9 @@

Definitions of States and Properties (all aria-* attributes)

aria-expanded
-

Indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

-

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content in another element. For example, it is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.

-

Authors SHOULD set aria-controls on the same interactive element as aria-expanded, thereby identifying which content container it will expand and collapse. Authors MAY omit aria-controls for specific roles where the controlling relationship is implicit, such as row and treeitem.

+

Indicates whether a related grouping element is expanded or collapsed.

+

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content in a different grouping element. If the element with aria-expanded is also a treeitem in a tree or a row in a treegrid, then it SHOULD also be the accessibility parent of the grouping element it expands and collapses. Otherwise, the element with aria-expanded SHOULD NOT also be the accessibility parent of its grouping element and instead identify that relationship using aria-controls.

+

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.

Characteristics:
From c8b956f4a4c7a7358f6a5836a24742e293c6664e Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 23 Aug 2023 11:46:51 -0700 Subject: [PATCH 3/7] Update index.html Co-authored-by: Scott O'Hara --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c645944a9..31a2f03e8 100644 --- a/index.html +++ b/index.html @@ -11610,7 +11610,7 @@

Definitions of States and Properties (all aria-* attributes)

aria-expanded
-

Indicates whether a related grouping element is expanded or collapsed.

+

Indicates whether a related element is expanded (shown) or collapsed (hidden).

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content in a different grouping element. If the element with aria-expanded is also a treeitem in a tree or a row in a treegrid, then it SHOULD also be the accessibility parent of the grouping element it expands and collapses. Otherwise, the element with aria-expanded SHOULD NOT also be the accessibility parent of its grouping element and instead identify that relationship using aria-controls.

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.

From 7cdaefc68508e5fcc2038f24f0d472f27e62cc69 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 23 Aug 2023 11:47:01 -0700 Subject: [PATCH 4/7] Update index.html Co-authored-by: Scott O'Hara --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 31a2f03e8..b3c8ce259 100644 --- a/index.html +++ b/index.html @@ -11611,7 +11611,7 @@

Definitions of States and Properties (all aria-* attributes)

aria-expanded

Indicates whether a related element is expanded (shown) or collapsed (hidden).

-

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content in a different grouping element. If the element with aria-expanded is also a treeitem in a tree or a row in a treegrid, then it SHOULD also be the accessibility parent of the grouping element it expands and collapses. Otherwise, the element with aria-expanded SHOULD NOT also be the accessibility parent of its grouping element and instead identify that relationship using aria-controls.

+

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content of a different element. If the element with aria-expanded is also a treeitem in a tree or a row in a treegrid, then it SHOULD also be the accessibility parent of the content it expands and collapses. Otherwise, the element with aria-expanded SHOULD NOT be the accessibility parent of the content that is expanding or collapsing. Rather, identify that relationship between the interactive element and the element being controlled using aria-controls.

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.

Characteristics:
From aa593ed3d28d7347261ec1212d8d8d72c48a1cd5 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 23 Aug 2023 11:47:29 -0700 Subject: [PATCH 5/7] Update index.html Co-authored-by: Scott O'Hara --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b3c8ce259..7aee7b357 100644 --- a/index.html +++ b/index.html @@ -11612,7 +11612,7 @@

Definitions of States and Properties (all aria-* attributes)

Indicates whether a related element is expanded (shown) or collapsed (hidden).

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content of a different element. If the element with aria-expanded is also a treeitem in a tree or a row in a treegrid, then it SHOULD also be the accessibility parent of the content it expands and collapses. Otherwise, the element with aria-expanded SHOULD NOT be the accessibility parent of the content that is expanding or collapsing. Rather, identify that relationship between the interactive element and the element being controlled using aria-controls.

-

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button that controls visibility of a section of page content.

+

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button to control the visibility of an element and its content, on the current page.

From 220d8b6ab7f9c3bbfe49911a9253d5051eb36eec Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 23 Aug 2023 12:16:06 -0700 Subject: [PATCH 6/7] add example markup --- index.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 7aee7b357..baf215c80 100644 --- a/index.html +++ b/index.html @@ -11612,7 +11612,22 @@

Definitions of States and Properties (all aria-* attributes)

Indicates whether a related element is expanded (shown) or collapsed (hidden).

The aria-expanded attribute is applied to a focusable, interactive element that toggles visibility of content of a different element. If the element with aria-expanded is also a treeitem in a tree or a row in a treegrid, then it SHOULD also be the accessibility parent of the content it expands and collapses. Otherwise, the element with aria-expanded SHOULD NOT be the accessibility parent of the content that is expanding or collapsing. Rather, identify that relationship between the interactive element and the element being controlled using aria-controls.

-

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown. Similarly, it can be applied to a button to control the visibility of an element and its content, on the current page.

+

For example, aria-expanded is applied to a parent treeitem to indicate whether its child branch of the tree is shown.

+ 
<ul role="tree">
+  <li role="treeitem" aria-expanded="false" aria-selected="false">
+    <span>Fruits</span>
+    <ul role="group" hidden>
+      <li role="treeitem" aria-selected="false">Apricot</li>
+      <li role="treeitem" aria-selected="false">Mangosteen</li>
+      <li role="treeitem" aria-selected="false">Yuzu</li>
+    </ul>
+  </li>
+</ul>
+

Similarly, it can be applied to a button to control the visibility of an element and its content, on the current page.

+ 
<button type="button" aria-controls="mangosteen" aria-expanded="false">Mangosteen</button>
+<div id="mangosteen" hidden>
+  An edible fruit native to tropical lands surrounding the Indian Ocean.
+</div>
Characteristics:
From 31f69cd0fbf59890c6e663c7ca1fd3ae3001be38 Mon Sep 17 00:00:00 2001 From: Adam Page Date: Wed, 6 Sep 2023 19:17:40 -0700 Subject: [PATCH 7/7] Update index.html Co-authored-by: Scott O'Hara --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index baf215c80..2983fad2c 100644 --- a/index.html +++ b/index.html @@ -11623,7 +11623,7 @@

Definitions of States and Properties (all aria-* attributes)

</ul> </li> </ul> -

Similarly, it can be applied to a button to control the visibility of an element and its content, on the current page.

+

Similarly, it can be applied to a button to control the visibility of another element and its content, on the current page.

<button type="button" aria-controls="mangosteen" aria-expanded="false">Mangosteen</button>
 <div id="mangosteen" hidden>
   An edible fruit native to tropical lands surrounding the Indian Ocean.
Characteristics: