Editorial: Clarify aria-expanded guidance (#1980)

Co-authored-by: Scott O'Hara 

Author: adampage

index.html

@@ -13680,16 +13680,24 @@ Definitions of States and Properties (all aria-* attributes)
 
           aria-expanded
 
-            Indicates whether a grouping element that is the accessibility child of or is 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 the accessibility child of 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.
-            
+            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.
+            <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 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.
+</div>