Merge branch 'main' into account-for-aria-placeholder-in-accname

Author: scottaohara

index.html

@@ -13082,13 +13082,34 @@ <h2>Definitions of States and Properties (all aria-* attributes)</h2>
         <div class="property" id="aria-controls">
           <pdef>aria-controls</pdef>
           <div class="property-description">
-            <p><a>Identifies</a> the <a>element</a> (or elements) whose contents or presence are controlled by the current element. See related <pref>aria-owns</pref>.</p>
-            <p>For example:</p>
+            <p>
+              <a>Identifies</a> the <a>element</a> (or elements) whose contents or presence are controlled by the focused element or composite widget. See related <pref>aria-details</pref> and
+              <pref>aria-owns</pref>.
+            </p>
+            <p>
+              The <code>aria-controls</code> property is for referencing elements that are modified by the user interacting with the currently focused element or composite widget. The presence of
+              <code>aria-controls</code> enables <a>assistive technologies</a> to programmatically associate the currently focused element with the element or elements it controls. For instance, it
+              can be used to inform users that by interacting with the controlling element they have revealed an element or elements that were previously in the hidden state. Or, by interacting with
+              an element, they caused the selection or value of a controlled element to change.
+            </p>
+            <p>Instance where an <code>aria-controls</code> association could be made:</p>
             <ul>
-              <li>A table of contents tree view can control the content of a neighboring document pane.</li>
-              <li>A group of checkboxes can control what commodity prices are tracked live in a table or graph.</li>
-              <li>A tab controls the display of its associated tab panel.</li>
+              <li>
+                Interacting with a text field or editable combobox results in the display of a listbox popup. Upon entering text, the associated listbox is filtered, or the selected option changes to
+                match the text value entered by the user.
+              </li>
+              <li>A tree view representing a table of contents where choosing a treeitem updates content of a neighboring document pane.</li>
+              <li>A series of checkboxes can each control what commodity prices are tracked live in a table or graph.</li>
+              <li>
+                An interactive element reveals associated content when selected. For instance, selecting a tab control reveals its associated tab panel. Or checking a radio button reveals additional
+                information or form controls related to the chosen radio button.
+              </li>
+              <li>Radio buttons allow for filtering to a listing of search results.</li>
             </ul>
+            <p>
+              Additionally, the <code>aria-controls</code> property supports multiple ID references. For example, a control can be used to highlight different instances of spelling errors. A user
+              agent MAY convey to a user that there are a number of related controlled elements (the misspellings), allow the user to navigate to the controlled elements in sequence, or both.
+            </p>
           </div>
           <table class="def">
             <caption>