Collapsible Listbox example: Add deprecation warning and remove inbound links to it (pull #1852)

smhigley · carmacleod · mcking65 · web-flow · commit f4ddc33b29e4 · 2021-08-30T00:18:03.000-07:00
The select-only combobox pattern replaces the collapsable listbox pattern.
This commit:
* Removes links to collapsable listbox example page from main doc and other listbox examples.
* Adds a warning to the collapsable listbox that points to select-only combobox.
* Adds (Deprecated) to the title of the collapsable listbox example page.

Co-authored-by: Carolyn MacLeod &lt;Carolyn_MacLeod@ca.ibm.com&gt;
Co-authored-by: Matt King &lt;a11yThinker@gmail.com&gt;
diff --git a/aria-practices.html b/aria-practices.html
@@ -1811,7 +1811,6 @@ <h3>Listbox</h3>
         <h4>Examples</h4>
         <ul>
           <li><a href="examples/listbox/listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
-          <li><a href="examples/listbox/listbox-collapsible.html">Collapsible Dropdown Listbox Example</a>: Single-select collapsible listbox that expands when activated, similar to HTML <code>select</code> with the attribute <code>size=&quot;1&quot;</code>.</li>
           <li><a href="examples/listbox/listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
           <li><a href="examples/listbox/listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
         </ul>
diff --git a/examples/listbox/listbox-collapsible.html b/examples/listbox/listbox-collapsible.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8" />
-<title>Collapsible Dropdown Listbox Example | WAI-ARIA Authoring Practices 1.2</title>
+<title>(Deprecated) Collapsible Dropdown Listbox Example | WAI-ARIA Authoring Practices 1.2</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -27,7 +27,10 @@
     </ul>
   </nav>
   <main>
-  <h1>Collapsible Dropdown Listbox Example</h1>
+  <h1>(Deprecated) Collapsible Dropdown Listbox Example</h1>
+  <div class="advisement">
+    <p><strong>DEPRECATION WARNING:</strong> This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices. The <a href="../combobox/combobox-select-only.html">select-only combobox</a> should be used as an alternative to this pattern.</p>
+  </div>
   <p>
     The following example implementation of the
     <a href="../../#Listbox">design pattern for listbox</a>
@@ -38,6 +41,7 @@ <h1>Collapsible Dropdown Listbox Example</h1>
   </p>
   <p>Similar examples include:</p>
   <ul>
+    <li><a href="../combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
     <li><a href="listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
     <li><a href="listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
     <li><a href="listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
diff --git a/examples/listbox/listbox-grouped.html b/examples/listbox/listbox-grouped.html
@@ -35,7 +35,6 @@ <h1>Listbox Example with Grouped Options</h1>
   <ul>
     <li><a href="listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
     <li><a href="listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
-    <li><a href="listbox-collapsible.html">Collapsible Dropdown Listbox Example</a>: Single-select collapsible listbox that expands when activated, similar to HTML <code>select</code> with the attribute <code>size=&quot;1&quot;</code>.</li>
   </ul>
   <section>
     <div class="example-header">
diff --git a/examples/listbox/listbox-rearrangeable.html b/examples/listbox/listbox-rearrangeable.html
@@ -39,7 +39,6 @@ <h1>Example Listboxes with Rearrangeable Options</h1>
   <p>Similar examples include:</p>
   <ul>
     <li><a href="listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
-    <li><a href="listbox-collapsible.html">Collapsible Dropdown Listbox Example</a>: Single-select collapsible listbox that expands when activated, similar to HTML <code>select</code> with the attribute <code>size=&quot;1&quot;</code>.</li>
     <li><a href="listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
   </ul>
   <section>
diff --git a/examples/listbox/listbox-scrollable.html b/examples/listbox/listbox-scrollable.html
@@ -36,7 +36,6 @@ <h1>Scrollable Listbox Example</h1>
   <p>Similar examples include:</p>
   <ul>
     <li><a href="listbox-rearrangeable.html">Example Listboxes with Rearrangeable Options</a>: Examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed.</li>
-    <li><a href="listbox-collapsible.html">Collapsible Dropdown Listbox Example</a>: Single-select collapsible listbox that expands when activated, similar to HTML <code>select</code> with the attribute <code>size=&quot;1&quot;</code>.</li>
     <li><a href="listbox-grouped.html">Listbox Example with Grouped Options</a>: Single-select listbox with grouped options, similar to an HTML <code>select</code> with <code>optgroup</code> children.</li>
   </ul>
   <section>
