Collapsible Listbox example: Add deprecation warning and remove inbou…

…nd links to it (pull #1852) 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 <Carolyn_MacLeod@ca.ibm.com> Co-authored-by: Matt King <a11yThinker@gmail.com>
w3c · Aug 30, 2021 · f4ddc33 · f4ddc33
1 parent c8b1c8c
commit f4ddc33
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
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>