diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index ab50db51a..91830dec0 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -11,6 +11,7 @@ jobs:
     - uses: actions/checkout@v2
       with:
         submodules: true
+        fetch-depth: 0
 
     - name: Set up Node.js
       uses: actions/setup-node@v2
diff --git a/ARIA/apg/about/about.md b/ARIA/apg/about/about.md
index 922059fae..ff75c1cb1 100644
--- a/ARIA/apg/about/about.md
+++ b/ARIA/apg/about/about.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -107,6 +106,8 @@ lang: en
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/about/acknowledgements/acknowledgements.md b/ARIA/apg/about/acknowledgements/acknowledgements.md
index 3520bf368..72015226a 100644
--- a/ARIA/apg/about/acknowledgements/acknowledgements.md
+++ b/ARIA/apg/about/acknowledgements/acknowledgements.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -195,6 +194,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/about/aria-basics/aria-basics.md b/ARIA/apg/about/aria-basics/aria-basics.md
index 305718bee..a2fd13bb3 100644
--- a/ARIA/apg/about/aria-basics/aria-basics.md
+++ b/ARIA/apg/about/aria-basics/aria-basics.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -101,6 +100,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/about/change-history/change-history.md b/ARIA/apg/about/change-history/change-history.md
index d0467654c..53cdf5913 100644
--- a/ARIA/apg/about/change-history/change-history.md
+++ b/ARIA/apg/about/change-history/change-history.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -101,6 +100,8 @@ lang: en
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/about/contributing/contributing.md b/ARIA/apg/about/contributing/contributing.md
index 274226480..a39eff55f 100644
--- a/ARIA/apg/about/contributing/contributing.md
+++ b/ARIA/apg/about/contributing/contributing.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -171,6 +170,5 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   </div>
 
 </div>
-<script 
-  src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
-></script>
+<script src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"></script>
+
diff --git a/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md b/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md
index 4831a18ac..25270125c 100644
--- a/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md
+++ b/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md
@@ -26,6 +26,7 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
+
 <style>
   .sr-only {
     position: absolute;
@@ -68,6 +69,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
   <div>
     
+    <p>Page last updated: February 13, 2024</p>
     <section>
       <h2>About These Reports</h2>
       <p>
@@ -103,9 +105,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
       </p>
       <ul>
         <li><a href="#csv_files">CSV Files of Role, Properties and States Coverage</a></li>
-        <li><a href="#roles_with_no_examples">Roles with no Guidance or Examples (<span class="roles_with_no_examples_count">29</span>)</a></li>
+        <li><a href="#roles_with_no_examples">Roles with no Guidance or Examples (<span class="roles_with_no_examples_count">28</span>)</a></li>
         <li><a href="#roles_with_one_example">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count">13</span>)</a></li>
-        <li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example  (<span class="roles_with_more_than_one_examples_count">36</span>)</a></li>
+        <li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example  (<span class="roles_with_more_than_one_examples_count">37</span>)</a></li>
         <li><a href="#props_with_no_examples">Properties and States with no Examples (<span class="props_with_no_examples_count">12</span>)</a></li>
         <li><a href="#props_with_one_example">Properties and States with One Examples (<span class="props_with_one_example_count">8</span>)</a></li>
         <li><a href="#props_with_more_than_one_example">Properties and States with More than One Example  (<span class="props_with_more_than_one_examples_count">28</span>)</a></li>
@@ -122,7 +124,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </section>
 
     <section id="roles_with_no_examples">
-      <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span class="roles_with_no_examples_count">29</span>)</h2>
+      <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span class="roles_with_no_examples_count">28</span>)</h2>
       <ul id="roles_with_no_examples_ul">
             <li><code>application</code></li>
             <li><code>caption</code></li>
@@ -143,7 +145,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <li><code>log</code></li>
             <li><code>marquee</code></li>
             <li><code>math</code></li>
-            <li><code>note</code></li>
             <li><code>paragraph</code></li>
             <li><code>progressbar</code></li>
             <li><code>rowheader</code></li>
@@ -255,7 +256,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </section>
 
     <section id="roles_with_more_than_one_example">
-      <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">36</span>)</h2>
+      <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">37</span>)</h2>
       <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div>
       <div class="table-wrap"><table aria-labelledby="roles_with_more_than_one_label" class="data attributes">
         <thead>
@@ -532,6 +533,50 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </ul>
 </td>
           </tr>
+          <tr>
+            <td><code>note</code></td>
+            <td><ul>
+                <li><a href="../../patterns/button/#about">Note</a></li>
+                <li><a href="../../patterns/combobox/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/combobox/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/combobox/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/combobox/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/combobox/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/combobox/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/dialog-modal/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/dialog-modal/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/feed/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/grid/#dataGrid">Note</a></li>
+                <li><a href="../../patterns/grid/#dataGrid">Note</a></li>
+                <li><a href="../../patterns/grid/#layoutGrid">Note</a></li>
+                <li><a href="../../patterns/grid/#layoutGrid">Note</a></li>
+                <li><a href="../../patterns/grid/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/link/#about">note</a></li>
+                <li><a href="../../patterns/listbox/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/listbox/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/menubar/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/menubar/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/meter/#about">Note</a></li>
+                <li><a href="../../patterns/radio/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/radio/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/slider/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/spinbutton/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/table/#about">Note</a></li>
+                <li><a href="../../patterns/table/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/tabs/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/toolbar/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/tooltip/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/treegrid/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/treegrid/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/treegrid/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/treeview/#keyboard_interaction">Note</a></li>
+                <li><a href="../../patterns/treeview/#roles_states_properties">Note</a></li>
+                <li><a href="../../patterns/windowsplitter/#keyboard_interaction">Note</a></li>
+                <li><a href="../../practices/keyboard-interface/#kbd_shortcuts_assigning">Note</a></li>
+            </ul>
+</td>
+            <td></td>
+          </tr>
           <tr>
             <td><code>option</code></td>
             <td></td>
@@ -992,6 +1037,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td></td>
             <td><ul>
                 <li><a href="../../patterns/button/examples/button_idl/">Button  (IDL Version)</a></li>
+                <li><a href="../../patterns/listbox/examples/listbox-grouped/">Listbox  with Grouped Options</a></li>
+                <li><a href="../../patterns/listbox/examples/listbox-rearrangeable/">Listboxes with Rearrangeable Options</a></li>
+                <li><a href="../../patterns/listbox/examples/listbox-scrollable/">Scrollable Listbox</a></li>
                 <li><a href="../../patterns/menubar/examples/menubar-editor/">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../patterns/slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../patterns/slider/examples/slider-color-viewer/">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -1284,7 +1332,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr>
           <tr>
             <th scope="row">Uses SVG</th>
-            <td id="example_summary_svg">33</td>
+            <td id="example_summary_svg">34</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>forced-color-adjust</code> on SVG</th>
@@ -1292,23 +1340,23 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr>
           <tr>
             <th scope="row">Uses <code>event.KeyCode</code></th>
-            <td id="example_summary_keycode">20</td>
+            <td id="example_summary_keycode">16</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>event.which</code></th>
-            <td id="example_summary_which">12</td>
+            <td id="example_summary_which">60</td>
           </tr>
           <tr>
             <th scope="row">Use Class</th>
-            <td id="example_summary_class">31</td>
+            <td id="example_summary_class">36</td>
           </tr>
           <tr>
             <th scope="row">Use Prototype</th>
-            <td id="example_summary_prototype">23</td>
+            <td id="example_summary_prototype">60</td>
           </tr>
           <tr>
             <th scope="row">Mouse Events</th>
-            <td id="example_summary_mouse">16</td>
+            <td id="example_summary_mouse">15</td>
           </tr>
           <tr>
             <th scope="row">Pointer Events</th>
@@ -1337,29 +1385,29 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <tbody id="example_coding_practices_tbody">
           <tr>
             <td><a href="../../patterns/accordion/examples/accordion/">Accordion</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>9</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-label,aria-required,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-required,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/alert/examples/alert/">Alert</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>7</td>
+            <td>8</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription,aria-live,aria-atomic</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription,aria-live,aria-atomic</td>
           </tr>
           <tr>
             <td><a href="../../patterns/alertdialog/examples/alertdialog/">Alert Dialog</a></td>
@@ -1368,167 +1416,167 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>Yes</td>
             <td></td>
             <td>ex_alertdialog</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>11</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/breadcrumb/examples/breadcrumb/">Breadcrumb</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>0</td>
-            <td>8</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,navigation,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,navigation,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/button/examples/button_idl/">Button  (IDL Version)</a></td>
-            <td></td>
+            <td>prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td></td>
             <td>example</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/button/examples/button/">Button</a></td>
-            <td></td>
+            <td>prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td></td>
             <td>example</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>1</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/carousel/examples/carousel-1-prev-next/">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-labelledby</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby</td>
           </tr>
           <tr>
             <td><a href="../../patterns/carousel/examples/carousel-2-tablist/">Auto-Rotating Image Carousel with Tabs for Slide Control</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td>Yes</td>
             <td>ex1</td>
-            <td>7</td>
+            <td>5</td>
             <td>4</td>
-            <td>9</td>
+            <td>11</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-labelledby</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby</td>
           </tr>
           <tr>
             <td><a href="../../patterns/checkbox/examples/checkbox-mixed/">Checkbox  (Mixed-State)</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>8</td>
+            <td>10</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/checkbox/examples/checkbox/">Checkbox  (Two State)</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/combobox/examples/combobox-autocomplete-both/">Editable Combobox With Both List and Inline Autocomplete</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/combobox/examples/combobox-autocomplete-list/">Editable Combobox With List Autocomplete</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/combobox/examples/combobox-autocomplete-none/">Editable Combobox without Autocomplete</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/combobox/examples/combobox-datepicker/">Date Picker Combobox</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>7</td>
+            <td>5</td>
             <td>3</td>
-            <td>13</td>
+            <td>14</td>
             <td>10</td>
-            <td>gridcell,heading,menu,menuitem,aria-busy,aria-hidden,aria-roledescription</td>
+            <td>gridcell,heading,aria-busy,aria-errormessage,aria-hidden,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/combobox/examples/combobox-select-only/">Select-Only Combobox</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>5</td>
             <td>3</td>
-            <td>9</td>
+            <td>3</td>
+            <td>12</td>
             <td>5</td>
-            <td>heading,menu,menuitem,option,aria-busy,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,option,aria-busy,aria-describedby,aria-errormessage,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/combobox/examples/grid-combo/">Editable Combobox with Grid Popup</a></td>
@@ -1537,24 +1585,24 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>4</td>
-            <td>10</td>
+            <td>13</td>
             <td>7</td>
-            <td>heading,menu,menuitem,row,gridcell,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,row,gridcell,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a></td>
-            <td>prototype</td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
             <td>Yes</td>
             <td>example</td>
-            <td>6</td>
+            <td>4</td>
             <td>2</td>
             <td>11</td>
             <td>6</td>
-            <td>gridcell,heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-roledescription</td>
+            <td>gridcell,heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/dialog-modal/examples/dialog/">Modal Dialog</a></td>
@@ -1563,76 +1611,63 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/disclosure/examples/disclosure-faq/">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>7</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/disclosure/examples/disclosure-image-description/">Disclosure (Show/Hide) for Image Description</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>7</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/disclosure/examples/disclosure-navigation-hybrid/">Disclosure Navigation Menu with Top-Level Links</a></td>
             <td>class, prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>7</td>
+            <td>5</td>
             <td>0</td>
-            <td>8</td>
+            <td>10</td>
             <td>3</td>
-            <td>banner,contentinfo,heading,menu,menuitem,navigation,region,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>banner,contentinfo,heading,navigation,region,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/disclosure/examples/disclosure-navigation/">Disclosure Navigation Menu</a></td>
             <td>class, prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
-            <td>0</td>
-            <td>8</td>
             <td>3</td>
-            <td>heading,menu,menuitem,navigation,region,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
-          </tr>
-          <tr>
-            <td><a href="../../patterns/feed/examples/feed/">Feed</a></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td>ex1</td>
+            <td>0</td>
+            <td>10</td>
             <td>3</td>
-            <td>2</td>
-            <td>7</td>
-            <td>5</td>
-            <td>heading,menu,menuitem,feed,article,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription,aria-describedby,aria-posinset,aria-setsize</td>
+            <td>heading,navigation,region,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/feed/examples/feed-display.html">Feed Display</a></td>
@@ -1647,6 +1682,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>0</td>
             <td>aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize</td>
           </tr>
+          <tr>
+            <td><a href="../../patterns/feed/examples/feed/">Feed</a></td>
+            <td>prototype</td>
+            <td></td>
+            <td>Yes</td>
+            <td></td>
+            <td>ex1</td>
+            <td>1</td>
+            <td>2</td>
+            <td>8</td>
+            <td>5</td>
+            <td>heading,feed,article,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription,aria-posinset,aria-setsize</td>
+          </tr>
           <tr>
             <td><a href="../../patterns/grid/examples/advanced-data-grid/">Advanced Data Grid</a></td>
             <td>prototype</td>
@@ -1654,11 +1702,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>10</td>
+            <td>13</td>
             <td>0</td>
-            <td>heading,menu,menuitem,aria-busy,aria-colindex,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription,aria-rowindex,aria-sort</td>
+            <td>heading,aria-busy,aria-colindex,aria-controls,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-labelledby,aria-roledescription,aria-rowindex,aria-sort</td>
           </tr>
           <tr>
             <td><a href="../../patterns/grid/examples/data-grids/">Data Grid</a></td>
@@ -1669,9 +1717,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>ex1</td>
             <td>5</td>
             <td>1</td>
-            <td>12</td>
+            <td>15</td>
             <td>6</td>
-            <td>button,heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>button,heading,menu,menuitem,aria-busy,aria-controls,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/grid/examples/layout-grids/">Layout Grid</a></td>
@@ -1680,440 +1728,440 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>8</td>
+            <td>6</td>
             <td>3</td>
-            <td>13</td>
+            <td>15</td>
             <td>3</td>
-            <td>button,heading,menu,menuitem,region,aria-busy,aria-colindex,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-live,aria-relevant,aria-roledescription,aria-sort</td>
+            <td>button,heading,region,aria-busy,aria-colindex,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-live,aria-relevant,aria-roledescription,aria-sort</td>
           </tr>
           <tr>
             <td><a href="../../patterns/link/examples/link/">Link</a></td>
-            <td></td>
+            <td>prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td></td>
             <td>not found</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>7</td>
+            <td>8</td>
             <td>1</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/listbox/examples/listbox-collapsible/">(Deprecated) Collapsible Dropdown Listbox</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>12</td>
+            <td>14</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-disabled,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-hidden,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/listbox/examples/listbox-grouped/">Listbox  with Grouped Options</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex</td>
-            <td>7</td>
-            <td>3</td>
-            <td>12</td>
+            <td>5</td>
             <td>3</td>
-            <td>heading,menu,menuitem,presentation,aria-busy,aria-controls,aria-disabled,aria-expanded,aria-haspopup,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
+            <td>13</td>
+            <td>4</td>
+            <td>heading,presentation,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/listbox/examples/listbox-rearrangeable/">Listboxes with Rearrangeable Options</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
-            <td>2</td>
-            <td>13</td>
             <td>4</td>
-            <td>heading,menu,menuitem,toolbar,aria-busy,aria-controls,aria-disabled,aria-expanded,aria-haspopup,aria-keyshortcuts,aria-label,aria-live,aria-roledescription</td>
+            <td>2</td>
+            <td>14</td>
+            <td>5</td>
+            <td>heading,toolbar,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-live,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/listbox/examples/listbox-scrollable/">Scrollable Listbox</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex</td>
-            <td>5</td>
-            <td>2</td>
-            <td>12</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-disabled,aria-expanded,aria-haspopup,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
+            <td>2</td>
+            <td>13</td>
+            <td>4</td>
+            <td>heading,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/menu-button/examples/menu-button-actions-active-descendant/">Actions Menu Button  Using aria-activedescendant</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>11</td>
             <td>5</td>
-            <td>heading,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/menu-button/examples/menu-button-actions/">Actions Menu Button  Using element.focus()</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>3</td>
             <td>2</td>
-            <td>7</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/menu-button/examples/menu-button-links/">Navigation Menu Button</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>4</td>
             <td>3</td>
-            <td>7</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/menubar/examples/menubar-editor/">Editor Menubar</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>9</td>
             <td>7</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,none,aria-busy,aria-controls,aria-labelledby,aria-orientation,aria-roledescription</td>
+            <td>heading,none,aria-busy,aria-describedby,aria-errormessage,aria-labelledby,aria-orientation,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/menubar/examples/menubar-navigation/">Navigation Menubar</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>10</td>
             <td>8</td>
-            <td>9</td>
+            <td>11</td>
             <td>5</td>
-            <td>heading,separator,aria-busy,aria-controls,aria-orientation,aria-roledescription</td>
+            <td>heading,separator,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-orientation,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/meter/examples/meter/">Meter</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>example</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>11</td>
             <td>4</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/radio/examples/radio-activedescendant/">Radio Group  Using aria-activedescendant</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>9</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/radio/examples/radio-rating/">Rating Radio Group</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/radio/examples/radio/">Radio Group  Using Roving tabindex</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>11</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/slider/examples/slider-color-viewer/">Color Viewer Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>11</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/slider/examples/slider-rating/">Rating Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/slider/examples/slider-seek/">Media Seek Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/slider/examples/slider-temperature/">Vertical Temperature Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>13</td>
             <td>7</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/spinbutton/examples/datepicker-spinbuttons/">Date Picker Spin Button</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>example</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>12</td>
             <td>7</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/switch/examples/switch-button/">Switch  Using HTML Button</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/switch/examples/switch-checkbox/">Switch  Using HTML Checkbox Input</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>8</td>
             <td>1</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/switch/examples/switch/">Switch</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/table/examples/sortable-table/">Sortable Table</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
             <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/table/examples/table/">Table</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>8</td>
+            <td>6</td>
             <td>5</td>
             <td>8</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/tabs/examples/tabs-automatic/">Tabs with Automatic Activation</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/tabs/examples/tabs-manual/">Tabs with Manual Activation</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/toolbar/examples/help.html">Toolbar</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>not found</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>7</td>
+            <td>8</td>
             <td>0</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/toolbar/examples/toolbar/">Toolbar</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>8</td>
+            <td>7</td>
             <td>6</td>
-            <td>15</td>
+            <td>17</td>
             <td>12</td>
-            <td>heading,menuitem,aria-busy,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/treegrid/examples/treegrid-1/">Treegrid Email Inbox</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>12</td>
+            <td>13</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-activedescendant,aria-busy,aria-controls,aria-current,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-activedescendant,aria-busy,aria-current,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/treeview/examples/treeview-1a/">File Directory Treeview  Using Computed Properties</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/treeview/examples/treeview-1b/">File Directory Treeview  Using Declared Properties</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../patterns/treeview/examples/treeview-navigation/">Navigation Treeview</a></td>
-            <td>class</td>
+            <td>class, prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td>Yes</td>
             <td>ex1</td>
-            <td>11</td>
-            <td>8</td>
             <td>9</td>
+            <td>8</td>
+            <td>10</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-haspopup,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-roledescription</td>
           </tr></tbody>
       </table></div>
 
@@ -2315,8 +2363,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <tr>
             <td><a href="../../patterns/feed/examples/feed-display.html">Feed Display</a></td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
+            <td>Yes</td>
             <td></td>
             <td></td>
             <td></td>
@@ -2716,7 +2764,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr>
           <tr>
             <td><a href="../../patterns/dialog-modal/examples/datepicker-dialog/">Date Picker Dialog</a></td>
-            <td>Yes</td>
+            <td></td>
             <td>Yes</td>
           </tr>
           <tr>
@@ -2938,6 +2986,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/about/introduction/introduction.md b/ARIA/apg/about/introduction/introduction.md
index 594c832e5..7be7f7b53 100644
--- a/ARIA/apg/about/introduction/introduction.md
+++ b/ARIA/apg/about/introduction/introduction.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -227,6 +226,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/about/related-specifications/related-specifications.md b/ARIA/apg/about/related-specifications/related-specifications.md
index 5ac980f02..43f1664cd 100644
--- a/ARIA/apg/about/related-specifications/related-specifications.md
+++ b/ARIA/apg/about/related-specifications/related-specifications.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -116,6 +115,8 @@ lang: en
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/apg-home.md b/ARIA/apg/apg-home.md
index deb4b9c73..3cbc49f84 100644
--- a/ARIA/apg/apg-home.md
+++ b/ARIA/apg/apg-home.md
@@ -19,6 +19,10 @@ type_of_guidance: APG
 
 lang: en
 ---
+<meta charset="UTF-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>ARIA Authoring Practices Guide</title>
 
 
 <link 
@@ -178,6 +182,8 @@ lang: en
     <div class="bottom-off-white-section off-white-section"></div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md
index 6d4b286de..99384c7cc 100644
--- a/ARIA/apg/index/index.md
+++ b/ARIA/apg/index/index.md
@@ -954,6 +954,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/accordion/accordion-pattern.md b/ARIA/apg/patterns/accordion/accordion-pattern.md
index 67f8a7c17..cdb175baf 100644
--- a/ARIA/apg/patterns/accordion/accordion-pattern.md
+++ b/ARIA/apg/patterns/accordion/accordion-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -143,6 +142,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/accordion/examples/accordion.md b/ARIA/apg/patterns/accordion/examples/accordion.md
index 6a156b0bc..1bd018521 100644
--- a/ARIA/apg/patterns/accordion/examples/accordion.md
+++ b/ARIA/apg/patterns/accordion/examples/accordion.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -332,6 +331,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     <script src="../../../../../../content-assets/wai-aria-practices/patterns/accordion/examples/js/accordion.js"></script>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/alert/alert-pattern.md b/ARIA/apg/patterns/alert/alert-pattern.md
index 20830a675..962b18168 100644
--- a/ARIA/apg/patterns/alert/alert-pattern.md
+++ b/ARIA/apg/patterns/alert/alert-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -99,6 +98,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md
index e70dfeb7a..718f266d3 100644
--- a/ARIA/apg/patterns/alert/examples/alert.md
+++ b/ARIA/apg/patterns/alert/examples/alert.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/alert/examples/css/alert.css"
@@ -226,6 +225,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md b/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md
index 227b5467c..86ac2b65b 100644
--- a/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md
+++ b/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -105,6 +104,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
index 6e93a94bd..6dc70ed68 100644
--- a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
+++ b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/alertdialog/examples/css/alertdialog.css"
@@ -310,6 +309,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md b/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md
index 05f50cfa1..7c91cb937 100644
--- a/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md
+++ b/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -94,6 +93,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
index 690c9fd32..a158af063 100644
--- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
+++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/breadcrumb/examples/css/breadcrumb.css"
@@ -204,6 +203,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/button/button-pattern.md b/ARIA/apg/patterns/button/button-pattern.md
index fe26dada7..636d0c970 100644
--- a/ARIA/apg/patterns/button/button-pattern.md
+++ b/ARIA/apg/patterns/button/button-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -151,6 +150,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md
index 1b514609e..a2d59e795 100644
--- a/ARIA/apg/patterns/button/examples/button.md
+++ b/ARIA/apg/patterns/button/examples/button.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -283,6 +282,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/button/examples/button_idl.md b/ARIA/apg/patterns/button/examples/button_idl.md
index a014fb852..d3f4887a7 100644
--- a/ARIA/apg/patterns/button/examples/button_idl.md
+++ b/ARIA/apg/patterns/button/examples/button_idl.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -276,6 +275,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/carousel/carousel-pattern.md b/ARIA/apg/patterns/carousel/carousel-pattern.md
index b23f0e162..bfd7a4d8c 100644
--- a/ARIA/apg/patterns/carousel/carousel-pattern.md
+++ b/ARIA/apg/patterns/carousel/carousel-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -230,6 +229,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
index 90d871268..bd6a0798d 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -28,7 +28,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -603,6 +602,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
index fa9097033..9a28767a1 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -787,6 +786,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/checkbox/checkbox-pattern.md b/ARIA/apg/patterns/checkbox/checkbox-pattern.md
index 2dbabed66..c9e280290 100644
--- a/ARIA/apg/patterns/checkbox/checkbox-pattern.md
+++ b/ARIA/apg/patterns/checkbox/checkbox-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -119,6 +118,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
index 5135b2395..faf127755 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/checkbox/examples/css/checkbox-mixed.css"
@@ -285,6 +284,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md
index 152020f5c..1fcd2e102 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/checkbox/examples/css/checkbox.css"
@@ -273,6 +272,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/combobox-pattern.md b/ARIA/apg/patterns/combobox/combobox-pattern.md
index 888e772e1..f58680ebd 100644
--- a/ARIA/apg/patterns/combobox/combobox-pattern.md
+++ b/ARIA/apg/patterns/combobox/combobox-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -506,6 +505,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
index 0b1d4bdd2..5d58ab7b6 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -608,6 +607,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
index 5196ca349..91c2d8822 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/css/combobox-autocomplete.css"
@@ -602,6 +601,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
index c76dca5b0..2c684d0d6 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/css/combobox-autocomplete.css"
@@ -544,6 +543,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
index 5e20710ee..2233babf2 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-datepicker/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -792,6 +791,8 @@ Moves focus to the day of the month that has the same number.
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
index f850666ae..394b4be88 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/css/select-only.css"
@@ -484,6 +483,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md
index a491dcdbd..86670758a 100644
--- a/ARIA/apg/patterns/combobox/examples/grid-combo.md
+++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/grid-combo/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/css/grid-combo.css"
@@ -463,6 +462,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md b/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md
index 28809d303..fb027ca6b 100644
--- a/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md
+++ b/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -206,6 +205,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
index c7fc1de3b..ad3bbf454 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/27'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/27'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -726,6 +725,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
index a91ec1e65..ea0977803 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/dialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/6'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/6'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/dialog-modal/examples/css/dialog.css"
@@ -431,6 +430,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/disclosure/disclosure-pattern.md b/ARIA/apg/patterns/disclosure/disclosure-pattern.md
index 6c6c371fe..01e9a80b6 100644
--- a/ARIA/apg/patterns/disclosure/disclosure-pattern.md
+++ b/ARIA/apg/patterns/disclosure/disclosure-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -106,6 +105,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
index 81e99ca10..d713b8272 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-faq/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -28,7 +28,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-faq.css"
@@ -303,6 +302,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
index 45c343cdd..62d77dd17 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-image-description.css"
@@ -440,6 +439,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
index 71e52dbc2..9a806d661 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-navigation.css"
@@ -443,6 +442,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
index 64ca63281..3159d8188 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-navigation.css"
@@ -438,6 +437,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md
index 7ea0ad989..05720ddb4 100644
--- a/ARIA/apg/patterns/feed/examples/feed.md
+++ b/ARIA/apg/patterns/feed/examples/feed.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/feed/examples/feed/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/19'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/19'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -267,6 +266,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/feed/feed-pattern.md b/ARIA/apg/patterns/feed/feed-pattern.md
index c9a4d65b4..c8a190303 100644
--- a/ARIA/apg/patterns/feed/feed-pattern.md
+++ b/ARIA/apg/patterns/feed/feed-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -177,6 +176,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
index d853b2cdc..cf2af01ad 100644
--- a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
+++ b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/advanced-data-grid/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/css/menuButton.css"
@@ -209,6 +208,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md
index 00bf539aa..5b986ff8e 100644
--- a/ARIA/apg/patterns/grid/examples/data-grids.md
+++ b/ARIA/apg/patterns/grid/examples/data-grids.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/css/menuButton.css"
@@ -869,6 +868,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md
index 23d36420d..bd9f3737d 100644
--- a/ARIA/apg/patterns/grid/examples/layout-grids.md
+++ b/ARIA/apg/patterns/grid/examples/layout-grids.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/layout-grids/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/css/layoutGrids.css"
@@ -763,6 +762,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/grid/grid-pattern.md b/ARIA/apg/patterns/grid/grid-pattern.md
index 2c321243f..afd99e993 100644
--- a/ARIA/apg/patterns/grid/grid-pattern.md
+++ b/ARIA/apg/patterns/grid/grid-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -465,6 +464,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/landmarks/landmarks-pattern.md b/ARIA/apg/patterns/landmarks/landmarks-pattern.md
index e9315f7a4..bd35d8701 100644
--- a/ARIA/apg/patterns/landmarks/landmarks-pattern.md
+++ b/ARIA/apg/patterns/landmarks/landmarks-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -110,6 +109,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/link/examples/link.md b/ARIA/apg/patterns/link/examples/link.md
index 1647e7ee5..cd4914655 100644
--- a/ARIA/apg/patterns/link/examples/link.md
+++ b/ARIA/apg/patterns/link/examples/link.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/link/examples/link/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/link/examples/css/link.css"
@@ -260,6 +259,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/link/link-pattern.md b/ARIA/apg/patterns/link/link-pattern.md
index 5851d1dd7..6d68c0b99 100644
--- a/ARIA/apg/patterns/link/link-pattern.md
+++ b/ARIA/apg/patterns/link/link-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -95,6 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
index bf212579c..3881203eb 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-collapsible/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/css/listbox.css"
@@ -395,6 +394,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
index 6d0dd0e19..d9f01e70d 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-grouped/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/css/listbox.css"
@@ -369,6 +368,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
index a53b52731..c2606f0de 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/css/listbox.css"
@@ -613,6 +612,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
index 831a8d1ac..a9195b30b 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-scrollable/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/css/listbox.css"
@@ -405,6 +404,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/listbox/listbox-pattern.md b/ARIA/apg/patterns/listbox/listbox-pattern.md
index 466f6887c..649a1423a 100644
--- a/ARIA/apg/patterns/listbox/listbox-pattern.md
+++ b/ARIA/apg/patterns/listbox/listbox-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -313,6 +312,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
index 1c76bf398..190635f04 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-de
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/menu-button/examples/css/menu-button-actions.css"
@@ -415,6 +414,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
index 241778df3..6f7d9f31c 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/menu-button/examples/css/menu-button-actions.css"
@@ -394,6 +393,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
index cf3f53552..47ae38539 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-links/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/menu-button/examples/css/menu-button-links.css"
@@ -428,6 +427,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menu-button/menu-button-pattern.md b/ARIA/apg/patterns/menu-button/menu-button-pattern.md
index aa3deebb5..78f1d9b64 100644
--- a/ARIA/apg/patterns/menu-button/menu-button-pattern.md
+++ b/ARIA/apg/patterns/menu-button/menu-button-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -115,6 +114,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md
index 34e95005d..f5d0c93b9 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-editor/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/menubar/examples/css/menubar-editor.css"
@@ -857,6 +856,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
index da9b25e8f..7dba01984 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-navigation/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/menubar/examples/css/menubar-navigation.css"
@@ -886,6 +885,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md b/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md
index a779de41a..34249d207 100644
--- a/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md
+++ b/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -289,6 +288,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md
index b3f9315fb..b64e5d079 100644
--- a/ARIA/apg/patterns/meter/examples/meter.md
+++ b/ARIA/apg/patterns/meter/examples/meter.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/meter/examples/meter/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/30'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/30'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -212,6 +211,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/meter/meter-pattern.md b/ARIA/apg/patterns/meter/meter-pattern.md
index 8beee95c4..be6f1e976 100644
--- a/ARIA/apg/patterns/meter/meter-pattern.md
+++ b/ARIA/apg/patterns/meter/meter-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -110,6 +109,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index d01717963..1071f0b85 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -26,7 +26,6 @@ lang: en
 
 <script src="../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -428,6 +427,8 @@ lang: en
   
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
index c685e0ace..81231f1b3 100644
--- a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
+++ b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-activedescendant/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -341,6 +340,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md
index 86d016912..a69fc79fc 100644
--- a/ARIA/apg/patterns/radio/examples/radio-rating.md
+++ b/ARIA/apg/patterns/radio/examples/radio-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -360,6 +359,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/radio/examples/radio.md b/ARIA/apg/patterns/radio/examples/radio.md
index bf690746c..9a18736f4 100644
--- a/ARIA/apg/patterns/radio/examples/radio.md
+++ b/ARIA/apg/patterns/radio/examples/radio.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -331,6 +330,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/radio/radio-group-pattern.md b/ARIA/apg/patterns/radio/radio-group-pattern.md
index add74508e..c36fa8348 100644
--- a/ARIA/apg/patterns/radio/radio-group-pattern.md
+++ b/ARIA/apg/patterns/radio/radio-group-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -178,6 +177,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
index 312670bef..6f1edcbd0 100644
--- a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
+++ b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -340,6 +339,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md b/ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md
index 70a0baf72..9fb911f21 100644
--- a/ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md
+++ b/ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -126,6 +125,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index 86ce57520..fc0325520 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -387,6 +386,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index b24cab34b..e602051d0 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -391,6 +390,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index 4d0607357..712f1fc93 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -383,6 +382,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index b4e63303c..5d7c7608d 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -364,6 +363,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/slider/slider-pattern.md b/ARIA/apg/patterns/slider/slider-pattern.md
index 115db02b0..ed44f2183 100644
--- a/ARIA/apg/patterns/slider/slider-pattern.md
+++ b/ARIA/apg/patterns/slider/slider-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -130,6 +129,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
index 251501c36..8f33812d5 100644
--- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
+++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -405,6 +404,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md b/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md
index d93c19cf8..dcbceecf6 100644
--- a/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md
+++ b/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -147,6 +146,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/switch/examples/switch-button.md b/ARIA/apg/patterns/switch/examples/switch-button.md
index ade73ec32..e308d9aaa 100644
--- a/ARIA/apg/patterns/switch/examples/switch-button.md
+++ b/ARIA/apg/patterns/switch/examples/switch-button.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-button/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/switch/examples/css/switch-button.css"
@@ -303,6 +302,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/switch/examples/switch-checkbox.md b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
index 9204fc089..3d12de9b5 100644
--- a/ARIA/apg/patterns/switch/examples/switch-checkbox.md
+++ b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-checkbox/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/switch/examples/css/switch-checkbox.css"
@@ -261,6 +260,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/switch/examples/switch.md b/ARIA/apg/patterns/switch/examples/switch.md
index 712c70ddc..6bd484bbc 100644
--- a/ARIA/apg/patterns/switch/examples/switch.md
+++ b/ARIA/apg/patterns/switch/examples/switch.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/switch/examples/css/switch.css"
@@ -267,6 +266,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/switch/switch-pattern.md b/ARIA/apg/patterns/switch/switch-pattern.md
index e2c3b52b3..4d3b67e94 100644
--- a/ARIA/apg/patterns/switch/switch-pattern.md
+++ b/ARIA/apg/patterns/switch/switch-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -126,6 +125,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/table/examples/sortable-table.md b/ARIA/apg/patterns/table/examples/sortable-table.md
index 6c697005a..af1b6b140 100644
--- a/ARIA/apg/patterns/table/examples/sortable-table.md
+++ b/ARIA/apg/patterns/table/examples/sortable-table.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/sortable-table/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 26 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/table/examples/css/sortable-table.css"
@@ -284,6 +283,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/table/examples/table.md b/ARIA/apg/patterns/table/examples/table.md
index 18c0cf00e..21a1cfaa7 100644
--- a/ARIA/apg/patterns/table/examples/table.md
+++ b/ARIA/apg/patterns/table/examples/table.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/table/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/table/examples/css/table.css"
@@ -248,6 +247,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/table/table-pattern.md b/ARIA/apg/patterns/table/table-pattern.md
index 80d0a9990..8d270a833 100644
--- a/ARIA/apg/patterns/table/table-pattern.md
+++ b/ARIA/apg/patterns/table/table-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -137,6 +136,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
index 5504428c0..e1505f8ed 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-automatic/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/tabs/examples/css/tabs.css"
@@ -424,6 +423,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-manual.md b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
index 908264b39..6f10d79a8 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-manual.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-manual/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/tabs/examples/css/tabs.css"
@@ -418,6 +417,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/tabs/tabs-pattern.md b/ARIA/apg/patterns/tabs/tabs-pattern.md
index 14108bddc..8441f941c 100644
--- a/ARIA/apg/patterns/tabs/tabs-pattern.md
+++ b/ARIA/apg/patterns/tabs/tabs-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -184,6 +183,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/toolbar/examples/help.html b/ARIA/apg/patterns/toolbar/examples/help.html
index f68b9fa4b..e34ebbd08 100644
--- a/ARIA/apg/patterns/toolbar/examples/help.html
+++ b/ARIA/apg/patterns/toolbar/examples/help.html
@@ -15,7 +15,7 @@
     <script src="../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
     <script src="../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
     <script src="../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-    <script src="../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
     
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/ARIA/apg/patterns/toolbar/examples/toolbar.md b/ARIA/apg/patterns/toolbar/examples/toolbar.md
index 2a0b69c0e..1b09b0f01 100644
--- a/ARIA/apg/patterns/toolbar/examples/toolbar.md
+++ b/ARIA/apg/patterns/toolbar/examples/toolbar.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/toolbar/examples/toolbar/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/18'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/18'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -1036,6 +1035,8 @@ But, in a larger sense, we can not dedicate, we can not consecrate, we can not h
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/toolbar/toolbar-pattern.md b/ARIA/apg/patterns/toolbar/toolbar-pattern.md
index a8e827ccd..99650ef7c 100644
--- a/ARIA/apg/patterns/toolbar/toolbar-pattern.md
+++ b/ARIA/apg/patterns/toolbar/toolbar-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -165,6 +164,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/tooltip/tooltip-pattern.md b/ARIA/apg/patterns/tooltip/tooltip-pattern.md
index a2d625965..2502afb21 100644
--- a/ARIA/apg/patterns/tooltip/tooltip-pattern.md
+++ b/ARIA/apg/patterns/tooltip/tooltip-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -107,6 +106,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
index fc2bcca9e..6b1b1b554 100644
--- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
+++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treegrid/examples/treegrid-1/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/treegrid/examples/css/treegrid-1.css"
@@ -535,6 +534,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/treegrid/treegrid-pattern.md b/ARIA/apg/patterns/treegrid/treegrid-pattern.md
index 79835a559..dd2646c92 100644
--- a/ARIA/apg/patterns/treegrid/treegrid-pattern.md
+++ b/ARIA/apg/patterns/treegrid/treegrid-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -367,6 +366,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1a.md b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
index 96204161e..faf5a902f 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1a.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1a/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -27,7 +27,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/utils.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -499,6 +498,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1b.md b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
index 4faedd9f7..9b95fe6c0 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1b.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1b/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -27,7 +27,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/utils.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   rel="stylesheet"
@@ -525,6 +524,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
index b375fece0..b0588751d 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-navigation/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 18 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 13 February 2024</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -26,7 +26,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/examples.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 <link
   href="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/css/treeview-navigation.css"
@@ -761,6 +760,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/treeview/treeview-pattern.md b/ARIA/apg/patterns/treeview/treeview-pattern.md
index 4c12973b9..34496f4b2 100644
--- a/ARIA/apg/patterns/treeview/treeview-pattern.md
+++ b/ARIA/apg/patterns/treeview/treeview-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -324,6 +323,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md b/ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md
index 439514a9d..21a201f23 100644
--- a/ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md
+++ b/ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -141,6 +140,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/grid-and-table-properties/grid-and-table-properties-practice.md b/ARIA/apg/practices/grid-and-table-properties/grid-and-table-properties-practice.md
index 4be5cd819..1102ad202 100644
--- a/ARIA/apg/practices/grid-and-table-properties/grid-and-table-properties-practice.md
+++ b/ARIA/apg/practices/grid-and-table-properties/grid-and-table-properties-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -508,6 +507,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md b/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md
index ed4a2586f..0239c7968 100644
--- a/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md
+++ b/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -189,6 +188,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/keyboard-interface/keyboard-interface-practice.md b/ARIA/apg/practices/keyboard-interface/keyboard-interface-practice.md
index 3aafd6f06..64bcd3be5 100644
--- a/ARIA/apg/practices/keyboard-interface/keyboard-interface-practice.md
+++ b/ARIA/apg/practices/keyboard-interface/keyboard-interface-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -748,6 +747,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
index 02e0ff7dd..e8715400b 100644
--- a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
+++ b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -475,6 +474,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/names-and-descriptions/names-and-descriptions-practice.md b/ARIA/apg/practices/names-and-descriptions/names-and-descriptions-practice.md
index df2d48e4b..168176b4e 100644
--- a/ARIA/apg/practices/names-and-descriptions/names-and-descriptions-practice.md
+++ b/ARIA/apg/practices/names-and-descriptions/names-and-descriptions-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -1841,6 +1840,8 @@ subscribe to our newsletter
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/practices.md b/ARIA/apg/practices/practices.md
index 88fc283a3..bcdb0a534 100644
--- a/ARIA/apg/practices/practices.md
+++ b/ARIA/apg/practices/practices.md
@@ -26,7 +26,6 @@ lang: en
 
 <script src="../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -145,6 +144,8 @@ lang: en
   
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/range-related-properties/range-related-properties-practice.md b/ARIA/apg/practices/range-related-properties/range-related-properties-practice.md
index 433cea4c7..4b94aa747 100644
--- a/ARIA/apg/practices/range-related-properties/range-related-properties-practice.md
+++ b/ARIA/apg/practices/range-related-properties/range-related-properties-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -378,6 +377,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/read-me-first/read-me-first-practice.md b/ARIA/apg/practices/read-me-first/read-me-first-practice.md
index d439d57a3..3ce8c21c3 100644
--- a/ARIA/apg/practices/read-me-first/read-me-first-practice.md
+++ b/ARIA/apg/practices/read-me-first/read-me-first-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -135,6 +134,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/ARIA/apg/practices/structural-roles/structural-roles-practice.md b/ARIA/apg/practices/structural-roles/structural-roles-practice.md
index 325b186f2..a5d2b7980 100644
--- a/ARIA/apg/practices/structural-roles/structural-roles-practice.md
+++ b/ARIA/apg/practices/structural-roles/structural-roles-practice.md
@@ -25,7 +25,6 @@ lang: en
 
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
-<script src="../../../../content-assets/wai-aria-practices/shared/js/skipto.js"></script>
 
 
 <link 
@@ -271,6 +270,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     </div>
   
 </div>
-<script 
+<script
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+  data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+
diff --git a/_external/aria-practices b/_external/aria-practices
index 7f54d9620..81d807dfa 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 7f54d9620e32231021aad607b7af7eeee5c24f54
+Subproject commit 81d807dfa6dc0eea7f455dfd540af0c363845274
diff --git a/_external/data b/_external/data
index c43ba511e..9ca722637 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit c43ba511e8e79326b7271016d9cde979ac65f0f1
+Subproject commit 9ca7226375cd053703753a8b9bc0a3ebfc1524a3
diff --git a/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv b/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv
index 973e524f4..ed19b1025 100644
--- a/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv
+++ b/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv
@@ -18,7 +18,7 @@
 "aria-flowto","0","0"
 "aria-grabbed","0","0"
 "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button  Using aria-activedescendant","Example: Actions Menu Button  Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar"
-"aria-hidden","0","13","Example: Button  (IDL Version)","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar"
+"aria-hidden","0","16","Example: Button  (IDL Version)","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar"
 "aria-invalid","0","0"
 "aria-keyshortcuts","0","0"
 "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel  with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview"
diff --git a/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv b/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv
index 9a3a1ea18..104fad9ec 100644
--- a/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv
+++ b/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv
@@ -46,7 +46,7 @@
 "meter","2","1","Guidance: Meter Pattern","Guidance: Range properties with meter","Example: Meter"
 "navigation","5","3","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation","Guidance: Navigation","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark"
 "none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview"
-"note","0","0"
+"note","37","0","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note"
 "option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox"
 "paragraph","0","0"
 "presentation","5","0","Guidance: Hiding Semantics with the presentation Role","Guidance: Common Uses of Role presentation","Guidance: Effects of Role presentation","Guidance: Conditions That Cause Role presentation to be Ignored","Guidance: Example Demonstrating Effects of the presentation Role"
diff --git a/content-assets/wai-aria-practices/patterns/table/examples/css/sortable-table.css b/content-assets/wai-aria-practices/patterns/table/examples/css/sortable-table.css
index c00d6bfcd..c8921ae95 100644
--- a/content-assets/wai-aria-practices/patterns/table/examples/css/sortable-table.css
+++ b/content-assets/wai-aria-practices/patterns/table/examples/css/sortable-table.css
@@ -24,7 +24,6 @@ table.sortable th:nth-child(5) {
 }
 
 table.sortable th button {
-  position: absolute;
   padding: 4px;
   margin: 1px;
   font-size: 100%;
diff --git a/content-assets/wai-aria-practices/shared/js/skipto.js b/content-assets/wai-aria-practices/shared/js/skipto.js
index 29134ff41..ee0274a06 100644
--- a/content-assets/wai-aria-practices/shared/js/skipto.js
+++ b/content-assets/wai-aria-practices/shared/js/skipto.js
@@ -1,117 +1,117 @@
-/* ========================================================================
- * Version: 5.1.6
- * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
- * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
- * All rights reserved.
- * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
- * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *
- * Documenation: https://skipto-landmarks-headings.github.io/page-script-5
- * Code: https://github.com/skipto-landmarks-headings/page-script-5
- * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
- * ======================================================================== */
-
-(function () {
-  'use strict';
-
-  /*
-  *   debug.js
-  *
-  *   Usage
-  *     import DebugLogging from './debug.js';
-  *     const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
-  *     ...
-  *     if (debug.flag) debug.log('myMessage');
-  *
-  *   Notes
-  *     new DebugLogging() - calling the constructor with no arguments results
-  *                   in debug.flag set to false and debug.label set to 'debug';
-  *                   constructor accepts 0, 1 or 2 arguments in any order
-  *                   @param flag [optional] {boolean} - sets debug.flag
-  *                   @param label [optional] {string} - sets debug.label
-  *   Properties
-  *     debug.flag    {boolean} allows you to switch debug logging on or off;
-  *                   default value is false
-  *     debug.label   {string} rendered as a prefix to each log message;
-  *                   default value is 'debug'
-  *   Methods
-  *     debug.log        calls console.log with label prefix and message
-  *                      @param message {object} - console.log calls toString()
-  *                      @param spaceAbove [optional] {boolean}
-  *
-  *     debug.tag        outputs tagName and textContent of DOM element
-  *                      @param node {DOM node reference} - usually an HTMLElement
-  *                      @param spaceAbove [optional] {boolean}
-  *
-  *     debug.separator  outputs only debug.label and a series of hyphens
-  *                      @param spaceAbove [optional] {boolean}
-  */
-
-  class DebugLogging {
-    constructor (...args) {
-      // Default values for cases where fewer than two arguments are provided
-      this._flag = false;
-      this._label = 'debug';
-
-      // The constructor may be called with zero, one or two arguments. If two
-      // arguments, they can be in any order: one is assumed to be the boolean
-      // value for '_flag' and the other one the string value for '_label'.
-      for (const [index, arg] of args.entries()) {
-        if (index < 2) {
-          switch (typeof arg) {
-            case 'boolean':
-              this._flag = arg;
-              break;
-            case 'string':
-              this._label = arg;
-              break;
-          }
-        }
-      }
-    }
-
-    get flag () { return this._flag; }
-
-    set flag (value) {
-      if (typeof value === 'boolean') {
-        this._flag = value;
-      }
-    }
-
-    get label () { return this._label; }
-
-    set label (value) {
-      if (typeof value === 'string') {
-        this._label = value;
-      }
-    }
-
-    log (message, spaceAbove) {
-      const newline = spaceAbove ? '\n' : '';
-      console.log(`${newline}[${this._label}] ${message}`);
-    }
-
-    tag (node, spaceAbove) {
-      if (node && node.tagName) {
-        const text = node.textContent.trim().replace(/\s+/g, ' ');
-        this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
-      }
-    }
-
-    separator (spaceAbove) {
-      this.log('-----------------------------', spaceAbove);
-    }
-
-  }
-
+/* ========================================================================
+ * Version: 5.2.1
+ * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
+ * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
+ * All rights reserved.
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+ * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+ * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Documenation: https://skipto-landmarks-headings.github.io/page-script-5
+ * Code: https://github.com/skipto-landmarks-headings/page-script-5
+ * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
+ * ======================================================================== */
+
+(function () {
+  'use strict';
+
+  /*
+  *   debug.js
+  *
+  *   Usage
+  *     import DebugLogging from './debug.js';
+  *     const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
+  *     ...
+  *     if (debug.flag) debug.log('myMessage');
+  *
+  *   Notes
+  *     new DebugLogging() - calling the constructor with no arguments results
+  *                   in debug.flag set to false and debug.label set to 'debug';
+  *                   constructor accepts 0, 1 or 2 arguments in any order
+  *                   @param flag [optional] {boolean} - sets debug.flag
+  *                   @param label [optional] {string} - sets debug.label
+  *   Properties
+  *     debug.flag    {boolean} allows you to switch debug logging on or off;
+  *                   default value is false
+  *     debug.label   {string} rendered as a prefix to each log message;
+  *                   default value is 'debug'
+  *   Methods
+  *     debug.log        calls console.log with label prefix and message
+  *                      @param message {object} - console.log calls toString()
+  *                      @param spaceAbove [optional] {boolean}
+  *
+  *     debug.tag        outputs tagName and textContent of DOM element
+  *                      @param node {DOM node reference} - usually an HTMLElement
+  *                      @param spaceAbove [optional] {boolean}
+  *
+  *     debug.separator  outputs only debug.label and a series of hyphens
+  *                      @param spaceAbove [optional] {boolean}
+  */
+
+  class DebugLogging {
+    constructor (...args) {
+      // Default values for cases where fewer than two arguments are provided
+      this._flag = false;
+      this._label = 'debug';
+
+      // The constructor may be called with zero, one or two arguments. If two
+      // arguments, they can be in any order: one is assumed to be the boolean
+      // value for '_flag' and the other one the string value for '_label'.
+      for (const [index, arg] of args.entries()) {
+        if (index < 2) {
+          switch (typeof arg) {
+            case 'boolean':
+              this._flag = arg;
+              break;
+            case 'string':
+              this._label = arg;
+              break;
+          }
+        }
+      }
+    }
+
+    get flag () { return this._flag; }
+
+    set flag (value) {
+      if (typeof value === 'boolean') {
+        this._flag = value;
+      }
+    }
+
+    get label () { return this._label; }
+
+    set label (value) {
+      if (typeof value === 'string') {
+        this._label = value;
+      }
+    }
+
+    log (message, spaceAbove) {
+      const newline = spaceAbove ? '\n' : '';
+      console.log(`${newline}[${this._label}] ${message}`);
+    }
+
+    tag (node, spaceAbove) {
+      if (node && node.tagName) {
+        const text = node.textContent.trim().replace(/\s+/g, ' ');
+        this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
+      }
+    }
+
+    separator (spaceAbove) {
+      this.log('-----------------------------', spaceAbove);
+    }
+
+  }
+
   /* style.js */
 
   /* Constants */
-  const debug$5 = new DebugLogging('style', false);
-  debug$5.flag = false;
+  const debug$6 = new DebugLogging('style', false);
+  debug$6.flag = false;
 
   const styleTemplate = document.createElement('template');
   styleTemplate.innerHTML = `
@@ -229,10 +229,11 @@ $skipToId [role="menuitem"] .label {
   font-size: 100%;
   font-weight: normal;
   color: $menuTextColor;
-  display: inline-block;
   background-color: $menuBackgroundColor;
+  display: inline-block;
   line-height: inherit;
   display: inline-block;
+  white-space: nowrap;
 }
 
 $skipToId [role="menuitem"] .level {
@@ -244,7 +245,6 @@ $skipToId [role="menuitem"] .label {
   text-align: left;
   margin: 0;
   padding: 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -532,452 +532,452 @@ $skipToId [role="menuitem"]:focus .label {
     styleNode.id = `${skipToId}-style`;
     const headNode = document.getElementsByTagName('head')[0];
     headNode.appendChild(styleNode);
-  }
-
-  /* utils.js */
-
-  /* Constants */
-  const debug$4 = new DebugLogging('Utils', false);
-  debug$4.flag = false;
-
-
-  /*
-   * @function getAttributeValue
-   * 
-   * @desc Return attribute value if present on element,
-   *       otherwise return empty string.
-   *
-   * @returns {String} see @desc
-   */
-  function getAttributeValue (element, attribute) {
-    let value = element.getAttribute(attribute);
-    return (value === null) ? '' : normalize(value);
-  }
-
-  /*
-   * @function normalize
-   *
-   * @desc Trim leading and trailing whitespace and condense all
-   *       internal sequences of whitespace to a single space. Adapted from
-   *       Mozilla documentation on String.prototype.trim polyfill. Handles
-   *       BOM and NBSP characters.
-   *
-   * @return {String}  see @desc
-   */
-  function normalize (s) {
-    let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
-    return s.replace(rtrim, '').replace(/\s+/g, ' ');
-  }
-
-  /**
-   * @fuction isNotEmptyString
-   *
-   * @desc Returns true if the string has content, otherwise false
-   *
-   * @param {Boolean}  see @desc
-   */
-  function isNotEmptyString (str) {
-    return (typeof str === 'string') && str.length && str.trim() && str !== "&nbsp;";
-  }
-
-  /**
-   * @fuction isVisible
-   *
-   * @desc Returns true if the element is visible in the graphical rendering 
-   *
-   * @param {node}  elem  - DOM element node of a labelable element
-   */
-  function isVisible (element) {
-
-    function isDisplayNone(el) {
-      if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
-        return false;
-      }
-
-      if (el.hasAttribute('hidden')) {
-        return true;
-      }
-
-      const style = window.getComputedStyle(el, null);
-      const display = style.getPropertyValue("display");
-      if (display === 'none') { 
-        return true;
-      }
-
-      // check ancestors for display none
-      if (el.parentNode) {
-        return isDisplayNone(el.parentNode);
-      }
-
-      return false;
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    let visibility = computedStyle.getPropertyValue('visibility');
-    if ((visibility === 'hidden') || (visibility === 'collapse')) {
-      return false;
-    }
-
-    return !isDisplayNone(element);
-  }
-
-  /*
-  *   namefrom.js
-  */
-
-  /* constants */
-
-  const debug$3 = new DebugLogging('nameFrom', false);
-  debug$3.flag = false;
-
-  //
-  // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
-
-  /*
-  *   @function  isDisplayNone 
-  *
-  *   @desc Returns true if the element or parent element has set the CSS
-  *         display property to none or has the hidden attribute,
-  *         otherwise false
-  *
-  *   @param  {Object}  node  - a DOM node
-  *
-  *   @returns  {Boolean} see @desc 
-  */
-
-  function isDisplayNone (node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-
-      if (node.hasAttribute('hidden')) {
-        return true;
-      }
-
-      // aria-hidden attribute with the value "true" is an same as 
-      // setting the hidden attribute for name calcuation
-      if (node.hasAttribute('aria-hidden')) {
-        if (node.getAttribute('aria-hidden').toLowerCase()  === 'true') {
-          return true;
-        }
-      }
-
-      const style = window.getComputedStyle(node, null);
-
-      const display = style.getPropertyValue("display");
-
-      if (display) {
-        return display === 'none';
-      }
-    }
-    return false;
-  }
-
-  /*
-  *   @function isVisibilityHidden 
-  *   
-  *   @desc Returns true if the node (or it's parrent) has the CSS visibility 
-  *         property set to "hidden" or "collapse", otherwise false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function isVisibilityHidden(node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-      node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const style = window.getComputedStyle(node, null);
-
-      const visibility = style.getPropertyValue("visibility");
-      if (visibility) {
-        return (visibility === 'hidden') || (visibility === 'collapse');
-      }
-    }
-    return false;
-  }
-
-  /*
-  *   @function isAriaHiddenFalse 
-  *   
-  *   @desc Returns true if the node has the aria-hidden property set to
-  *         "false", otherwise false.  
-  *         NOTE: This function is important in the accessible namce 
-  *               calculation, since content hidden with a CSS technique 
-  *               can be included in the accessible name calculation when 
-  *               aria-hidden is set to false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function isAriaHIddenFalse(node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return (node.hasAttribute('aria-hidden') && 
-          (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
-    }
-
-    return false;
-  }
-
-  /*
-  *   @function includeContentInName 
-  *   
-  *   @desc Checks the CSS display and hidden properties, and
-  *         the aria-hidden property to see if the content
-  *         should be included in the accessible name
-  *        calculation.  Returns true if it should be 
-  *         included, otherwise false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function includeContentInName(node) {
-    const flag = isAriaHIddenFalse(node) || 
-      (!isVisibilityHidden(node) && 
-      !isDisplayNone(node));
-    return flag;
-  }
-
-  /*
-  *   @function getNodeContents
-  *
-  *   @desc  Recursively process element and text nodes by aggregating
-  *          their text values for an ARIA accessible name or description
-  *          calculation.
-  *
-  *          NOTE: This includes special handling of elements with 'alt' 
-  *                text and embedded controls.
-  *  
-  *  @param {Object}  node  - A DOM node
-  * 
-  *  @return {String}  The text content for an accessible name or description
-  */
-  function getNodeContents (node) {
-    let contents = '';
-    let nc;
-    let arr = [];
-
-    switch (node.nodeType) {
-      case Node.ELEMENT_NODE:
-        // If aria-label is present, node recursion stops and
-        // aria-label value is returned
-        if (node.hasAttribute('aria-label')) {
-          if (includeContentInName(node)) {
-            contents = node.getAttribute('aria-label');
-          }
-        }
-        else {
-          if (node instanceof HTMLSlotElement) {
-            // if no slotted elements, check for default slotted content
-            const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
-            assignedNodes.forEach( assignedNode => {
-              nc = getNodeContents(assignedNode);
-              if (nc.length) arr.push(nc);
-            });
-            contents = (arr.length) ? arr.join(' ') : '';
-          } else {
-            if (couldHaveAltText(node) && includeContentInName(node)) {
-              contents = getAttributeValue(node, 'alt');
-            }
-            else {
-              if (node.hasChildNodes()) {
-                let children = Array.from(node.childNodes);
-                children.forEach( child => {
-                  nc = getNodeContents(child);
-                  if (nc.length) arr.push(nc);
-                });
-                contents = (arr.length) ? arr.join(' ') : '';
-              }
-            }
-            // For all branches of the ELEMENT_NODE case...
-          }
-        }
-        contents = addCssGeneratedContent(node, contents);
-        break;
-
-      case Node.TEXT_NODE:
-        if (includeContentInName(node)) {
-          contents = normalize(node.textContent);
-        }
-        break;
-    }
-
-    return contents;
-  }
-
-  /*
-  *   @function couldHaveAltText
-  *   
-  *   @desc  Based on HTML5 specification, returns true if 
-  *          the element could have an 'alt' attribute,
-  *          otherwise false.
-  * 
-  *   @param  {Object}  element  - DOM eleemnt node
-  *
-  *   @return {Boolean}  see @desc
-  */
-  function couldHaveAltText (element) {
-    let tagName = element.tagName.toLowerCase();
-
-    switch (tagName) {
-      case 'img':
-      case 'area':
-        return true;
-      case 'input':
-        return (element.type && element.type === 'image');
-    }
-
-    return false;
-  }
-
-  /*
-  *   @function addCssGeneratedContent
-  *
-  *   @desc Adds CSS-generated content for pseudo-elements
-  *         :before and :after. According to the CSS spec, test that content 
-  *         value is other than the default computed value of 'none'.
-  * 
-  *         Note: Even if an author specifies content: 'none', because browsers 
-  *               add the double-quote character to the beginning and end of 
-  *               computed string values, the result cannot and will not be 
-  *               equal to 'none'.
-  *
-  *
-  *   @param {Object}  element   - DOM node element
-  *   @param {String}  contents  - Text content for DOM node
-  *
-  *   @returns  {String}  see @desc
-  *
-  */
-  function addCssGeneratedContent (element, contents) {
-
-    let result = contents,
-        prefix = getComputedStyle(element, ':before').content,
-        suffix = getComputedStyle(element, ':after').content;
-
-    if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
-      result = prefix.substring(1, (prefix.length-1)) + result;
-    }
-
-    if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
-      result = result + suffix.substring(1, (suffix.length-1)) ;
-    }
-
-    return result;
-  }
-
-  /* accName.js */
-
-  /* Constants */
-  const debug$2 = new DebugLogging('accName', false);
-  debug$2.flag = false;
-
-  /**
-   *   @fuction getAccessibleName
-   *
-   *   @desc Returns the accessible name for an heading or landamrk 
-   *
-   *   @paramn {Object}   dom      - Document of the current element
-   *   @param  {node}     element  - DOM element node for either a heading or
-   *                               landmark
-   *   @param  {Boolean}  fromContent  - if true will compute name from content
-   * 
-   *   @return {String} The accessible name for the landmark or heading element
-   */
-
-  function getAccessibleName (doc, element, fromContent=false) {
-    let accName = '';
-
-    accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
-
-    if (accName === '' && element.hasAttribute('aria-label')) {
-      accName =  element.getAttribute('aria-label').trim();
-    }
-
-    if (accName === '' && fromContent) {
-      accName =  getNodeContents(element);
-    }
-
-    if (accName === '' && element.title.trim() !== '') {
-      accName = element.title.trim();
-    }
-
-    return accName;
-  }
-
-  /*
-  *   @function nameFromAttributeIdRefs
-  *
-  *   @desc Get the value of attrName on element (a space-
-  *         separated list of IDREFs), visit each referenced element in the order it
-  *         appears in the list and obtain its accessible name (skipping recursive
-  *         aria-labelledby or aria-describedby calculations), and return an object
-  *         with name property set to a string that is a space-separated concatena-
-  *         tion of those results if any, otherwise return empty string.
-  *
-  *   @param {Object}  doc       -  Browser document object
-  *   @param {Object}  element   -  DOM element node
-  *   @param {String}  attribute -  Attribute name (e.g. "aria-labelledby", "aria-describedby",
-  *                                 or "aria-errormessage")
-  *
-  *   @returns {String} see @desc 
-  */
-  function nameFromAttributeIdRefs (doc, element, attribute) {
-    const value = getAttributeValue(element, attribute);
-    const arr = [];
-
-    if (value.length) {
-      const idRefs = value.split(' ');
-
-      for (let i = 0; i < idRefs.length; i++) {
-        const refElement = doc.getElementById(idRefs[i]);
-        if (refElement) {
-          const accName = getNodeContents(refElement);
-          if (accName && accName.length) arr.push(accName);
-        }
-      }
-    }
-
-    if (arr.length) {
-      return arr.join(' ');
-    }
-
-    return '';
-  }
-
+  }
+
+  /* utils.js */
+
+  /* Constants */
+  const debug$5 = new DebugLogging('Utils', false);
+  debug$5.flag = false;
+
+
+  /*
+   * @function getAttributeValue
+   * 
+   * @desc Return attribute value if present on element,
+   *       otherwise return empty string.
+   *
+   * @returns {String} see @desc
+   */
+  function getAttributeValue (element, attribute) {
+    let value = element.getAttribute(attribute);
+    return (value === null) ? '' : normalize(value);
+  }
+
+  /*
+   * @function normalize
+   *
+   * @desc Trim leading and trailing whitespace and condense all
+   *       internal sequences of whitespace to a single space. Adapted from
+   *       Mozilla documentation on String.prototype.trim polyfill. Handles
+   *       BOM and NBSP characters.
+   *
+   * @return {String}  see @desc
+   */
+  function normalize (s) {
+    let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+    return s.replace(rtrim, '').replace(/\s+/g, ' ');
+  }
+
+  /**
+   * @fuction isNotEmptyString
+   *
+   * @desc Returns true if the string has content, otherwise false
+   *
+   * @param {Boolean}  see @desc
+   */
+  function isNotEmptyString (str) {
+    return (typeof str === 'string') && str.length && str.trim() && str !== "&nbsp;";
+  }
+
+  /**
+   * @fuction isVisible
+   *
+   * @desc Returns true if the element is visible in the graphical rendering 
+   *
+   * @param {node}  elem  - DOM element node of a labelable element
+   */
+  function isVisible (element) {
+
+    function isDisplayNone(el) {
+      if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
+        return false;
+      }
+
+      if (el.hasAttribute('hidden')) {
+        return true;
+      }
+
+      const style = window.getComputedStyle(el, null);
+      const display = style.getPropertyValue("display");
+      if (display === 'none') { 
+        return true;
+      }
+
+      // check ancestors for display none
+      if (el.parentNode) {
+        return isDisplayNone(el.parentNode);
+      }
+
+      return false;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    let visibility = computedStyle.getPropertyValue('visibility');
+    if ((visibility === 'hidden') || (visibility === 'collapse')) {
+      return false;
+    }
+
+    return !isDisplayNone(element);
+  }
+
+  /*
+  *   namefrom.js
+  */
+
+  /* constants */
+
+  const debug$4 = new DebugLogging('nameFrom', false);
+  debug$4.flag = false;
+
+  //
+  // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
+
+  /*
+  *   @function  isDisplayNone 
+  *
+  *   @desc Returns true if the element or parent element has set the CSS
+  *         display property to none or has the hidden attribute,
+  *         otherwise false
+  *
+  *   @param  {Object}  node  - a DOM node
+  *
+  *   @returns  {Boolean} see @desc 
+  */
+
+  function isDisplayNone (node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+
+      if (node.hasAttribute('hidden')) {
+        return true;
+      }
+
+      // aria-hidden attribute with the value "true" is an same as 
+      // setting the hidden attribute for name calcuation
+      if (node.hasAttribute('aria-hidden')) {
+        if (node.getAttribute('aria-hidden').toLowerCase()  === 'true') {
+          return true;
+        }
+      }
+
+      const style = window.getComputedStyle(node, null);
+
+      const display = style.getPropertyValue("display");
+
+      if (display) {
+        return display === 'none';
+      }
+    }
+    return false;
+  }
+
+  /*
+  *   @function isVisibilityHidden 
+  *   
+  *   @desc Returns true if the node (or it's parrent) has the CSS visibility 
+  *         property set to "hidden" or "collapse", otherwise false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function isVisibilityHidden(node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const style = window.getComputedStyle(node, null);
+
+      const visibility = style.getPropertyValue("visibility");
+      if (visibility) {
+        return (visibility === 'hidden') || (visibility === 'collapse');
+      }
+    }
+    return false;
+  }
+
+  /*
+  *   @function isAriaHiddenFalse 
+  *   
+  *   @desc Returns true if the node has the aria-hidden property set to
+  *         "false", otherwise false.  
+  *         NOTE: This function is important in the accessible namce 
+  *               calculation, since content hidden with a CSS technique 
+  *               can be included in the accessible name calculation when 
+  *               aria-hidden is set to false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function isAriaHIddenFalse(node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return (node.hasAttribute('aria-hidden') && 
+          (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
+    }
+
+    return false;
+  }
+
+  /*
+  *   @function includeContentInName 
+  *   
+  *   @desc Checks the CSS display and hidden properties, and
+  *         the aria-hidden property to see if the content
+  *         should be included in the accessible name
+  *        calculation.  Returns true if it should be 
+  *         included, otherwise false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function includeContentInName(node) {
+    const flag = isAriaHIddenFalse(node) || 
+      (!isVisibilityHidden(node) && 
+      !isDisplayNone(node));
+    return flag;
+  }
+
+  /*
+  *   @function getNodeContents
+  *
+  *   @desc  Recursively process element and text nodes by aggregating
+  *          their text values for an ARIA accessible name or description
+  *          calculation.
+  *
+  *          NOTE: This includes special handling of elements with 'alt' 
+  *                text and embedded controls.
+  *  
+  *  @param {Object}  node  - A DOM node
+  * 
+  *  @return {String}  The text content for an accessible name or description
+  */
+  function getNodeContents (node) {
+    let contents = '';
+    let nc;
+    let arr = [];
+
+    switch (node.nodeType) {
+      case Node.ELEMENT_NODE:
+        // If aria-label is present, node recursion stops and
+        // aria-label value is returned
+        if (node.hasAttribute('aria-label')) {
+          if (includeContentInName(node)) {
+            contents = node.getAttribute('aria-label');
+          }
+        }
+        else {
+          if (node instanceof HTMLSlotElement) {
+            // if no slotted elements, check for default slotted content
+            const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
+            assignedNodes.forEach( assignedNode => {
+              nc = getNodeContents(assignedNode);
+              if (nc.length) arr.push(nc);
+            });
+            contents = (arr.length) ? arr.join(' ') : '';
+          } else {
+            if (couldHaveAltText(node) && includeContentInName(node)) {
+              contents = getAttributeValue(node, 'alt');
+            }
+            else {
+              if (node.hasChildNodes()) {
+                let children = Array.from(node.childNodes);
+                children.forEach( child => {
+                  nc = getNodeContents(child);
+                  if (nc.length) arr.push(nc);
+                });
+                contents = (arr.length) ? arr.join(' ') : '';
+              }
+            }
+            // For all branches of the ELEMENT_NODE case...
+          }
+        }
+        contents = addCssGeneratedContent(node, contents);
+        break;
+
+      case Node.TEXT_NODE:
+        if (includeContentInName(node)) {
+          contents = normalize(node.textContent);
+        }
+        break;
+    }
+
+    return contents;
+  }
+
+  /*
+  *   @function couldHaveAltText
+  *   
+  *   @desc  Based on HTML5 specification, returns true if 
+  *          the element could have an 'alt' attribute,
+  *          otherwise false.
+  * 
+  *   @param  {Object}  element  - DOM eleemnt node
+  *
+  *   @return {Boolean}  see @desc
+  */
+  function couldHaveAltText (element) {
+    let tagName = element.tagName.toLowerCase();
+
+    switch (tagName) {
+      case 'img':
+      case 'area':
+        return true;
+      case 'input':
+        return (element.type && element.type === 'image');
+    }
+
+    return false;
+  }
+
+  /*
+  *   @function addCssGeneratedContent
+  *
+  *   @desc Adds CSS-generated content for pseudo-elements
+  *         :before and :after. According to the CSS spec, test that content 
+  *         value is other than the default computed value of 'none'.
+  * 
+  *         Note: Even if an author specifies content: 'none', because browsers 
+  *               add the double-quote character to the beginning and end of 
+  *               computed string values, the result cannot and will not be 
+  *               equal to 'none'.
+  *
+  *
+  *   @param {Object}  element   - DOM node element
+  *   @param {String}  contents  - Text content for DOM node
+  *
+  *   @returns  {String}  see @desc
+  *
+  */
+  function addCssGeneratedContent (element, contents) {
+
+    let result = contents,
+        prefix = getComputedStyle(element, ':before').content,
+        suffix = getComputedStyle(element, ':after').content;
+
+    if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
+      result = prefix.substring(1, (prefix.length-1)) + result;
+    }
+
+    if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
+      result = result + suffix.substring(1, (suffix.length-1)) ;
+    }
+
+    return result;
+  }
+
+  /* accName.js */
+
+  /* Constants */
+  const debug$3 = new DebugLogging('accName', false);
+  debug$3.flag = false;
+
+  /**
+   *   @fuction getAccessibleName
+   *
+   *   @desc Returns the accessible name for an heading or landamrk 
+   *
+   *   @paramn {Object}   dom      - Document of the current element
+   *   @param  {node}     element  - DOM element node for either a heading or
+   *                               landmark
+   *   @param  {Boolean}  fromContent  - if true will compute name from content
+   * 
+   *   @return {String} The accessible name for the landmark or heading element
+   */
+
+  function getAccessibleName (doc, element, fromContent=false) {
+    let accName = '';
+
+    accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
+
+    if (accName === '' && element.hasAttribute('aria-label')) {
+      accName =  element.getAttribute('aria-label').trim();
+    }
+
+    if (accName === '' && fromContent) {
+      accName =  getNodeContents(element);
+    }
+
+    if (accName === '' && element.title.trim() !== '') {
+      accName = element.title.trim();
+    }
+
+    return accName;
+  }
+
+  /*
+  *   @function nameFromAttributeIdRefs
+  *
+  *   @desc Get the value of attrName on element (a space-
+  *         separated list of IDREFs), visit each referenced element in the order it
+  *         appears in the list and obtain its accessible name (skipping recursive
+  *         aria-labelledby or aria-describedby calculations), and return an object
+  *         with name property set to a string that is a space-separated concatena-
+  *         tion of those results if any, otherwise return empty string.
+  *
+  *   @param {Object}  doc       -  Browser document object
+  *   @param {Object}  element   -  DOM element node
+  *   @param {String}  attribute -  Attribute name (e.g. "aria-labelledby", "aria-describedby",
+  *                                 or "aria-errormessage")
+  *
+  *   @returns {String} see @desc 
+  */
+  function nameFromAttributeIdRefs (doc, element, attribute) {
+    const value = getAttributeValue(element, attribute);
+    const arr = [];
+
+    if (value.length) {
+      const idRefs = value.split(' ');
+
+      for (let i = 0; i < idRefs.length; i++) {
+        const refElement = doc.getElementById(idRefs[i]);
+        if (refElement) {
+          const accName = getNodeContents(refElement);
+          if (accName && accName.length) arr.push(accName);
+        }
+      }
+    }
+
+    if (arr.length) {
+      return arr.join(' ');
+    }
+
+    return '';
+  }
+
   /* landmarksHeadings.js */
 
   /* Constants */
-  const debug$1 = new DebugLogging('landmarksHeadings', false);
-  debug$1.flag = false;
+  const debug$2 = new DebugLogging('landmarksHeadings', false);
+  debug$2.flag = false;
 
   const skipableElements = [
     'base',
@@ -1789,13 +1789,13 @@ $skipToId [role="menuitem"]:focus .label {
       }
     }
     return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements);
-  }
-
+  }
+
   /* skiptoMenuButton.js */
 
   /* Constants */
-  const debug = new DebugLogging('SkipToButton', false);
-  debug.flag = false;
+  const debug$1 = new DebugLogging('SkipToButton', false);
+  debug$1.flag = false;
 
   /**
    * @class SkiptoMenuButton
@@ -2530,7 +2530,11 @@ $skipToId [role="menuitem"]:focus .label {
           }
         }
       }
-  }
+  }
+
+  /* constants */
+  const debug = new DebugLogging('skipto', false);
+  debug.flag = true;
 
   (function() {
 
@@ -2554,9 +2558,9 @@ $skipToId [role="menuitem"]:focus .label {
         altShortcut: '0', // default shortcut key is the number zero
         optionShortcut: 'º', // default shortcut key character associated with option+0 on mac 
         attachElement: 'body',
-        displayOption: 'popup', // options: static (default), popup, fixed
+        displayOption: 'popup', // Line edited by pre-build script, fixed
         // container element, use containerClass for custom styling
-        containerElement: 'div',
+        containerElement: 'nav',
         containerRole: '',
         customClass: '',
 
@@ -2589,7 +2593,7 @@ $skipToId [role="menuitem"]:focus .label {
         headings: 'main h1 h2',
 
         // Place holders for configuration
-        colorTheme: 'aria',
+        colorTheme: '',
         fontFamily: '',
         fontSize: '',
         positionLeft: '',
@@ -2694,7 +2698,7 @@ $skipToId [role="menuitem"]:focus .label {
        * @param  {object} config - Reference to configuration object
        *                           can be undefined
        */
-      init: function(config) {
+      init: function(globalConfig) {
         let node;
 
         // Check if skipto is already loaded
@@ -2706,9 +2710,13 @@ $skipToId [role="menuitem"]:focus .label {
         document.skipToHasBeenLoaded = true;
 
         let attachElement = document.body;
-        if (config) {
-          this.setupConfig(config);
+
+        if (globalConfig) {
+          this.config = this.setupConfigFromGlobal(this.config, globalConfig);
         }
+
+        this.config = this.setupConfigFromDataAttribute(this.config);
+
         if (typeof this.config.attachElement === 'string') {
           node = document.querySelector(this.config.attachElement);
           if (node && node.nodeType === Node.ELEMENT_NODE) {
@@ -2722,45 +2730,92 @@ $skipToId [role="menuitem"]:focus .label {
       },
 
       /*
-       * @method setupConfig
+       * @method setupConfigFromGlobal
        *
-       * @desc Get configuration information from user configuration to change 
+       * @desc Get configuration information from author configuration to change
        *       default settings 
        *
-       * @param  {object}  appConfig - Javascript object with configuration information
+       * @param  {object}  config       - Javascript object with default configuration information
+       * @param  {object}  globalConfig - Javascript object with configuration information oin a global variable
        */
-      setupConfig: function(appConfig) {
-        let appConfigSettings;
+      setupConfigFromGlobal: function(config, globalConfig) {
+        let authorConfig = {};
         // Support version 4.1 configuration object structure 
         // If found use it
-        if ((typeof appConfig.settings === 'object') && 
-            (typeof appConfig.settings.skipTo === 'object')) {
-          appConfigSettings = appConfig.settings.skipTo;
+        if ((typeof globalConfig.settings === 'object') &&
+            (typeof globalConfig.settings.skipTo === 'object')) {
+          authorConfig = globalConfig.settings.skipTo;
         }
         else {
           // Version 5.0 removes the requirement for the "settings" and "skipto" properties
           // to reduce the complexity of configuring skipto
-          if ((typeof appConfig === 'undefined') || 
-               (typeof appConfig !== 'object')) {
-            appConfigSettings = {};
+          if (typeof globalConfig === 'object') {
+            authorConfig = globalConfig;
           }
-          else {
-            appConfigSettings = appConfig;
+        }
+
+        for (const name in authorConfig) {
+          //overwrite values of our local config, based on the external config
+          if ((typeof config[name] !== 'undefined') &&
+             ((typeof authorConfig[name] === 'string') &&
+              (authorConfig[name].length > 0 ) ||
+             typeof authorConfig[name] === 'boolean')
+            ) {
+            config[name] = authorConfig[name];
+          } else {
+            console.warn('[SkipTo]: Unsupported or deprecated configuration option in global configuration object: ' + name);
+          }
+        }
+
+        return config;
+      },
+
+      /*
+       * @method setupConfigFromDataAttribute
+       *
+       * @desc Get configuration information from author configuration to change
+       *       default settings
+       *
+       * @param  {object}  config - Javascript object with default configuration information
+       */
+      setupConfigFromDataAttribute: function(config) {
+        let dataConfig = {};
+
+        // Check for data-skipto attribute values for configuration
+        const configElem = document.querySelector('[data-skipto]');
+        if (configElem) {
+          const dataSkiptoValue = configElem.getAttribute('data-skipto');
+          if (dataSkiptoValue) {
+            const values = dataSkiptoValue.split(';');
+            values.forEach( v => {
+              let [prop, value] = v.split(':');
+              if (prop) {
+                prop = prop.trim();
+              }
+              if (value) {
+                value = value.trim();
+              }
+              if (prop && value) {
+                dataConfig[prop] = value;
+              }
+            });
           }
         }
 
-        for (const name in appConfigSettings) {
+        for (const name in dataConfig) {
           //overwrite values of our local config, based on the external config
-          if ((typeof this.config[name] !== 'undefined') &&
-             ((typeof appConfigSettings[name] === 'string') &&
-              (appConfigSettings[name].length > 0 ) ||
-             typeof appConfigSettings[name] === 'boolean')
+          if ((typeof config[name] !== 'undefined') &&
+             ((typeof dataConfig[name] === 'string') &&
+              (dataConfig[name].length > 0 ) ||
+             typeof dataConfig[name] === 'boolean')
             ) {
-            this.config[name] = appConfigSettings[name];
+            config[name] = dataConfig[name];
           } else {
-            console.warn('[SkipTo]: Unsuported or deprecated configuration option "' + name + '".');
+            console.warn('[SkipTo]: Unsupported or deprecated configuration option in data-skipto attribute: ' + name);
           }
         }
+        return config;
+
       }
     };
 
@@ -2768,6 +2823,6 @@ $skipToId [role="menuitem"]:focus .label {
     window.addEventListener('load', function() {
       SkipTo.init(window.SkipToConfig);
     });
-  })();
-
-})();
+  })();
+
+})();
diff --git a/scripts/pre-build/library/formatForJekyll.js b/scripts/pre-build/library/formatForJekyll.js
index c07db62d8..b51492fea 100644
--- a/scripts/pre-build/library/formatForJekyll.js
+++ b/scripts/pre-build/library/formatForJekyll.js
@@ -7,14 +7,30 @@ const formatForJekyll = ({
   content,
   enableSidebar = false,
   githubPath,
-  head = "",
+  head = null,
   footer = null,
 }) => {
   const permalink = `/ARIA/apg/${sitePath}`;
 
+  let headContent = '';
+  let skipToScriptTag = `<script src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"`;
+  let skipToScriptData = null;
+
+  if (head) {
+    skipToScriptData = head.querySelector('script[data-skipto]')?.getAttribute('data-skipto');
+    if (skipToScriptData) skipToScriptTag += `data-skipto="${skipToScriptData}"`;
+
+    // Remove skipto.js script tag in head to avoid loading twice; it's always included through `formattedSkipToScript`
+    const skipToScriptTagToRemove = head.querySelectorAll('script').find(el => el.getAttribute('src').includes('js/skipto.js'));
+    if (skipToScriptTagToRemove) skipToScriptTagToRemove.remove();
+    headContent = head.innerHTML;
+  }
+  skipToScriptTag += '></script>';
+
   // Must be formatted because html which is indented by 4 spaces
   // will be interpreted as a code block by the markdown engine
-  const formattedHead = prettier.format(head, { parser: "html" });
+  const formattedHead = prettier.format(headContent, { parser: "html" });
+  const formattedSkipToScript = prettier.format(skipToScriptTag, { parser: "html" });
 
   return `---
 # This file was generated by scripts/pre-build/library/formatForJekyll.js
@@ -76,9 +92,7 @@ ${
 <div>
 ${content}
 </div>
-<script 
-  src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
-></script>
+${formattedSkipToScript}
 ${/* `, { parser: "html" })} */ ""}`;
 };
 
diff --git a/scripts/pre-build/library/getExampleLastModifiedDate.js b/scripts/pre-build/library/getExampleLastModifiedDate.js
new file mode 100644
index 000000000..632e71807
--- /dev/null
+++ b/scripts/pre-build/library/getExampleLastModifiedDate.js
@@ -0,0 +1,52 @@
+const path = require("path");
+const { exec } = require("child_process");
+const { format } = require("date-fns");
+const { rewriteRelativePath } = require("./rewritePath");
+
+const getExampleLastModifiedDate = async ({ html, sourcePath }) => {
+  const getFileLastModifiedDate = async (sourcePath) => {
+    const output = await new Promise((resolve) => {
+      exec(
+        `git log -1 --pretty="format:%cI" ${path.basename(sourcePath)}`,
+        { cwd: path.dirname(sourcePath) },
+        (error, stdout, stderr) => {
+          resolve(stdout);
+        }
+      );
+    });
+    let date;
+    try {
+      date = new Date(output);
+    } catch (error) {
+      console.error(
+        `Failed to extract a last-modified date for the file "${sourcePath}"`
+      );
+      throw error;
+    }
+    return date;
+  };
+
+  const dependencyFilePaths = html
+    .querySelectorAll("#css_js_files a")
+    .map(
+      (link) =>
+        rewriteRelativePath(link.getAttribute("href"), {
+          onSourcePath: sourcePath,
+        }).sourcePath
+    )
+    .concat(sourcePath);
+
+  const dates = await Promise.all(
+    dependencyFilePaths.map((filePath) => getFileLastModifiedDate(filePath))
+  );
+
+  dates.sort((a, b) => b - a);
+
+  const mostRecent = dates[0];
+
+  const dateFormatted = format(mostRecent, "d MMMM y");
+
+  return dateFormatted;
+};
+
+module.exports = getExampleLastModifiedDate;
diff --git a/scripts/pre-build/library/rewritePath.js b/scripts/pre-build/library/rewritePath.js
index 2f866b40d..3f632a35b 100644
--- a/scripts/pre-build/library/rewritePath.js
+++ b/scripts/pre-build/library/rewritePath.js
@@ -142,7 +142,7 @@ const rewriteRelativePath = (
   const siteRootPath = `${siteRootPathPreHash}${hashFormatted}`;
   const siteRelativePath = `${siteRelativePathPreHash}${queryStringFormatted}${hashFormatted}`;
 
-  return { siteRelativePath, siteRootPath, buildPath };
+  return { siteRelativePath, siteRootPath, sourcePath, buildPath };
 };
 
 module.exports = {
diff --git a/scripts/pre-build/library/transformAboutContent.js b/scripts/pre-build/library/transformAboutContent.js
index 017909e49..b5f8ad573 100644
--- a/scripts/pre-build/library/transformAboutContent.js
+++ b/scripts/pre-build/library/transformAboutContent.js
@@ -33,7 +33,7 @@ const transformAboutContent = async (sourcePath, sourceContents) => {
       removeDuplicateMainTag(html.querySelector("body").innerHTML)
     ),
     enableSidebar,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 
diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js
index f431c8996..c8546049f 100644
--- a/scripts/pre-build/library/transformExample.js
+++ b/scripts/pre-build/library/transformExample.js
@@ -1,14 +1,13 @@
 const fs = require("fs/promises");
 const path = require("path");
-const { exec } = require("child_process");
 const { parse: parseHtml } = require("node-html-parser");
-const { format } = require("date-fns");
 const formatForJekyll = require("./formatForJekyll");
 const { rewriteSourcePath, sourceRoot } = require("./rewritePath");
 const rewriteElementPaths = require("./rewriteElementPaths");
 const removeDuplicateMainTag = require("./removeDuplicateMainTag");
 const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv");
 const removeConflictingCss = require("./removeConflictingCss");
+const getExampleLastModifiedDate = require("./getExampleLastModifiedDate");
 
 const loadNotice = async () => {
   const relativePath = "content/shared/templates/example-usage-warning.html";
@@ -31,28 +30,6 @@ const loadNotice = async () => {
 
 const loadedNotice = loadNotice();
 
-const getLastModifiedDate = async (exampleFilePath) => {
-  const output = await new Promise((resolve) => {
-    exec(
-      `git log -1 --pretty="format:%cI" ${path.basename(exampleFilePath)}`,
-      { cwd: path.dirname(exampleFilePath) },
-      (error, stdout, stderr) => {
-        resolve(stdout);
-      }
-    );
-  });
-  let dateFormatted;
-  try {
-    dateFormatted = format(new Date(output), "d MMMM y");
-  } catch (error) {
-    console.error(
-      `Failed to extract a last-modified date for the file "${exampleFilePath}"`
-    );
-    throw error;
-  }
-  return dateFormatted;
-};
-
 const transformExample = async (sourcePath, sourceContents) => {
   const { sitePath, githubPath } = rewriteSourcePath(sourcePath);
   const html = parseHtml(sourceContents);
@@ -62,7 +39,10 @@ const transformExample = async (sourcePath, sourceContents) => {
 
   removeConflictingCss(html);
 
-  const lastModifiedDateFormatted = await getLastModifiedDate(sourcePath);
+  const lastModifiedDateFormatted = await getExampleLastModifiedDate({
+    html,
+    sourcePath,
+  });
 
   await rewriteElementPaths(html, { onSourcePath: sourcePath });
 
@@ -89,7 +69,7 @@ const transformExample = async (sourcePath, sourceContents) => {
       wrapTablesWithResponsiveDiv(html.querySelector("body").innerHTML)
     ),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
     footer: `
       <div class="example-page-footer">
         <p>${relatedIssuesLink}</p>
diff --git a/scripts/pre-build/library/transformExampleIndex.js b/scripts/pre-build/library/transformExampleIndex.js
index 82f0f653e..db6d6c5de 100644
--- a/scripts/pre-build/library/transformExampleIndex.js
+++ b/scripts/pre-build/library/transformExampleIndex.js
@@ -22,7 +22,7 @@ const transformExampleIndex = async (sourcePath, sourceContents) => {
     githubPath,
     content: removeDuplicateMainTag(html.querySelector("body").innerHTML),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 
diff --git a/scripts/pre-build/library/transformHomepage.js b/scripts/pre-build/library/transformHomepage.js
index 150552099..ead2c2e61 100644
--- a/scripts/pre-build/library/transformHomepage.js
+++ b/scripts/pre-build/library/transformHomepage.js
@@ -111,11 +111,16 @@ const transformHomepage = async (sourcePath, sourceContents) => {
     <div class="bottom-off-white-section off-white-section"></div>
   `;
 
+  // Remove conflicting `img { *` CSS properties; safe to do while the source apg-home.html ONLY has that single rule
+  // defined inside it's `<style>` tag
+  html.querySelector("head").querySelector("style").remove();
+
   return formatForJekyll({
     title: "ARIA Authoring Practices Guide",
     sitePath,
     githubPath,
     content: homepageContent,
+    head: html.querySelector("head"),
   });
 };
 
diff --git a/scripts/pre-build/library/transformPattern.js b/scripts/pre-build/library/transformPattern.js
index 447b65bbc..12b095f97 100644
--- a/scripts/pre-build/library/transformPattern.js
+++ b/scripts/pre-build/library/transformPattern.js
@@ -40,7 +40,7 @@ const transformPattern = async (sourcePath, sourceContents) => {
     githubPath,
     content: removeDuplicateMainTag(html.querySelector("body").innerHTML),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
     footer: "",
   });
 };
diff --git a/scripts/pre-build/library/transformPatternIndex.js b/scripts/pre-build/library/transformPatternIndex.js
index 7fb3923db..29166b0e4 100644
--- a/scripts/pre-build/library/transformPatternIndex.js
+++ b/scripts/pre-build/library/transformPatternIndex.js
@@ -42,7 +42,7 @@ const transformPatternIndex = async (sourcePath, sourceContents) => {
     githubPath,
     content,
     enableSidebar: false,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 
diff --git a/scripts/pre-build/library/transformPractice.js b/scripts/pre-build/library/transformPractice.js
index ae88ce4b4..48f62cd51 100644
--- a/scripts/pre-build/library/transformPractice.js
+++ b/scripts/pre-build/library/transformPractice.js
@@ -25,7 +25,7 @@ const transformPractice = async (sourcePath, sourceContents) => {
       removeDuplicateMainTag(html.querySelector("body").innerHTML)
     ),
     enableSidebar: true,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };
 
diff --git a/scripts/pre-build/library/transformPracticeIndex.js b/scripts/pre-build/library/transformPracticeIndex.js
index 5b2be7289..56834fc60 100644
--- a/scripts/pre-build/library/transformPracticeIndex.js
+++ b/scripts/pre-build/library/transformPracticeIndex.js
@@ -29,7 +29,7 @@ const transformPatternIndex = async (sourcePath, sourceContents) => {
     githubPath,
     content,
     enableSidebar: false,
-    head: html.querySelector("head").innerHTML,
+    head: html.querySelector("head"),
   });
 };