Select-only Combobox Example: Add Accessibility Features section (pull #1432)

Co-authored-by: Matt King <[email protected]>

Author: carmacleod

examples/combobox/combobox-select-only.html

@@ -67,6 +67,23 @@ <h2 id="ex_label">Example</h2>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
     </section>
 
+    <section>
+      <h2>Accessibility Features</h2>
+      <p>While the functionality and user experience of this example are nearly equivalent to  an HTML <code>select</code> element with the attribute <code>size="1"</code>, the following differences in behavior are implemented to improve both accessibility and general usability.</p>
+      <ol>
+        <li>
+          If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via <code>aria-activedescendant</code>.
+          This enables users to perceive the presence of the options, and enables assistive technology users to comprehend the size of the list of options.
+        </li>
+        <li>
+          Navigating the list of options does not set the value of the input.
+          This gives  screen reader users, who need to navigate among the options to perceive them, the ability to explore options without losing the current value of the input.
+          The value is set when users press <kbd>Space</kbd>, <kbd>Enter</kbd>, or <kbd>Tab</kbd>, or when focus moves out of the combobox.
+          The current value is retained if the listbox is closed with <kbd>Escape</kbd> or if the user collapses the list by clicking the input.
+        </li>
+      </ol>
+    </section>
+
     <section>
       <h2 id="kbd_label">Keyboard Support</h2>
       <p>