diff --git a/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-scrollable.html b/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-scrollable.html
index fa0edd2747c8a..d25eab172700b 100644
--- a/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-scrollable.html
@@ -2,51 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Scrollable Listbox Example</title>
 
-    <!-- Core JS and CSS shared by all examples -->
-    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
-    <link rel="stylesheet" href="../../../shared/css/core.css">
-    <script src="../../../shared/js/examples.js"></script>
-    <script src="../../../shared/js/highlight.pack.js"></script>
-    <script src="../../../shared/js/app.js"></script>
-    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
-
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
     <script src="js/listbox.js"></script>
     <script src="js/listbox-scrollable.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/131">Related Issues</a></li>
-        <li><a href="../listbox-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Scrollable Listbox Example</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
-        <p>
-          The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a scrollable single-select listbox widget.
-          This widget is functionally similar to an HTML <code>select</code> input where the <code>size</code> attribute has a value greater than one.
-        </p>
-        <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-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>
-
-      <section>
-        <div class="example-header">
-          <h2 id="ex_label">Example</h2>
-        </div>
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex">
           <p>Choose your favorite transuranic element (actinide or transactinide).</p>
           <div class="listbox-area">
@@ -165,184 +128,5 @@
             </div>
           </div>
         </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-      </section>
-
-      <section  id="accessibility_features">
-        <h2>Accessibility Features</h2>
-        <ul>
-          <li>
-            Because this listbox implementation is scrollable and manages which option is focused by <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">using aria-activedescendant</a>, the JavaScript must ensure the focused option is visible.
-            So, when a keyboard or pointer event changes the option referenced by <code>aria-activedescendant</code>, if the referenced option is not fully visible, the JavaScript scrolls the listbox to position the option in view.
-          </li>
-          <li>
-            To enhance perceivability when operating the listbox, visual keyboard focus and hover are styled using the CSS <code>:hover</code> and <code>:focus</code> pseudo-classes:
-            <ul>
-              <li>To help people with visual impairments identify the listbox as an interactive element, the cursor is changed to a pointer when hovering over the list.</li>
-              <li>To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.</li>
-            </ul>
-          </li>
-        </ul>
-      </section>
-
-      <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
-        <p>
-          The example listbox on this page implements the following keyboard interface.
-          Other variations and options for the keyboard interface are described in the <a href="../listbox-pattern.html#keyboard_interaction">Keyboard Interaction section of the Listbox Pattern</a>.
-        </p>
-        <p>
-          <strong>NOTE:</strong> When visual focus is on an option in this listbox implementation, DOM focus remains on the listbox element and the value of <code>aria-activedescendant</code> on the listbox refers to the descendant option that is visually indicated as focused.
-          Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator, not DOM focus.
-          For more information about this focus management technique, see
-          <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">Managing Focus in Composites Using aria-activedescendant</a>.
-        </p>
-        <table aria-labelledby="kbd_label" class="def">
-          <thead>
-            <tr>
-              <th>Key</th>
-              <th>Function</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="key-tab">
-              <th><kbd>Tab</kbd></th>
-              <td>Moves focus into and out of the listbox.</td>
-            </tr>
-            <tr data-test-id="key-down-arrow">
-              <th><kbd>Down Arrow</kbd></th>
-              <td>Moves focus to and selects the next option.</td>
-            </tr>
-            <tr data-test-id="key-up-arrow">
-              <th><kbd>Up Arrow</kbd></th>
-              <td>Moves focus to and selects the previous option.</td>
-            </tr>
-            <tr data-test-id="key-home">
-              <th><kbd>Home</kbd></th>
-              <td>Moves focus to and selects the first option.</td>
-            </tr>
-            <tr data-test-id="key-end">
-              <th><kbd>End</kbd></th>
-              <td>Moves focus to and selects the last option.</td>
-            </tr>
-            <tr data-test-id="key-character">
-              <th>Printable Characters</th>
-              <td>
-                <ul>
-                  <li>Type a character: focus moves to the next item with a name that starts with the typed character.</li>
-                  <li>Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-        <p>
-          The example listbox on this page implements the following ARIA roles, states, and properties.
-          Information about other ways of applying ARIA roles, states, and properties is available in the <a href="../listbox-pattern.html#roles_states_properties">Roles, States, and Properties section of the Listbox Pattern</a>.
-        </p>
-        <table aria-labelledby="rps_label" class="data attributes">
-          <thead>
-            <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="listbox-role">
-              <th scope="row"><code>listbox</code></th>
-              <td></td>
-              <td><code>ul</code></td>
-              <td>Identifies the focusable element that has listbox behaviors and contains the listbox options.</td>
-            </tr>
-            <tr data-test-id="listbox-aria-labelledby">
-              <td></td>
-              <th scope="row"><code>aria-labelledby="ID_REF"</code></th>
-              <td><code>ul</code></td>
-              <td>Refers to the element containing the listbox label.</td>
-            </tr>
-            <tr data-test-id="listbox-tabindex">
-              <td></td>
-              <th scope="row"><code>tabindex="0"</code></th>
-              <td><code>ul</code></td>
-              <td>Includes the listbox in the page tab sequence.</td>
-            </tr>
-            <tr data-test-id="listbox-aria-activedescendant">
-              <td></td>
-              <th scope="row"><code>aria-activedescendant="ID_REF"</code></th>
-              <td><code>ul</code></td>
-              <td>
-                <ul>
-                  <li>When an option in the listbox is visually indicated as having keyboard focus, refers to that option.</li>
-                  <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element.</li>
-                  <li>When navigation keys, such as <kbd>Down Arrow</kbd>, are pressed, the JavaScript changes the value.</li>
-                  <li>
-                    For more information about this focus management technique, see
-                    <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_focus_activedescendant">Managing Focus in Composites Using aria-activedescendant</a>.
-                  </li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="option-role">
-              <th scope="row"><code>option</code></th>
-              <td></td>
-              <td><code>li</code></td>
-              <td>Identifies each selectable element containing the name of an option.</td>
-            </tr>
-            <tr data-test-id="option-aria-selected">
-              <td></td>
-              <th scope="row"><code>aria-selected="true"</code></th>
-              <td><code>li</code></td>
-              <td>
-                <ul>
-                  <li>Indicates that the option is selected.</li>
-                  <li>Applied to the element with role option that is visually styled as selected.</li>
-                  <li>The option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="span-aria-hidden">
-              <td></td>
-              <th><code>aria-hidden="true"</code></th>
-              <td><code>span</code></td>
-              <td>
-                Removes the character entity used for the check mark icon from the accessibility tree to prevent it from being included in the accessible name of the option.
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-        <h2>JavaScript and CSS Source Code</h2>
-        <ul id="css_js_files">
-          <li>
-            CSS:
-            <a href="css/listbox.css" type="tex/css">listbox.css</a>
-          </li>
-          <li>
-            JavaScript:
-            <a href="js/listbox.js" type="text/javascript">listbox.js</a>, <a href="js/listbox-scrollable.js" type="text/javascript">listbox-scrollable.js</a>
-          </li>
-        </ul>
-      </section>
-
-      <section class="example-code">
-        <h2 id="sc_label">HTML Source Code</h2>
-        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
-        <div id="sc_start_sep" role="separator" aria-labelledby="sc_start_sep sc_label" aria-label="Start of "></div>
-        <pre><code id="sc1"></code></pre>
-        <div id="sc_end_sep" role="separator" aria-labelledby="sc_end_sep sc_label" aria-label="End of"></div>
-        <script>
-          sourceCode.add('sc1', 'ex', 'ex_label', 'css_js_files', 'sc1_description');
-          sourceCode.make();
-        </script>
-      </section>
-    </main>
   </body>
 </html>

Key	Function
`Tab`	Moves focus into and out of the listbox.
`Down Arrow`	Moves focus to and selects the next option.
`Up Arrow`	Moves focus to and selects the previous option.
`Home`	Moves focus to and selects the first option.
`End`	Moves focus to and selects the last option.
Printable Characters	- - Type a character: focus moves to the next item with a name that starts with the typed character. - Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed. - -
Role	Attribute	Element	Usage
`listbox`		`ul`	Identifies the focusable element that has listbox behaviors and contains the listbox options.
	`aria-labelledby="ID_REF"`	`ul`	Refers to the element containing the listbox label.
	`tabindex="0"`	`ul`	Includes the listbox in the page tab sequence.
	`aria-activedescendant="ID_REF"`	`ul`	- - When an option in the listbox is visually indicated as having keyboard focus, refers to that option. - Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element. - When navigation keys, such as `Down Arrow`, are pressed, the JavaScript changes the value. - - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. - - -
`option`		`li`	Identifies each selectable element containing the name of an option.
	`aria-selected="true"`	`li`	- - Indicates that the option is selected. - Applied to the element with role option that is visually styled as selected. - The option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus. - -
	`aria-hidden="true"`	`span`	- Removes the character entity used for the check mark icon from the accessibility tree to prevent it from being included in the accessible name of the option. -