diff --git a/third_party/aria-practices/src/content/patterns/treegrid/examples/treegrid-1.html b/third_party/aria-practices/src/content/patterns/treegrid/examples/treegrid-1.html
index aeb5a9cef63c6..e2ae939cde74a 100644
--- a/third_party/aria-practices/src/content/patterns/treegrid/examples/treegrid-1.html
+++ b/third_party/aria-practices/src/content/patterns/treegrid/examples/treegrid-1.html
@@ -2,17 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Treegrid Email Inbox 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/treegrid-1.css" rel="stylesheet">
     <style>
@@ -39,64 +30,6 @@
     <script src="js/treegrid-1.js" type="text/javascript"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/117">Related Issues</a></li>
-        <li><a href="../treegrid-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Treegrid Email Inbox Example</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treegrid.svg">
-        <p>The following example demonstrates how the <a href="../treegrid-pattern.html">Treegrid Pattern</a> can be used to make an interactive tree that enables users to both navigate the hierarchical structure of email conversations and also navigate elements that describe each email, such as subject and sender.</p>
-        <p>Similar examples include:</p>
-        <ul>
-          <li><a href="../../grid/examples/data-grids.html">Data Grid Examples</a>: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.</li>
-          <li><a href="../../treeview/examples/treeview-1a.html">File Directory Treeview using <em>computed</em> properties</a></li>
-          <li><a href="../../treeview/examples/treeview-1b.html">File Directory Treeview using <em>declared</em> properties</a></li>
-          <li><a href="../../treeview/examples/treeview-navigation.html">Navigation Treeview Example</a></li>
-        </ul>
-      </section>
-
-      <section>
-        <h2>Example Usage Options</h2>
-        <p>
-          This example demonstrates three different ways of implementing the keyboard navigation specified in the treegrid pattern.
-          The following links change the behavior of the navigation keys:
-        </p>
-        <ul>
-          <li id="option-cell-focus-allow">
-            <a href="./treegrid-1.html?cell">Rows are focused first, but cells can be focused</a>:<br>
-            Useful when the desired experience is for the treegrid to act primarily like a tree where each row is treated like a node in a tree, but it is still possible for users to navigate across the cells in a row.
-          </li>
-          <li id="option-cell-focus-start">
-            <a href="./treegrid-1.html?cell=start">Cells are focused first, but rows can be focused</a>:<br>
-            Useful when the desired experience is for the treegrid to act primarily like a grid where arrow keys move among cells, but it is still possible for users to focus a row and then start navigating the structure like a tree.
-          </li>
-          <li id="option-cell-focus-force">
-            <a href="./treegrid-1.html?cell=force">Only cells can be focused</a>:<br>
-            Useful when the desired experience is that the treegrid act primarily like a grid and there is no need to focus complete rows.
-          </li>
-        </ul>
-        <p>
-          Note: A row-only option is not provided.
-          A treegrid where cells cannot be focused would be implemented as a <a href="../../treeview/treeview-pattern.html">tree view</a>.
-          A treeview that has columns in its visual presentation may be appropriate when all the following conditions are present:</p>
-        <ul>
-          <li>Columns are guaranteed to fit horizontally (no horizontal scrolling necessary).</li>
-          <li>Columns are merely for attractive presentation; there is no need to navigate them individually.</li>
-          <li>A screen reader user can easily understand the UI when all information in a row is announced as a single string without any separation.</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="ex1">
           <table id="treegrid" role="treegrid" aria-label="Inbox">
             <colgroup>
@@ -155,317 +88,5 @@
             </tbody>
           </table>
         </div>
-
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-      </section>
-
-      <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
-        <p>
-          <strong>NOTE:</strong> The following table includes descriptions of how keyboard commands move focus among cells and rows in the treegrid implementation on this page.
-          In the example on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell.
-          So, when a keyboard command description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
-        </p>
-        <table aria-labelledby="kbd_label" class="def">
-          <thead>
-            <tr>
-              <th>Key</th>
-              <th>Function</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="key-right-arrow">
-              <th scope="row">
-                <kbd>Right Arrow</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a row is focused, and it is collapsed, expands the current row.</li>
-                  <li>If a row is focused, and it is expanded, focuses the first cell in the row.</li>
-                  <li>If a cell is focused, moves one cell to the right.</li>
-                  <li>If focus is on the right most cell, focus does not move.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-left-arrow">
-              <th scope="row">
-                <kbd>Left Arrow</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a row is focused, and it is expanded, collapses the current row.</li>
-                  <li>If a row is focused, and it is collapsed, moves to the parent row (if there is one).</li>
-                  <li>If a cell in the first column is focused, focuses the row.</li>
-                  <li>If a cell in a different column is focused, moves focus one cell to the left.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-down-arrow">
-              <th scope="row">
-                <kbd>Down Arrow</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>Moves focus one row or one cell down, depending on whether a row or cell is currently focused.</li>
-                  <li>If focus is on the bottom row, focus does not move.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-up-arrow">
-              <th scope="row">
-                <kbd>Up Arrow</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>Moves focus one row or one cell up, depending on whether a row or cell is currently focused.</li>
-                  <li>If focus is on the top row, focus does not move.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-tab">
-              <th scope="row">
-                <kbd>Tab</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>Moves focus to the next interactive widget in the current row.</li>
-                  <li>If there are no more interactive widgets in the current row, moves focus out of the treegrid.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-shift-tab">
-              <th scope="row">
-                <kbd>Shift</kbd> + <kbd>Tab</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a cell is focused, moves focus to the previous interactive widget in the current row.</li>
-                  <li>If a row is focused, moves focus out of the treegrid.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-home">
-              <th scope="row">
-                <kbd>Home</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a row is focused, moves to the first row.</li>
-                  <li>If a cell is focused, moves focus to the first cell in the row containing focus.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-end">
-              <th scope="row">
-                <kbd>End</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a row is focused, moves to the last row.</li>
-                  <li>If a cell is focused, moves focus to the last cell in the row containing focus.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-control-home">
-              <th scope="row">
-                <kbd>Control</kbd> + <kbd>Home</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a row has focus, moves focus to the first row.</li>
-                  <li>If a cell has focus, moves focus to the cell in the first row in the same column as the cell that had focus.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-control-end">
-              <th scope="row">
-                <kbd>Control</kbd> + <kbd>End</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>If a row has focus, moves focus to the last row.</li>
-                  <li>If a cell has focus, moves focus to the cell in the last row in the same column as the cell that had focus.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-enter">
-              <th scope="row">
-                <kbd>Enter</kbd>
-              </th>
-              <td>
-                <ul>
-                  <li>Performs default action associated with row or cell that has focus, e.g. opens message or navigate to link.</li>
-                  <li>If focus is on the cell with the expand/collapse button, and there is no other action, will toggle expansion of the current row.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-        <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="treegrid-role">
-              <th scope="row"><code>treegrid</code></th>
-              <td></td>
-              <td><code>table</code></td>
-              <td>Identifies the element as a <code>treegrid</code>.</td>
-            </tr>
-            <tr data-test-id="treegrid-aria-label">
-              <td></td>
-              <th scope="row"><code>aria-label="Inbox"</code></th>
-              <td><code>table</code></td>
-              <td>Provides an accessible name for the <code>treegrid</code>.</td>
-            </tr>
-            <tr data-test-id="row-role">
-              <th scope="row"><code>row</code></th>
-              <td></td>
-              <td><code>tr</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the element as a <code>row</code>.</li>
-                  <li>The <code>row</code> role is not an implicit semantic for the <code>tr</code> element when in a <code>treegrid</code>.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="row-tabindex">
-              <td></td>
-              <th scope="row"><code>tabindex="-1"</code></th>
-              <td><code>tr</code> or <code>td</code></td>
-              <td>
-                <ul>
-                  <li>Makes the element focusable without including it in the tab sequence of the page.</li>
-                  <li>All <code>row</code> and <code>gridcell</code> elements are focusable, but only one is included in the tab sequence.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="row-tabindex">
-              <td></td>
-              <th scope="row"><code>tabindex="0"</code></th>
-              <td><code>tr</code> or <code>td</code></td>
-              <td>
-                <ul>
-                  <li>Includes the element in the tab sequence.</li>
-                  <li>Only one <code>row</code> or <code>gridcell</code> in the <code>treegrid</code> has <code>tabindex=&quot;0&quot;</code>.</li>
-                  <li>In this implementation, the first <code>row</code> in the <code>treegrid</code> is included in the tab sequence when the page loads.</li>
-                  <li>
-                    When the user moves focus in the <code>treegrid</code>, the element included in the tab sequence changes to the element with focus as described in the practice for
-                    <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Managing Focus Within Components Using a Roving tabindex</a>.
-                  </li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="row-aria-expanded">
-              <td></td>
-              <th scope="row"><code>aria-expanded="false"</code></th>
-              <td><code>tr</code> or <code>td</code></td>
-              <td>
-                <ul>
-                  <li>Applied only to parent row or first cell of parent row, i.e., next set of rows are responses to the message in this row</li>
-                  <li>Indicates the parent row is closed, i.e., the descendant rows are not visible.</li>
-                  <li>The visual indication of the collapsed state is synchronized by a CSS attribute selector.</li>
-                  <li>When the treegrid is configured to support focus on rows <code>aria-expanded</code> is on the <code>tr</code> elements, but when the treegrid is configured to support focus on cells only, <code>aria-expanded</code> is on the first <code>td</code> element contained in each row.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="row-aria-expanded">
-              <td></td>
-              <th scope="row"><code>aria-expanded="true"</code></th>
-              <td><code>tr</code> or <code>td</code></td>
-              <td>
-                <ul>
-                  <li>Applied only to parent rows or the first cell in parent rows, i.e., next set of rows are responses to the message in this row</li>
-                  <li>Indicates the parent row is open, i.e., the descendant rows are visible.</li>
-                  <li>The visual indication of the open state is synchronized by a CSS attribute selector.</li>
-                  <li>When the treegrid is configured to support focus on rows <code>aria-expanded</code> is on the <code>tr</code> elements, but when the treegrid is configured to support focus on cells only, <code>aria-expanded</code> is on the first <code>td</code> element contained in each row.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="row-aria-level">
-              <td></td>
-              <th scope="row"><code>aria-level="<em>number</em>"</code></th>
-              <td><code>tr</code></td>
-              <td>
-                <ul>
-                  <li>Defines the level of the row in the hierarchical treegrid structure.</li>
-                  <li>Counting is one-based.</li>
-                  <li>Root rows have aria-level=“1”.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="row-aria-setsize">
-              <td></td>
-              <th scope="row"><code>aria-setsize="<em>number</em>"</code></th>
-              <td><code>tr</code></td>
-              <td>Defines the number of rows in the set of rows that are in the same branch and at the same level within the hierarchy.</td>
-            </tr>
-            <tr data-test-id="row-aria-posinset">
-              <td></td>
-              <th scope="row"><code>aria-posinset="<em>number</em>"</code></th>
-              <td><code>tr</code></td>
-              <td>
-                <ul>
-                  <li>Defines the position of the row within the set of other rows that are in the same branch and at the same level within the hierarchy.</li>
-                  <li>Counting is one-based, not zero-based.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="gridcell-role">
-              <th scope="row"><code>gridcell</code></th>
-              <td></td>
-              <td><code>td</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the element as a <code>gridcell</code>.</li>
-                  <li>The <code>gridcell</code> role is not an implicit semantic for the <code>td</code> element when in a <code>treegrid</code>.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <p>
-          <strong>NOTE:</strong> Due to an error in the ARIA 1.1 specification, the <code>aria-posinset</code> and <code>aria-setsize</code> properties are not supported on row elements.
-          This is being corrected in ARIA 1.2.
-          Consequently, when validating the HTML in this example, errors are generated.
-        </p>
-      </section>
-
-      <section>
-        <h2>JavaScript and CSS Source Code</h2>
-        <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
-        <ul id="css_js_files">
-          <li>
-            CSS:
-            <a href="css/treegrid-1.css" type="text/css">treegrid-1.css</a>
-          </li>
-          <li>
-            JavaScript:
-            <a href="js/treegrid-1.js" type="text/javascript">treegrid-1.js</a>
-          </li>
-        </ul>
-      </section>
-
-      <section class="example-code">
-        <h2 id="sc1_label">HTML Source Code</h2>
-        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
-        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <pre><code id="sc1"></code></pre>
-        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
-        <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
-          sourceCode.make();
-        </script>
-      </section>
-    </main>
   </body>
 </html>
