diff --git a/ARIA/apg/patterns/accordion/examples/accordion.md b/ARIA/apg/patterns/accordion/examples/accordion.md
index 1b74ae2b3..e943d8275 100644
--- a/ARIA/apg/patterns/accordion/examples/accordion.md
+++ b/ARIA/apg/patterns/accordion/examples/accordion.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Accordion Example</title>
@@ -33,7 +34,6 @@ lang: en
   href="../../../../../../content-assets/wai-aria-practices/patterns/accordion/examples/css/accordion.css"
 />
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -50,7 +50,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -64,7 +63,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -88,17 +87,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/accordion.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>The below example section contains a simple personal information input form divided into 3 sections that demonstrates the <a href="../../">Accordion Pattern</a>.</p>
       </section>
 
@@ -119,7 +120,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </h3>
             <div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
               <div>
-                
+
                 <fieldset>
                   <p>
                     <label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
@@ -259,7 +260,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-        
+
         <div class="table-wrap"><table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -336,7 +337,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
       </section>
     </div>
     <script src="../../../../../../content-assets/wai-aria-practices/patterns/accordion/examples/js/accordion.js"></script>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md
index b5d9d8321..ee8103b26 100644
--- a/ARIA/apg/patterns/alert/examples/alert.md
+++ b/ARIA/apg/patterns/alert/examples/alert.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Alert Example</title>
@@ -37,7 +38,6 @@ lang: en
   type="text/javascript"
 ></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -54,7 +54,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -68,7 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -92,17 +91,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/alert.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below example demonstrates the <a href="../../">Alert Pattern</a>.
           Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
@@ -124,7 +125,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
           <div id="example" role="alert"></div>
 
-          
+
           <script type="text/template" id="alert-template">
             <p>Hello</p>
           </script>
@@ -217,7 +218,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           sourceCode.make();
         </script>
       </section>
-      
+
       <section id="at-support">
         <h2>Assistive Technology Support</h2>
         <iframe class="support-levels-alert"
@@ -229,7 +230,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
       </section>
 
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
index 074f0463e..38ead550c 100644
--- a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
+++ b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Alert Dialog Example</title>
@@ -35,7 +36,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/utils.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/alertdialog/examples/js/alertdialog.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -52,7 +52,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -66,7 +65,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -90,17 +89,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/alertdialog.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below example of a confirmation prompt demonstrates the <a href="../../">Alert Dialog Pattern</a>.
           It also includes an example of the <a href="../../../alert/">Alert Pattern</a> to make comparing the experiences provided by the two patterns easy.
@@ -314,7 +315,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
index 8d6babd9f..54c59ed10 100644
--- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
+++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Breadcrumb Example</title>
@@ -33,7 +34,6 @@ lang: en
   rel="stylesheet"
 />
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -50,7 +50,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -64,7 +63,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -88,17 +87,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/breadcrumb.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>The following example demonstrates the <a href="../../">Breadcrumb Pattern</a>.</p>
       </section>
 
@@ -208,7 +209,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md
index 531e06986..fe7fc012c 100644
--- a/ARIA/apg/patterns/button/examples/button.md
+++ b/ARIA/apg/patterns/button/examples/button.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Button Examples</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/button/examples/js/button.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,18 +88,20 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
 
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/button.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>The following command and toggle button examples demonstrate the <a href="../../">Button Pattern</a>.</p>
         <p>Similar examples include:</p>
         <ul>
@@ -286,7 +287,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </iframe>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/button/examples/button_idl.md b/ARIA/apg/patterns/button/examples/button_idl.md
index e49b6d51a..cfa014f22 100644
--- a/ARIA/apg/patterns/button/examples/button_idl.md
+++ b/ARIA/apg/patterns/button/examples/button_idl.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Button Examples (IDL Version)</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/button/examples/js/button_idl.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,12 +88,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
 
     <div>
-      
+
 
       <section>
         <h2>About This example</h2>
@@ -126,7 +125,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/button.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
 
           <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
           <div tabindex="0" id="action">Print Page</div>
@@ -280,7 +280,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
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 ba52e5d57..0a7e90d97 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>
@@ -36,7 +37,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/carousel/examples/js/carousel-prev-next.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,17 +90,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/carousel.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
           For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons.
@@ -201,9 +202,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">7 pm Tuesday, March 3, on TV</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 6">
                   <div class="carousel-image">
@@ -221,9 +222,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">Sept. 14 to Sept. 24 or 27</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="3 of 6">
                   <div class="carousel-image">
@@ -239,9 +240,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
                     <div></div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="4 of 6">
                   <div class="carousel-image">
@@ -259,9 +260,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peek at the final season.</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="5 of 6">
                   <div class="carousel-image">
@@ -277,9 +278,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
                     <div></div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="6 of 6">
                   <div class="carousel-image">
@@ -297,14 +298,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">Watch the latest episodes.</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
               </div>
             </div>
-            
+
           </section>
-          
+
 
           <div class="col-sm-1"></div>
         </div>
@@ -607,7 +608,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
index 9753f518d..d75505eb0 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Auto-Rotating Image Carousel with Tabs for Slide Control Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/carousel/examples/js/carousel-tablist.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/carousel.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
           This example also illustrates how to use the <a href="../../../tabs/">tabs pattern</a> to provide users with a way to skip slides in the sequence by directly choosing which one to view.
@@ -233,9 +234,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">7 pm Tuesday, March 3, on TV</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" id="carousel-item-2" role="tabpanel" aria-roledescription="slide" aria-label="2 of 6">
                   <div class="carousel-image">
@@ -253,9 +254,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">Sept. 14 to Sept. 24 or 27</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" id="carousel-item-3" role="tabpanel" aria-roledescription="slide" aria-label="3 of 6">
                   <div class="carousel-image">
@@ -271,9 +272,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
                     <div></div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" id="carousel-item-4" role="tabpanel" aria-roledescription="slide" aria-label="4 of 6">
                   <div class="carousel-image">
@@ -291,9 +292,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peek at the final season.</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" id="carousel-item-5" role="tabpanel" aria-roledescription="slide" aria-label="5 of 6">
                   <div class="carousel-image">
@@ -309,9 +310,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
                     <div></div>
                   </div>
-                  
+
                 </div>
-                
+
 
                 <div class="carousel-item" id="carousel-item-6" role="tabpanel" aria-roledescription="slide" aria-label="6 of 6">
                   <div class="carousel-image">
@@ -329,14 +330,14 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                       <p><span class="contrast">Watch the latest episodes.</span></p>
                     </div>
                   </div>
-                  
+
                 </div>
-                
+
               </div>
             </div>
-            
+
           </section>
-          
+
 
           <div class="col-sm-1"></div>
         </div>
@@ -791,7 +792,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
index 9360fcef5..c316abc02 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Checkbox Example (Mixed-State)</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/checkbox/examples/js/checkbox-mixed.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/checkbox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example demonstrates using the <a href="../../">Checkbox Pattern</a> to create a tri-state, or mixed-state, checkbox.
           In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes.
@@ -289,7 +290,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md
index ea62ac9fa..0599465be 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Checkbox Example (Two State)</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/checkbox/examples/js/checkbox.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/checkbox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>This example implements the <a href="../../">Checkbox Pattern</a> for a two state checkbox using <code>div</code> elements.</p>
 
         <p>Similar examples include:</p>
@@ -277,7 +278,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
index e07333ede..0b4b36cc7 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Editable Combobox With Both List and Inline Autocomplete Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/combobox-autocomplete.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below combobox for choosing the name of a US state or territory demonstrates the <a href="../../">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
@@ -612,7 +613,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
index 56b1a9335..4b05dda44 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Editable Combobox With List Autocomplete Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/combobox-autocomplete.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below combobox for choosing the name of a US state or territory demonstrates the <a href="../../">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
@@ -606,7 +607,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
index 6d5bf744d..2ddb098df 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Editable Combobox without Autocomplete Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/combobox-autocomplete.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the <a href="../../">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
@@ -548,7 +549,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
index 2fcaf91b7..b7d26253d 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Date Picker Combobox Example</title>
@@ -40,7 +41,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/combobox-datepicker.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -57,7 +57,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -71,7 +70,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -95,17 +94,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below date picker demonstrates an implementation of the <a href="../../">Combobox Pattern</a> that opens a dialog.
           The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt + Down Arrow</kbd>.
@@ -443,42 +444,43 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                   <ul>
                     <li>Changes the grid of dates to the same month in the previous year.</li>
                     <li>
+
 Moves focus to the day of the month that has the same number.
-                      If that day does not exist, moves focus to the last day of the month.
-                    </li>
-                  </ul>
-                </td>
-              </tr>
-              <tr data-test-id="grid-pagedown">
-                <th><kbd>PageDown</kbd></th>
-                <td>
-                  <ul>
-                    <li>Changes the grid of dates to the next month.</li>
-                    <li>
-                      Moves focus to the day of the month that has the same number.
-                      If that day does not exist, moves focus to the last day of the month.
-                    </li>
-                  </ul>
-                </td>
-              </tr>
-              <tr data-test-id="grid-shift-pagedown">
-                <th>
-                  <kbd>Shift</kbd>+<br>
-                  <kbd>PageDown</kbd>
-                </th>
-                <td>
-                  <ul>
-                    <li>Changes the grid of dates to the same month in the next year.</li>
-                    <li>
-                      Moves focus to the day of the month that has the same number.
-                      If that day does not exist, moves focus to the last day of the month.
-                    </li>
-                  </ul>
-                </td>
-              </tr>
-            </tbody>
-          </table></div>
-        </section>
+If that day does not exist, moves focus to the last day of the month.
+</li>
+</ul>
+</td>
+</tr>
+<tr data-test-id="grid-pagedown">
+<th><kbd>PageDown</kbd></th>
+<td>
+<ul>
+<li>Changes the grid of dates to the next month.</li>
+<li>
+Moves focus to the day of the month that has the same number.
+If that day does not exist, moves focus to the last day of the month.
+</li>
+</ul>
+</td>
+</tr>
+<tr data-test-id="grid-shift-pagedown">
+<th>
+<kbd>Shift</kbd>+<br>
+<kbd>PageDown</kbd>
+</th>
+<td>
+<ul>
+<li>Changes the grid of dates to the same month in the next year.</li>
+<li>
+Moves focus to the day of the month that has the same number.
+If that day does not exist, moves focus to the last day of the month.
+</li>
+</ul>
+</td>
+</tr>
+</tbody>
+</table></div>
+</section>
 
         <section>
           <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
@@ -729,7 +731,7 @@ Moves focus to the day of the month that has the same number.
                   </ul>
                 </td>
               </tr>
-              
+
               <tr data-test-id="gridcell-tabindex">
                 <td></td>
                 <th scope="row">
@@ -796,7 +798,7 @@ Moves focus to the day of the month that has the same number.
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
index 0c48f16b5..817bdb4d7 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Select-Only Combobox Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Combobox Pattern</a> demonstrates a single-select combobox widget that is functionally similar to an HTML <code>select</code> element.
           Unlike the editable combobox examples, this select-only combobox is not made with an <code>&lt;input&gt;</code> element, and it does not accept freeform user input.
@@ -125,8 +126,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <div class="combo js-select">
             <div aria-controls="listbox1" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="combo1-label" id="combo1" class="combo-input" role="combobox" tabindex="0"></div>
             <div class="combo-menu" role="listbox" id="listbox1" aria-labelledby="combo1-label" tabindex="-1">
-              
-              
+
+
             </div>
           </div>
         </div>
@@ -488,7 +489,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md
index 8c2a17886..5c6821e37 100644
--- a/ARIA/apg/patterns/combobox/examples/grid-combo.md
+++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Editable Combobox with Grid Popup Example</title>
@@ -36,7 +37,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/grid-combo.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/combobox/examples/js/grid-combo-example.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,17 +90,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example combobox implements the <a href="../../">combobox pattern</a> using a grid for the suggested values popup.
         </p>
@@ -467,7 +468,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
index 05903fb23..86431bdc4 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Modal Dialog Example</title>
@@ -35,7 +36,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/shared/js/utils.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/dialog-modal/examples/js/dialog.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -52,7 +52,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -66,7 +65,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -90,17 +89,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/dialog-modal.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           Following is an example implementation of the <a href="../../">Dialog (Modal) Pattern</a>.
           The below <q>Add Delivery Address</q> button opens a modal dialog that contains two buttons that open other dialogs.
@@ -164,7 +165,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </div>
             </div>
 
-            
+
             <div id="dialog2" role="dialog" aria-labelledby="dialog2_label" aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
               <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
               <div id="dialog2_desc" class="dialog_desc">
@@ -216,7 +217,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </div>
             </div>
 
-            
+
             <div id="dialog3" role="dialog" aria-labelledby="dialog3_label" aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
               <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
               <p id="dialog3_desc" class="dialog_desc">
@@ -425,7 +426,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
index 0ea5ea043..234020aa5 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>
@@ -36,7 +37,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosure-button.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,17 +90,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/disclosure.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example demonstrates using the <a href="../../">Disclosure Pattern</a> to create a set of frequently asked questions where the answers may be independently shown or hidden.
         </p>
@@ -283,7 +284,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul id="css_js_files">
           <li>
             CSS:
@@ -307,7 +308,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
index 225d06611..8dfb69b3c 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Example Disclosure (Show/Hide) for Image Description</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosure-button.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/disclosure.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example demonstrates using the <a href="../../">Disclosure Pattern</a> to provide a way of revealing a table of data that complements an image.
         </p>
@@ -444,7 +445,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
index bc24f2885..c748299f3 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Example Disclosure Navigation Menu with Top-Level Links</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosureMenu.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,11 +88,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -108,7 +107,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/disclosure.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
 
         <p>
           The following example demonstrates using the <a href="../../">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
@@ -424,7 +424,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul id="css_js_files">
           <li>
             CSS:
@@ -448,7 +448,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
index 22b18b028..79686a28a 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Example Disclosure Navigation Menu</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosureMenu.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,11 +88,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -108,7 +107,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/disclosure.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example demonstrates using the <a href="../../">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.
@@ -418,7 +419,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul id="css_js_files">
           <li>
             CSS:
@@ -442,7 +443,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md
index e3b16e122..67f4e1465 100644
--- a/ARIA/apg/patterns/feed/examples/feed.md
+++ b/ARIA/apg/patterns/feed/examples/feed.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Feed Example</title>
@@ -28,7 +29,6 @@ lang: en
 <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"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -45,7 +45,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -59,7 +58,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -83,17 +82,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/feed.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           <strong>NOTE:</strong> The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
           This page provides a proposed implementation of a feed component.
@@ -271,7 +272,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <p>Please open <a href="../feed-display.html">feed-display.html</a> and view source.</p>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
index c080be331..476bb45f0 100644
--- a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
+++ b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Advanced Data Grid Example</title>
@@ -41,7 +42,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrids.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -58,7 +58,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -72,7 +71,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -96,17 +95,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/grid.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example has not yet been developed.
           Development is described in <a href="https://github.com/w3c/aria-practices/issues/155">issue 155.</a>
@@ -124,9 +125,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
       <section>
         <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-        
+
         <div id="ex1">
-          
+
           <p>This is the place where the reader will experience the functioning example.</p>
           <p>The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.</p>
         </div>
@@ -146,7 +147,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        
+
         <ul>
           <li><kbd>KEY_NAME</kbd>: function</li>
           <li><kbd>KEY_NAME</kbd>: function</li>
@@ -155,7 +156,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-        
+
         <div class="table-wrap"><table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
@@ -172,7 +173,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </tr>
             <tr>
               <th>
-                
+
                 <code>aria-labelledby=&quot;ID_REF&quot;</code>
               </th>
               <td><code>HTML_ELEMENT</code></td>
@@ -189,15 +190,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul>
           <li>
             CSS:
-            
+
           </li>
           <li>
             Javascript:
-            
+
           </li>
         </ul>
       </section>
@@ -213,7 +214,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md
index 7893c9cfd..32ced72f1 100644
--- a/ARIA/apg/patterns/grid/examples/data-grids.md
+++ b/ARIA/apg/patterns/grid/examples/data-grids.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Data Grid Examples</title>
@@ -41,7 +42,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrids.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -58,7 +58,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -72,7 +71,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -96,17 +95,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/grid.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           Following are three example implementations of the <a href="../../">Grid Pattern</a> that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information.
           Each of the following three grids presents a set of financial transactions.
@@ -867,13 +868,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <script>
           sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
         </script>
-        
+
         <script>
           sourceCode.make();
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md
index 6fb07b941..fa843b73d 100644
--- a/ARIA/apg/patterns/grid/examples/layout-grids.md
+++ b/ARIA/apg/patterns/grid/examples/layout-grids.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Layout Grid Examples</title>
@@ -36,7 +37,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/js/dataGrid.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/grid/examples/js/layoutGrids.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,17 +90,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/grid.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following examples demonstrate how the <a href="../../">Grid Pattern</a> can be used to group a collection of interactive widgets into a single tab stop.
           In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate between them with the arrow keys.
@@ -196,7 +197,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </p>
           <div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="Start of"></div>
           <div id="ex2">
-            
+
             <div class="recipient-list">
               <span id="send_to_label">Send To:</span>
               <div id="ex2-grid" role="grid" class="pill-list" aria-labelledby="send_to_label" data-wrap-cols="true">
@@ -327,7 +328,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <div role="row">
                 <div role="gridcell">
                   <h5 class="ex3_result_header">
-                    <a tabindex="-1" href="https://www.w3.org/WAI/ARIA/faq">Accessible Rich Internet Applications (ARIA) Working Group - W3C</a>
+                    <a tabindex="-1" href="https://www.w3.org/WAI/standards-guidelines/aria/">Accessible Rich Internet Applications (ARIA) Overview</a>
                   </h5>
                 </div>
                 <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span tabindex="-1" role="gridcell">Here are answers to some frequently asked questions (FAQ) about WAI-ARIA, the Accessible Rich Internet Applications Suite. When we add significant ...</span>
@@ -761,13 +762,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <script>
           sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
         </script>
-        
+
         <script>
           sourceCode.make();
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/landmarks/examples/HTML5.html b/ARIA/apg/patterns/landmarks/examples/HTML5.html
index 4fbf6a772..593225738 100644
--- a/ARIA/apg/patterns/landmarks/examples/HTML5.html
+++ b/ARIA/apg/patterns/landmarks/examples/HTML5.html
@@ -125,8 +125,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -145,7 +145,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -156,19 +156,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/at.html b/ARIA/apg/patterns/landmarks/examples/at.html
index 4bd202d74..7393b475b 100644
--- a/ARIA/apg/patterns/landmarks/examples/at.html
+++ b/ARIA/apg/patterns/landmarks/examples/at.html
@@ -225,8 +225,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -245,7 +245,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -257,19 +257,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/banner.html b/ARIA/apg/patterns/landmarks/examples/banner.html
index cd9bcaad4..d1446ae3f 100644
--- a/ARIA/apg/patterns/landmarks/examples/banner.html
+++ b/ARIA/apg/patterns/landmarks/examples/banner.html
@@ -119,8 +119,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -139,7 +139,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -151,19 +151,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/complementary.html b/ARIA/apg/patterns/landmarks/examples/complementary.html
index 10c5925e6..79dbfecaf 100644
--- a/ARIA/apg/patterns/landmarks/examples/complementary.html
+++ b/ARIA/apg/patterns/landmarks/examples/complementary.html
@@ -181,8 +181,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -201,7 +201,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -213,19 +213,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, except just show h1 and h2 headings
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/contentinfo.html b/ARIA/apg/patterns/landmarks/examples/contentinfo.html
index a53259d91..ec9a9d65e 100644
--- a/ARIA/apg/patterns/landmarks/examples/contentinfo.html
+++ b/ARIA/apg/patterns/landmarks/examples/contentinfo.html
@@ -124,8 +124,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -144,7 +144,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -156,19 +156,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/form.html b/ARIA/apg/patterns/landmarks/examples/form.html
index 8f7f56bc4..3dd431720 100644
--- a/ARIA/apg/patterns/landmarks/examples/form.html
+++ b/ARIA/apg/patterns/landmarks/examples/form.html
@@ -278,8 +278,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -298,7 +298,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -309,19 +309,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/general-principles.html b/ARIA/apg/patterns/landmarks/examples/general-principles.html
index 5b7648e79..f2db7214a 100644
--- a/ARIA/apg/patterns/landmarks/examples/general-principles.html
+++ b/ARIA/apg/patterns/landmarks/examples/general-principles.html
@@ -120,8 +120,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -140,7 +140,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -151,19 +151,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-            positionLeft: '5%',
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/main.html b/ARIA/apg/patterns/landmarks/examples/main.html
index 5e8c3fd3b..8837c7cdb 100644
--- a/ARIA/apg/patterns/landmarks/examples/main.html
+++ b/ARIA/apg/patterns/landmarks/examples/main.html
@@ -179,8 +179,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -199,7 +199,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -210,19 +210,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/navigation.html b/ARIA/apg/patterns/landmarks/examples/navigation.html
index 07a4ac503..8f70f00e6 100644
--- a/ARIA/apg/patterns/landmarks/examples/navigation.html
+++ b/ARIA/apg/patterns/landmarks/examples/navigation.html
@@ -193,8 +193,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -213,7 +213,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -224,19 +224,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/region.html b/ARIA/apg/patterns/landmarks/examples/region.html
index c2c6796f8..09c1d2335 100644
--- a/ARIA/apg/patterns/landmarks/examples/region.html
+++ b/ARIA/apg/patterns/landmarks/examples/region.html
@@ -229,8 +229,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -249,7 +249,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -260,19 +260,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/resources.html b/ARIA/apg/patterns/landmarks/examples/resources.html
index 8347e6021..2a4730656 100644
--- a/ARIA/apg/patterns/landmarks/examples/resources.html
+++ b/ARIA/apg/patterns/landmarks/examples/resources.html
@@ -59,7 +59,7 @@ <h2>Read More</h2>
                             <li><a href="https://alistapart.com/column/wai-finding-with-aria-landmark-roles">WAI-finding with ARIA Landmark Roles</a> (A List Apart)</li>
                             <li><a href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013</a> (Paciello Group)</li>
                             <li><a href="https://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/">Basic screen reader commands for accessibility testing</a>  (Paciello Group)</li>
-                            <li><a href="http://webaim.org/projects/screenreadersurvey8/#landmarks">Screen Reader User Survey #8 Results: Landmarks/Regions</a> (WebAIM)</li>
+                            <li><a href="http://webaim.org/projects/screenreadersurvey9/#landmarks">Screen Reader User Survey #9 Results: Landmarks/Regions</a> (WebAIM)</li>
                           </ul>
                         </section>
 
@@ -67,11 +67,12 @@ <h2>Read More</h2>
                           <h2>Tools</h2>
 
                           <ul>
+                            <li><a href="https://skipto-landmarks-headings.github.io">SkipTo Landmarks &amp; Headings: Browser Extension</a></li>
+                            <li><a href="https://github.com/skipto-landmarks-headings/page-script-5">SkipTo Landmarks &amp; Headings: Page Script (used on this page)</a></li>
                             <li><a href="http://matatk.agrip.org.uk/landmarks/">Landmarks Browser Extension</a></li>
                             <li><a href="https://accessibility-bookmarklets.org/">Accessibility Bookmarklets: Landmark Bookmarklet</a></li>
                             <li><a href="http://whatsock.com/training/matrices/visual-aria.htm">The Visual ARIA Bookmarklet</a></li>
-                            <li><a href="https://skipto-landmarks-headings.github.io">SkipTo Browser Extension and Page Scripts</a></li>
-                            <li><a href="https://addons.mozilla.org/en-US/firefox/addon/ainspector-wcag/">AInspector WCAG for Firefox</a> (Landmark Rule Category)</li>
+                            <li><a href="https://addons.mozilla.org/en-US/firefox/addon/ainspector-wcag/">AInspector for Firefox</a> (Landmark Rule Category)</li>
                             <li><a href="https://fae.disability.illinois.edu/">Functional Accessibility Evaluator 2.2</a> (Landmark Rule Category)</li>
                           </ul>
 
@@ -98,8 +99,8 @@ <h2 id="id4">Landmarks</h2>
                     <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -118,34 +119,19 @@ <h2 id="id3">Related Documents</h2>
                     W3C ARIA Authoring Practices Task Force
                   </div>
                   <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-                    Copyright 2021
+                    Copyright 2023
                   </div>
               </footer>
             </div>
         </div>
 
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/jquery-2.1.1.min.js"></script>
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap.min.js"></script>
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility.min.js"></script>
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-
-
-        <script type="text/javascript">
-            // Use the SkipTo defaults, but just showing custom configuration
-            var SkipToConfig = {
-              settings: {
-                skipTo: {
-                  headings: 'h1, h2',
-                  attachElement: '#skip-to-attach',
-
-                  colorTheme: 'aria',
-                },
-              },
-            };
-        </script>
-
-        <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+      <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/jquery-2.1.1.min.js"></script>
+      <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap.min.js"></script>
+      <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility.min.js"></script>
+      <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
+      <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
+      <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
+      
+      <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
     </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/examples/search.html b/ARIA/apg/patterns/landmarks/examples/search.html
index 77f162b9c..a08b22a6b 100644
--- a/ARIA/apg/patterns/landmarks/examples/search.html
+++ b/ARIA/apg/patterns/landmarks/examples/search.html
@@ -112,8 +112,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -132,7 +132,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -143,18 +143,7 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/visua11y.js"></script>
     <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-            colorTheme: 'aria',
-          },
-        },
-      };
-    </script>
-    <script type="text/javascript" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
+    
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria" src="../../../../../content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/ARIA/apg/patterns/landmarks/landmarks-pattern.md b/ARIA/apg/patterns/landmarks/landmarks-pattern.md
new file mode 100644
index 000000000..7b1096366
--- /dev/null
+++ b/ARIA/apg/patterns/landmarks/landmarks-pattern.md
@@ -0,0 +1,116 @@
+---
+# This file was generated by scripts/pre-build/library/formatForJekyll.js
+title: "Landmarks Pattern"
+ref: /ARIA/apg/patterns/landmarks/
+
+github:
+  repository: w3c/aria-practices
+  branch: main
+  path: content/patterns/landmarks/landmarks-pattern.html
+feedbackmail: public-aria-practices@w3.org
+permalink: /ARIA/apg/patterns/landmarks/
+
+sidebar: true
+
+
+
+# Context here: https://github.com/w3c/wai-aria-practices/issues/31
+type_of_guidance: APG
+
+lang: en
+---
+<meta charset="UTF-8" />
+<meta content="width=device-width, initial-scale=1.0" name="viewport" />
+<title>Landmarks Pattern</title>
+
+<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"
+  href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
+>
+<!-- Code highlighting styles -->
+<link 
+  rel="stylesheet"
+  href="{{ '/content-assets/wai-aria-practices/shared/css/github.css' | relative_url }}"
+>
+
+<script>
+const addBodyClass = undefined;
+const enableSidebar = true;
+if (addBodyClass) document.body.classList.add(addBodyClass);
+if (enableSidebar) document.body.classList.add('has-sidebar');
+</script>
+    
+
+<script>
+    const parentPage = window.location.pathname.match(
+      /\/(patterns|practices|about)\//
+    )?.[1];
+    if (parentPage) {
+      const parentHref = 'a[href*="' + parentPage + '"]';
+      document.querySelector(parentHref).classList.add('active');
+    }
+  </script>
+<div>
+
+    <div>
+      
+
+      <section id="about">
+        <h2>About This Pattern</h2>
+        <p>
+          <a class="role-reference" href="https://w3c.github.io/aria/#landmark">Landmarks</a> are a set of eight roles that identify the major sections of a page.
+          Each landmark role enables assistive technology users to perceive the start and end of a feature of the high-level page structure that is usually conveyed visually with placement, spacing, color, or borders.
+          For example, the <a class="role-reference" href="https://w3c.github.io/aria/#main">main</a> landmark designates the section that contains the main content of the page.
+          In addition to conveying structure, landmarks enable browsers and assistive technologies to facilitate efficient keyboard navigation among sections of a page.
+        </p>
+        <p>
+          Several landmark roles are implied by HTML elements.
+          For example, the HTML <code>main</code> element automatically creates a main landmark region, and the HTML <code>nav</code> element creates a navigation landmark region.
+          </p>
+        <p>
+          Since landmarks are intended to help assistive technology users perceive the high-level structure of a page, their value diminishes as their number grows.
+          For optimum value, a general rule of thumb is that a page contains seven or fewer landmark regions.
+          Another best practice is to ensure that all content is contained within an appropriate landmark region.
+          The <a href="../../practices/landmark-regions/">Landmark Regions Practice</a> describes ways of using HTML sectioning elements and ARIA landmark roles that will most benefit users.
+        </p>
+      </section>
+
+      <section id="examples" class="examples-section"><img alt="" 
+      src="{{ '/content-images/wai-aria-practices/img/landmarks.svg' | relative_url }}"
+    >
+        <h2>Examples</h2>
+        <ul>
+          <li><a href="examples/main.html">Main Landmark Example</a></li>
+          <li><a href="examples/navigation.html">Navigation Landmark Example</a></li>
+          <li><a href="examples/search.html">Search Landmark Example</a></li>
+          <li><a href="examples/banner.html">Banner Landmark Example</a></li>
+          <li><a href="examples/contentinfo.html">Contentinfo Landmark Example</a></li>
+          <li><a href="examples/complementary.html">Complementary Landmark Example</a></li>
+          <li><a href="examples/form.html">Form Landmark Example</a></li>
+          <li><a href="examples/region.html">Region Landmark Example</a></li>
+        </ul>
+      </section>
+
+      <section id="keyboard_interaction">
+        <h2>Keyboard Interaction</h2>
+        <p>Not applicable.</p>
+      </section>
+
+      <section id="roles_states_properties">
+        <h2>WAI-ARIA Roles, States, and Properties</h2>
+        <p>
+          The <a href="../../practices/landmark-regions/">Landmark Regions Practice</a> describes the HTML elements, roles, properties, and usage guidelines for each of the landmark region roles.
+        </p>
+      </section>
+
+    </div>
+  
+</div>
+<script 
+  src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
+></script>
diff --git a/ARIA/apg/patterns/link/examples/link.md b/ARIA/apg/patterns/link/examples/link.md
index fb63b78da..88759b87b 100644
--- a/ARIA/apg/patterns/link/examples/link.md
+++ b/ARIA/apg/patterns/link/examples/link.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Link Examples</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/link/examples/js/link.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/link.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The examples below demonstrate three variations of the <a href="../../">Link Pattern</a>.
           The link pattern is used when it is necessary for elements other than the HTML <code>a</code> element to have link behaviors.
@@ -264,7 +265,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
       </section>
 
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
index 28a2b65af..40f85ba91 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>(Deprecated) Collapsible Dropdown Listbox Example</title>
@@ -36,7 +37,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-collapsible.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,11 +90,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -108,7 +107,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/listbox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Listbox Pattern</a> demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML <code>select</code> input with the attribute <code>size=&quot;1&quot;</code>.
           The widget consists of a button that triggers the display of a listbox.
@@ -387,7 +388,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
index fbfed00a3..1e32292a7 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Listbox Example with Grouped Options</title>
@@ -36,7 +37,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-scrollable.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,17 +90,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/listbox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Listbox Pattern</a> demonstrates a single-select listbox widget with grouped options.
           This widget is functionally similar to an HTML <code>select</code> element with <code>size</code> greater than 1 and options grouped into categories with labeled <code>optgroup</code> elements.
@@ -311,7 +312,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
index e43e95e31..1fefc56dd 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Example Listboxes with Rearrangeable Options</title>
@@ -37,7 +38,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/toolbar.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-rearrangeable.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -54,7 +54,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -68,7 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -92,17 +91,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/listbox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following two example implementations of the <a href="../../">Listbox Pattern</a> demonstrate differences between single-select and multi-select functionality.
           In both examples, users can use action buttons to move options from one list to another.
@@ -504,13 +505,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <script>
           sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
         </script>
-        
+
         <script>
           sourceCode.make();
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
index 88697d4ca..caa9a1d80 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Scrollable Listbox Example</title>
@@ -36,7 +37,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-scrollable.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -53,7 +53,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -67,7 +66,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -91,17 +90,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/listbox.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Listbox Pattern</a> demonstrates a scrollable single-select listbox widget.
           This widget is functionally similar to an HTML <code>select</code> input where the <code>size</code> attribute has a value greater than one.
@@ -306,7 +307,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
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 9308f1d4a..ece42dc92 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
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Actions Menu Button Example Using aria-activedescendant</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/menu-button.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example demonstrates how the <a href="../../">Menu Button Pattern</a> can be used to create a button that opens an actions menu.
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
@@ -423,7 +424,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
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 1e3457090..ad2f1e054 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Actions Menu Button Example Using element.focus()</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/menu-button/examples/js/menu-button-actions.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/menu-button.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example demonstrates how the <a href="../../">Menu Button Pattern</a> can be used to create a button that opens an actions menu.
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
@@ -402,7 +403,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
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 53bb78858..fd1db17f2 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Navigation Menu Button Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/menu-button/examples/js/menu-button-links.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/menu-button.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example demonstrates the <a href="../../">Menu Button Pattern</a> for a button that displays a menu of link targets.
           The menu items are made from HTML links, so they maintain their HTML link behaviors.
@@ -426,7 +427,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md
index 0659d8afb..2cf394b11 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Editor Menubar Example</title>
@@ -35,7 +36,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/menubar/examples/js/menubar-editor.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/menubar/examples/js/style-manager.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -52,7 +52,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -66,7 +65,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -90,17 +89,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/menubar.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example demonstrates using the <a href="../../">Menubar Pattern</a> to provide access to editing actions for a text area.
           Each item in the menubar identifies a category of text formatting actions that can be executed from its submenu.
@@ -861,7 +862,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
index 8e2e0cc71..c81e79a87 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Navigation Menubar Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/menubar/examples/js/menubar-navigation.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,11 +88,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -110,7 +109,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/menubar.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following implementation of the <a href="../../">Menubar Pattern</a> demonstrates how a menubar can provide navigation menus.
           The parent menu items in the menubar represent a section of a mythical university web site and open a submenu containing menu items that link to pages within that section.
@@ -133,7 +134,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <div class="page">
-            
+
             <header role="banner">
               <div class="title">Mythical University</div>
               <div class="tagline">Using a Menubar for navigation links</div>
@@ -279,7 +280,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 </li>
               </ul>
             </nav>
-            
+
             <div class="main">
               <section aria-labelledby="id-page-title">
                 <h1 id="id-page-title" class="page_title">Mythical University</h1>
@@ -288,7 +289,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 </div>
               </section>
             </div>
-            
+
             <footer role="contentinfo">Mythical University footer information</footer>
           </div>
         </div>
@@ -890,7 +891,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md
index 0690ac408..d776027c9 100644
--- a/ARIA/apg/patterns/meter/examples/meter.md
+++ b/ARIA/apg/patterns/meter/examples/meter.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Meter Example</title>
@@ -40,7 +41,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/meter/examples/js/meter.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -57,7 +57,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -71,7 +70,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -95,17 +94,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/meter.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>The following example of a CPU meter demonstrates the <a href="../../">Meter Pattern</a>.</p>
       </section>
 
@@ -216,7 +217,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 3c7723ffa..8a1b82432 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -212,25 +212,21 @@ lang: en
               <div class="tile-introduction">
           A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home, and End.</div>
             </li>
-          
-              <li class="tile tile-landmarks">
-                <a 
-                  href="{{ '/ARIA/apg/patterns/landmarks/examples/general-principles.html' | relative_url }}"
-                >
-                  <h2 class="tile-name">
-                    <img 
-                      src="{{ '/content-images/wai-aria-practices/img/landmarks.svg' | relative_url }}" 
-                      alt=""
-                    >
-                    <span>Landmarks</span>
-                  </h2>
-                </a>
-                <div class="tile-introduction">
-                  Landmarks provide a powerful way to identify the 
-                  organization and structure of a web page.
-                </div>
-              </li>
-             
+           
+            <li class="tile tile-landmarks">
+              <a href="{{ '/ARIA/apg/patterns/landmarks/' | relative_url }}">
+                <h2 class="tile-name">
+                  <img 
+                    src="{{ '/content-images/wai-aria-practices/img/landmarks.svg' | relative_url }}" 
+                    alt=""
+                  >
+                  <span>Landmarks</span>
+                </h2>
+              </a>
+              <div class="tile-introduction">
+          Landmarks are a set of eight roles that identify the major sections of a page.</div>
+            </li>
+           
             <li class="tile tile-link">
               <a href="{{ '/ARIA/apg/patterns/link/' | relative_url }}">
                 <h2 class="tile-name">
diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
index 8649e708b..ef01ee283 100644
--- a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
+++ b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Radio Group Example Using aria-activedescendant</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/radio/examples/js/radio-activedescendant.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/radio.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example implements the features of the <a href="../../">Radio Group Pattern</a> for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method.
           This implementation uses <code>aria-activedescendant</code> for informing assistive technologies which radio button has visual focus.
@@ -345,7 +346,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
       </section>
 
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md
index 8142a1341..c5bb1fcac 100644
--- a/ARIA/apg/patterns/radio/examples/radio-rating.md
+++ b/ARIA/apg/patterns/radio/examples/radio-rating.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Rating Radio Group Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/radio/examples/js/radio-rating.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/radio.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Radio Group Pattern.</a>
           The rating is indicated by the number of stars selected by the user.
@@ -364,7 +365,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/radio/examples/radio.md b/ARIA/apg/patterns/radio/examples/radio.md
index 03d011128..f954d3f43 100644
--- a/ARIA/apg/patterns/radio/examples/radio.md
+++ b/ARIA/apg/patterns/radio/examples/radio.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Radio Group Example Using Roving tabindex</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/radio/examples/js/radio.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/radio.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example implements the features of the <a href="../../">Radio Group Pattern</a> for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method.
           This implementation uses a roving tabindex for managing focus within the radio group.
@@ -335,7 +336,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
index 6a1003a8a..a13d63e04 100644
--- a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
+++ b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Horizontal Multi-Thumb Slider Example</title>
@@ -37,7 +38,6 @@ lang: en
   type="text/javascript"
 ></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -54,7 +54,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -68,7 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -92,11 +91,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -111,7 +110,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/slider-multithumb.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example of the <a href="../../">Multi-Thumb Slider Pattern</a> demonstrates an input for setting a pair of values that represent a range.
           This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.
@@ -344,7 +345,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index 6fd53b28d..1c0b086d4 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Color Viewer Slider Example</title>
@@ -35,7 +36,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/slider/examples/js/slider-color-viewer.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -52,7 +52,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -66,7 +65,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -90,11 +89,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -109,7 +108,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/slider.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           Following is an example of a color viewer that demonstrates the <a href="../../">Slider Pattern</a>.
           Change the background of the color view box by adjusting the sliders for red, green, and blue values.
@@ -136,7 +137,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
             <div id="id-red" class="color-slider-label">Red</div>
             <div class="color-slider red" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="128" aria-valuemax="255" aria-labelledby="id-red">
-              
+
 
               <svg width="0" height="0" aria-hidden="true">
                 <text class="value" x="0" y="0">128</text>
@@ -149,7 +150,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
             <div id="id-green" class="color-slider-label">Green</div>
             <div class="color-slider green" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="128" aria-valuemax="255" aria-labelledby="id-green">
-              
+
 
               <svg width="0" height="0" aria-hidden="true">
                 <text class="value" x="0" y="0">128</text>
@@ -162,7 +163,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
             <div id="id-blue" class="color-slider-label">Blue</div>
             <div class="color-slider blue" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="128" aria-valuemax="255" aria-labelledby="id-blue">
-              
+
 
               <svg width="0" height="0" aria-hidden="true">
                 <text class="value" x="0" y="0">128</text>
@@ -382,7 +383,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 111f3357c..c40605329 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Rating Slider Example</title>
@@ -35,7 +36,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -52,7 +52,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -66,7 +65,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -90,11 +89,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -109,7 +108,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/slider.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Slider Pattern</a>.
           This rating widget employs a slider because the slider pattern supports step values of any size.
@@ -135,7 +136,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <div id="id-rating-label" class="label">Rating</div>
 
           <div id="id-rating" class="rating-slider" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="5" aria-valuetext="no stars" aria-labelledby="id-rating-label">
-            
+
 
             <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="224" height="48">
               <defs>
@@ -364,7 +365,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index d6f6c0eea..52db88759 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Media Seek Slider Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/slider/examples/js/slider-seek.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,11 +88,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -108,7 +107,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/slider.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example of the <a href="../../">Slider Pattern</a> illustrates a seek control that could be used to move the current play position in an audio or video media player.
           The example demonstrates how to use <code>aria-valuetext</code> to provide assistive technology users with meaningful names for numeric values.
@@ -142,7 +143,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <rect class="focus-ring" x="0" y="0" width="28" height="60" rx="12" ></rect>
                 <rect class="thumb" x="0" y="0" width="14" height="48" rx="5" ></rect>
               </g>
-              
+
               <g class="value-label" data-value="0">
                 <text x="0" y="0">0:00</text>
               </g>
@@ -388,7 +389,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 700d5f63e..a090b0e19 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Vertical Temperature Slider Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/slider/examples/js/slider-temperature.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,11 +88,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -108,7 +107,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/slider.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example is a vertically oriented temperature control that implements the <a href="../../">Slider Pattern</a>.
           The slider illustrates use of <code>aria-orientation</code> to specify vertical orientation and use of <code>aria-valuetext</code> to convey unit of measure for numeric values to assistive technology users by appending <q>degrees Celsius</q> to the current value.
@@ -369,7 +370,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
index 572502c61..eb8f63152 100644
--- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
+++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Date Picker Spin Button Example</title>
@@ -41,7 +42,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/spinbutton/examples/js/spinbutton-date.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/spinbutton/examples/js/datepicker-spinbuttons.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -58,7 +58,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -72,7 +71,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -96,17 +95,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/spinbutton.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example uses the <a href="../../">Spin Button Pattern</a> to implement a date picker.
           It includes three spin buttons: one for setting the day, a second for month, and a third for year.
@@ -409,7 +410,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/switch/examples/switch-button.md b/ARIA/apg/patterns/switch/examples/switch-button.md
index 77680f9dc..9790b5f0a 100644
--- a/ARIA/apg/patterns/switch/examples/switch-button.md
+++ b/ARIA/apg/patterns/switch/examples/switch-button.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Switch Example Using HTML Button</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/switch/examples/js/switch-button.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/switch.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example illustrates implementing the <a href="../../">Switch Pattern</a> with an HTML <code>button</code> as a switch element and using an <code>SVG</code> element to provide graphical rendering of switch states.
           It also demonstrates using the <code>group</code> role to present multiple switches in a labeled group.
@@ -283,7 +284,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul id="css_js_files">
           <li>
             CSS:
@@ -307,7 +308,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/switch/examples/switch-checkbox.md b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
index f6b68956b..4544e5a90 100644
--- a/ARIA/apg/patterns/switch/examples/switch-checkbox.md
+++ b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Switch Example Using HTML Checkbox Input</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/switch/examples/js/switch-checkbox.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/switch.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example illustrates implementing the <a href="../../">Switch Pattern</a> with an HTML <code>input[type="checkbox"]</code> as the switch element and using CSS borders to provide graphical rendering of switch states.
           It also demonstrates using the HTML <code>fieldset</code> and <code>legend</code> elements to present multiple switches in a labeled group.
@@ -265,7 +266,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/switch/examples/switch.md b/ARIA/apg/patterns/switch/examples/switch.md
index 446a6c994..5c6e72a80 100644
--- a/ARIA/apg/patterns/switch/examples/switch.md
+++ b/ARIA/apg/patterns/switch/examples/switch.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Switch Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/switch/examples/js/switch.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/switch.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example illustrates implementation of the <a href="../../">Switch Pattern</a> for a notification preferences control.
           It uses a <code>div</code> element for the switch and CSS borders to provide graphical rendering of switch states.
@@ -271,7 +272,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/table/examples/sortable-table.md b/ARIA/apg/patterns/table/examples/sortable-table.md
index 16ec21607..43d556656 100644
--- a/ARIA/apg/patterns/table/examples/sortable-table.md
+++ b/ARIA/apg/patterns/table/examples/sortable-table.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Sortable Table Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/table/examples/js/sortable-table.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/table.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The example below illustrates an implementation of the <a href="../../">Table Pattern</a> for a table with sortable rows.
           The example uses HTML table markup for all elements of the table structure, e.g., cells, rows, column headers, and caption.
@@ -288,7 +289,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/table/examples/table.md b/ARIA/apg/patterns/table/examples/table.md
index e33130a80..cbbfcdeea 100644
--- a/ARIA/apg/patterns/table/examples/table.md
+++ b/ARIA/apg/patterns/table/examples/table.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Table Example</title>
@@ -33,7 +34,6 @@ lang: en
   rel="stylesheet"
 />
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -50,7 +50,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -64,7 +63,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -88,17 +87,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/table.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below example illustrates an implementation of the WAI-ARIA <a href="../../">Table Pattern.</a>
           Note that when possible, using a native HTML <code>table</code> element is recommended.
@@ -231,7 +232,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul id="css_js_files">
           <li>
             CSS:
@@ -252,7 +253,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
index 6e64e2d15..bf3cb5be5 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Example of Tabs with Automatic Activation</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/tabs/examples/js/tabs-automatic.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/tabs.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           This example section demonstrates a tabs widget that implements the <a href="../../">Tabs Pattern</a>.
           In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus.
@@ -428,7 +429,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-manual.md b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
index 0d2621601..85c16aa4b 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-manual.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Example of Tabs with Manual Activation</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/tabs/examples/js/tabs-manual.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,17 +88,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/tabs.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below example section demonstrates a tabs widget that implements the <a href="../../">Tabs Pattern</a>.
           In this example, a panel is displayed when users activate its tab with either <kbd>Space</kbd>, <kbd>Enter</kbd>, or a mouse click.
@@ -422,7 +423,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/toolbar/examples/toolbar.md b/ARIA/apg/patterns/toolbar/examples/toolbar.md
index 4153b3616..eed8ba42e 100644
--- a/ARIA/apg/patterns/toolbar/examples/toolbar.md
+++ b/ARIA/apg/patterns/toolbar/examples/toolbar.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Toolbar Example</title>
@@ -49,7 +50,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/toolbar/examples/js/FontMenuButton.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/toolbar/examples/js/SpinButton.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -66,7 +66,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -80,7 +79,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -104,17 +103,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/toolbar.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example of an editor toolbar implements the <a href="../../">Toolbar Pattern</a> and demonstrates how a toolbar can group a set of interactive widgets into a single tab stop.
           For illustrative and interoperability assessment purposes, this implementation includes a diverse set of widgets, some of which may not be ordinarily grouped in the same toolbar.
@@ -203,6 +204,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </div>
           <label for="textarea1" class="hidden">Text Sample</label><br>
           <textarea id="textarea1" rows="20" cols="80" style="font-family: sans-serif">
+
 Abraham Lincoln's Gettysburg Address
 
 Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
@@ -211,9 +213,10 @@ Now we are engaged in a great civil war, testing whether that nation, or any nat
 
 But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow, this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us, that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion, that we here highly resolve that these dead shall not have died in vain, that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
 </textarea>
-        </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-      </section>
+
+</div>
+<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+</section>
 
       <section>
         <h2>Accessibility Features</h2>
@@ -1044,7 +1047,7 @@ But, in a larger sense, we can not dedicate, we can not consecrate, we can not h
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
index 88e85e191..bd63c27d6 100644
--- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
+++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Treegrid Email Inbox Example</title>
@@ -58,7 +59,6 @@ lang: en
   type="text/javascript"
 ></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -75,7 +75,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -89,7 +88,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -113,17 +112,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/treegrid.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>The following example demonstrates how the <a href="../../">Treegrid Pattern</a> can be used to make an interactive tree that enables users to both navigate the hierarchical structure of email conversations and also navigate elements that describe each email, such as subject and sender.</p>
         <p>Similar examples include:</p>
         <ul>
@@ -515,7 +516,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        
+
         <ul id="css_js_files">
           <li>
             CSS:
@@ -539,7 +540,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1a.md b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
index 54b361124..0bfc0c3cb 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1a.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>File Directory Treeview Example Using Computed Properties</title>
@@ -43,7 +44,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeitem.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeitemClick.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -60,7 +60,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -74,7 +73,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -98,16 +97,18 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/treeview.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Tree View Pattern</a> simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer.
           In the <q>My Documents</q> tree, each parent node represents a folder and each end node represents a file.
@@ -503,7 +504,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1b.md b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
index b7da0381d..27ef1a4e9 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1b.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>File Directory Treeview Example Using Declared Properties</title>
@@ -43,7 +44,6 @@ lang: en
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeitem.js"></script>
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeitemClick.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -60,7 +60,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -74,7 +73,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -98,16 +97,18 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
       <section>
         <h2>About This Example</h2><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/treeview.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The following example implementation of the <a href="../../">Tree View Pattern</a> simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer.
           In the <q>My Documents</q> tree, each parent node represents a folder and each end node represents a file.
@@ -529,7 +530,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
index a23b66a4c..c8c1f812d 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
@@ -19,6 +19,7 @@ type_of_guidance: APG
 
 lang: en
 ---
+
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Navigation Treeview Example</title>
@@ -34,7 +35,6 @@ lang: en
 />
 <script src="../../../../../../content-assets/wai-aria-practices/patterns/treeview/examples/js/treeview-navigation.js"></script>
 
-
 <link 
   rel="stylesheet"
   href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
@@ -51,7 +51,6 @@ const enableSidebar = true;
 if (addBodyClass) document.body.classList.add(addBodyClass);
 if (enableSidebar) document.body.classList.add('has-sidebar');
 </script>
-    
 
 <script>
     const parentPage = window.location.pathname.match(
@@ -65,7 +64,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 <div>
 
       <h2 id="support-notice-header">Read This First</h2>
-      
+
     <details id="support-notice">
       <summary>
         <p>
@@ -89,11 +88,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </li>
       </ul>
     </details>
-  
-    
-    
+
+
+
     <div>
-      
+
 
       <section>
         <h2>About This Example</h2>
@@ -107,7 +106,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div><img alt=""
     src="{{ '/content-images/wai-aria-practices/img/treeview.svg' | relative_url }}"
     class="example-page-example-icon"
-  >
+
+>
+
         <p>
           The below example demonstrates how the <a href="../../">Tree View Pattern</a> can be used to build a navigation tree for a set of hierarchically organized web pages.
           It illustrates navigation of a mythical university web site that is comparable to the navigation illustrated in the
@@ -138,7 +139,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
 
         <div id="ex1">
-          
+
           <div class="page">
             <header role="banner">
               <div class="title" id="id_website_title">Mythical University</div>
@@ -359,7 +360,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 </ul>
               </nav>
 
-              
+
               <section class="main" aria-labelledby="id_website_title id_page_title">
                 <h1 class="page_title" id="id_page_title">Mythical University</h1>
                 <div class="content">
@@ -367,7 +368,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 </div>
               </section>
             </div>
-            
+
             <footer role="contentinfo">Mythical University footer information</footer>
           </div>
         </div>
@@ -765,7 +766,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </script>
       </section>
     </div>
-  
+
 </div>
 <script 
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
diff --git a/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md b/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md
index f7011cca4..ed4a2586f 100644
--- a/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md
+++ b/ARIA/apg/practices/hiding-semantics/hiding-semantics-practice.md
@@ -107,7 +107,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <li>The element’s implied ARIA role and any ARIA states and properties associated with that role are hidden from assistive technologies.</li>
           <li>
             Text contained by the element, i.e., inner text, as well as inner text of all its descendant elements remains visible to assistive technologies.
-            Of course, text is explicitly hidden, e.g., styled with <code>display: none</code> or has <code>aria-hidden="true"</code> is not visible to assistive technologies.
+            Of course, text that is explicitly hidden, e.g., styled with <code>display: none</code> or has <code>aria-hidden="true"</code>, is not visible to assistive technologies.
           </li>
           <li>
             The roles, states, and properties of each descendant element remain visible to assistive technologies unless the descendant requires the context of the presentational element.
diff --git a/_external/aria-practices b/_external/aria-practices
index 32c7ef25b..4adb78ea9 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 32c7ef25b13cb8ccc0d7ea12a9df8c2e2c3a5326
+Subproject commit 4adb78ea96b22db559577aa6ed64c9059596ab4a
diff --git a/_external/data b/_external/data
index 894dca0e8..adf06a034 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 894dca0e8b4f6d90d622fbb87e356b9e6713042f
+Subproject commit adf06a0344196c2ffff7fc0c3628cd6d37bc76ed
diff --git a/content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js b/content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js
index 3a24af96c..7daa1003d 100644
--- a/content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js
+++ b/content-assets/wai-aria-practices/patterns/landmarks/examples/js/skipto.min.js
@@ -1,8 +1,17 @@
-/*! skipto - v4.1.3 - 2021-10-08
-* https://github.com/paypal/skipto
-* Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD */
- /*@cc_on @*/
-/*@if (@_jscript_version >= 5.8) @*/
+/* ========================================================================
+ * 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";var SkipTo={skipToId:"id-skip-to-js-4",skipToMenuId:"id-skip-to-menu-4",domNode:null,buttonNode:null,menuNode:null,tooltipNode:null,menuitemNodes:[],firstMenuitem:!1,lastMenuitem:!1,firstChars:[],headingLevels:[],skipToIdIndex:1,showAllLandmarksSelector:"main, [role=main], [role=search], nav, [role=navigation], section[aria-label], section[aria-labelledby], section[title], [role=region][aria-label], [role=region][aria-labelledby], [role=region][title], form[aria-label], form[aria-labelledby], aside, [role=complementary], body > header, [role=banner], body > footer, [role=contentinfo]",showAllHeadingsSelector:"h1, h2, h3, h4, h5, h6",showTooltipFocus:!1,showTooltipHover:!1,tooltipTimerDelay:500,config:{enableActions:!1,enableMofN:!0,enableHeadingLevelShortcuts:!0,enableHelp:!0,enableTooltip:!0,accesskey:"0",attachElement:"header",displayOption:"static",containerElement:"div",containerRole:"",customClass:"",buttonTitle:"",buttonTitleWithAccesskey:"",buttonTooltip:"",buttonTooltipAccesskey:"Shortcut Key: $key",buttonLabel:"Skip To Content",menuLabel:"Landmarks and Headings",landmarkGroupLabel:"Landmarks",headingGroupLabel:"Headings",mofnGroupLabel:" ($m of $n)",headingLevelLabel:"Heading level",mainLabel:"main",searchLabel:"search",navLabel:"navigation",regionLabel:"region",asideLabel:"complementary",footerLabel:"contentinfo",headerLabel:"banner",formLabel:"form",msgNoLandmarksFound:"No landmarks found",msgNoHeadingsFound:"No headings found",actionGroupLabel:"Actions",actionShowHeadingsHelp:'Toggles between showing "All" and "Selected" Headings.',actionShowSelectedHeadingsLabel:"Show Selected Headings ($num)",actionShowAllHeadingsLabel:"Show All Headings ($num)",actionShowLandmarksHelp:'Toggles between showing "All" and "Selected" Landmarks.',actionShowSelectedLandmarksLabel:"Show Selected Landmarks ($num)",actionShowAllLandmarksLabel:"Show All Landmarks ($num)",actionShowSelectedHeadingsAriaLabel:"Show $num selected headings",actionShowAllHeadingsAriaLabel:"Show all $num headings",actionShowSelectedLandmarksAriaLabel:"Show $num selected landmarks",actionShowAllLandmarksAriaLabel:"Show all $num landmarks",landmarks:'main, [role="main"], [role="search"], nav, [role="navigation"], aside, [role="complementary"]',headings:'main h1, [role="main"] h1, main h2, [role="main"] h2',colorTheme:"",fontFamily:"",fontSize:"",positionLeft:"",menuTextColor:"",menuBackgroundColor:"",menuitemFocusTextColor:"",menuitemFocusBackgroundColor:"",focusBorderColor:"",buttonTextColor:"",buttonBackgroundColor:""},colorThemes:{default:{fontFamily:"inherit",fontSize:"inherit",positionLeft:"46%",menuTextColor:"#1a1a1a",menuBackgroundColor:"#dcdcdc",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#1a1a1a",focusBorderColor:"#1a1a1a",buttonTextColor:"#1a1a1a",buttonBackgroundColor:"#eeeeee"},illinois:{fontFamily:"inherit",fontSize:"inherit",positionLeft:"46%",menuTextColor:"#00132c",menuBackgroundColor:"#cad9ef",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#00132c",focusBorderColor:"#ff552e",buttonTextColor:"#444444",buttonBackgroundColor:"#dddede"},aria:{fontFamily:"sans-serif",fontSize:"10pt",positionLeft:"7%",menuTextColor:"#000",menuBackgroundColor:"#def",menuitemFocusTextColor:"#fff",menuitemFocusBackgroundColor:"#005a9c",focusBorderColor:"#005a9c",buttonTextColor:"#005a9c",buttonBackgroundColor:"#ddd"}},defaultCSS:".skip-to.popup{position:absolute;top:-30em;left:0}.skip-to,.skip-to.popup.focus{position:absolute;top:0;left:$positionLeft;font-family:$fontFamily;font-size:$fontSize}.skip-to.fixed{position:fixed}.skip-to button{position:relative;margin:0;padding:6px 8px 6px 8px;border-width:0 1px 1px 1px;border-style:solid;border-radius:0 0 6px 6px;border-color:$buttonBackgroundColor;color:$menuTextColor;background-color:$buttonBackgroundColor;z-index:200;font-family:$fontFamily;font-size:$fontSize}.skip-to .skip-to-tooltip{position:absolute;top:2.25em;left:8em;margin:1px;padding:4px;border:1px solid #ccc;box-shadow:2px 3px 5px #ddd;background-color:#eee;color:#000;font-family:Helvetica,Arial,Sans-Serif;font-variant-numeric:slashed-zero;font-size:9pt;width:auto;display:none;white-space:nowrap;z-index:201}.skip-to .skip-to-tooltip.skip-to-show-tooltip{display:block}.skip-to [aria-expanded=true]+.skip-to-tooltip.skip-to-show-tooltip{display:none}.skip-to [role=menu]{position:absolute;min-width:17em;display:none;margin:0;padding:.25rem;background-color:$menuBackgroundColor;border-width:2px;border-style:solid;border-color:$focusBorderColor;border-radius:5px;z-index:1000}.skip-to [role=group]{display:grid;grid-auto-rows:min-content;grid-row-gap:1px}.skip-to [role=separator]:first-child{border-radius:5px 5px 0 0}.skip-to [role=menuitem]{padding:3px;width:auto;border-width:0;border-style:solid;color:$menuTextColor;background-color:$menuBackgroundColor;z-index:1000;display:grid;overflow-y:auto;grid-template-columns:repeat(6,1.2rem) 1fr;grid-column-gap:2px;font-size:1em}.skip-to [role=menuitem] .label,.skip-to [role=menuitem] .level{font-size:100%;font-weight:400;color:$menuTextColor;display:inline-block;background-color:$menuBackgroundColor;line-height:inherit;display:inline-block}.skip-to [role=menuitem] .level{text-align:right;padding-right:4px}.skip-to [role=menuitem] .label{text-align:left;margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skip-to [role=menuitem] .label:first-letter,.skip-to [role=menuitem] .level:first-letter{text-decoration:underline;text-transform:uppercase}.skip-to [role=menuitem].skip-to-h1 .level{grid-column:1}.skip-to [role=menuitem].skip-to-h2 .level{grid-column:2}.skip-to [role=menuitem].skip-to-h3 .level{grid-column:3}.skip-to [role=menuitem].skip-to-h4 .level{grid-column:4}.skip-to [role=menuitem].skip-to-h5 .level{grid-column:5}.skip-to [role=menuitem].skip-to-h6 .level{grid-column:8}.skip-to [role=menuitem].skip-to-h1 .label{grid-column:2/8}.skip-to [role=menuitem].skip-to-h2 .label{grid-column:3/8}.skip-to [role=menuitem].skip-to-h3 .label{grid-column:4/8}.skip-to [role=menuitem].skip-to-h4 .label{grid-column:5/8}.skip-to [role=menuitem].skip-to-h5 .label{grid-column:6/8}.skip-to [role=menuitem].skip-to-h6 .label{grid-column:7/8}.skip-to [role=menuitem].skip-to-h1.no-level .label{grid-column:1/8}.skip-to [role=menuitem].skip-to-h2.no-level .label{grid-column:2/8}.skip-to [role=menuitem].skip-to-h3.no-level .label{grid-column:3/8}.skip-to [role=menuitem].skip-to-h4.no-level .label{grid-column:4/8}.skip-to [role=menuitem].skip-to-h5.no-level .label{grid-column:5/8}.skip-to [role=menuitem].skip-to-h6.no-level .label{grid-column:6/8}.skip-to [role=menuitem].skip-to-nesting-level-1 .nesting{grid-column:1}.skip-to [role=menuitem].skip-to-nesting-level-2 .nesting{grid-column:2}.skip-to [role=menuitem].skip-to-nesting-level-3 .nesting{grid-column:3}.skip-to [role=menuitem].skip-to-nesting-level-0 .label{grid-column:1/8}.skip-to [role=menuitem].skip-to-nesting-level-1 .label{grid-column:2/8}.skip-to [role=menuitem].skip-to-nesting-level-2 .label{grid-column:3/8}.skip-to [role=menuitem].skip-to-nesting-level-3 .label{grid-column:4/8}.skip-to [role=menuitem].action .label,.skip-to [role=menuitem].no-items .label{grid-column:1/8}.skip-to [role=separator]{margin:1px 0 1px 0;padding:3px;display:block;width:auto;font-weight:700;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:$menuTextColor;background-color:$menuBackgroundColor;color:$menuTextColor;z-index:1000}.skip-to [role=separator] .mofn{font-weight:400;font-size:85%}.skip-to [role=separator]:first-child{border-radius:5px 5px 0 0}.skip-to [role=menuitem].last{border-radius:0 0 5px 5px}.skip-to.focus{display:block}.skip-to button:focus,.skip-to button:hover{background-color:$menuBackgroundColor;color:$menuTextColor;outline:0}.skip-to button:focus{padding:6px 7px 5px 7px;border-width:0 2px 2px 2px;border-color:$focusBorderColor}.skip-to [role=menuitem]:focus{padding:1px;border-width:2px;border-style:solid;border-color:$focusBorderColor;background-color:$menuitemFocusBackgroundColor;color:$menuitemFocusTextColor;outline:0}.skip-to [role=menuitem]:focus .label,.skip-to [role=menuitem]:focus .level{background-color:$menuitemFocusBackgroundColor;color:$menuitemFocusTextColor}",isNotEmptyString:function(str){return"string"==typeof str&&str.length},isEmptyString:function(str){return"string"!=typeof str||0===str.length},init:function(config){if(!document.querySelector("style#"+this.skipToId)){var attachElement=document.body;config&&this.setUpConfig(config),"string"==typeof this.config.attachElement&&(displayOption=document.querySelector(this.config.attachElement))&&displayOption.nodeType===Node.ELEMENT_NODE&&(attachElement=displayOption),this.addCSSColors(),this.renderStyleElement(this.defaultCSS);var displayOption=this.config.containerElement.toLowerCase().trim();this.isNotEmptyString(displayOption)||(displayOption="div"),this.domNode=document.createElement(displayOption),this.domNode.classList.add("skip-to"),this.isNotEmptyString(this.config.customClass)&&this.domNode.classList.add(this.config.customClass),this.isNotEmptyString(this.config.containerRole)&&this.domNode.setAttribute("role",this.config.containerRole);displayOption=this.config.displayOption;if("string"==typeof displayOption&&(displayOption=displayOption.trim().toLowerCase()).length)switch(this.config.displayOption){case"fixed":this.domNode.classList.add("fixed");break;case"onfocus":case"popup":this.domNode.classList.add("popup")}attachElement.firstElementChild?attachElement.insertBefore(this.domNode,attachElement.firstElementChild):attachElement.appendChild(this.domNode),this.buttonNode=document.createElement("button"),this.buttonNode.textContent=this.config.buttonLabel,this.buttonNode.setAttribute("aria-haspopup","true"),this.buttonNode.setAttribute("aria-expanded","false"),this.buttonNode.setAttribute("aria-controls",this.skipToMenuId),this.buttonNode.setAttribute("accesskey",this.config.accesskey),this.domNode.appendChild(this.buttonNode),this.renderTooltip(this.domNode,this.buttonNode),this.menuNode=document.createElement("div"),this.menuNode.setAttribute("role","menu"),this.menuNode.setAttribute("aria-busy","true"),this.menuNode.setAttribute("id",this.skipToMenuId),this.domNode.appendChild(this.menuNode),this.buttonNode.addEventListener("keydown",this.handleButtonKeydown.bind(this)),this.buttonNode.addEventListener("click",this.handleButtonClick.bind(this)),this.buttonNode.addEventListener("focus",this.handleButtonFocus.bind(this)),this.buttonNode.addEventListener("blur",this.handleButtonBlur.bind(this)),this.buttonNode.addEventListener("pointerenter",this.handleButtonPointerenter.bind(this)),this.buttonNode.addEventListener("pointerout",this.handleButtonPointerout.bind(this)),this.domNode.addEventListener("focusin",this.handleFocusin.bind(this)),this.domNode.addEventListener("focusout",this.handleFocusout.bind(this)),window.addEventListener("pointerdown",this.handleBackgroundPointerdown.bind(this),!0)}},renderTooltip:function(attachNode,buttonNode){var accesskey=this.getBrowserSpecificAccesskey(this.config.accesskey),tooltip=this.config.buttonTooltip;this.isNotEmptyString(this.config.buttonTitle)&&(tooltip=this.config.buttonTitle),this.tooltipLeft=buttonNode.getBoundingClientRect().width,this.tooltipTop=buttonNode.getBoundingClientRect().height,this.tooltipNode=document.createElement("div"),this.tooltipNode.setAttribute("role","tooltip"),this.tooltipNode.id="id-skip-to-tooltip",this.tooltipNode.classList.add("skip-to-tooltip"),this.isNotEmptyString(accesskey)&&(tooltip=this.config.buttonTooltipAccesskey.replace("$key",accesskey),this.isNotEmptyString(this.config.buttonTitleWithAccesskey)&&(tooltip=this.config.buttonTitleWithAccesskey.replace("$key",accesskey))),this.isEmptyString(tooltip)?this.config.enableTooltip=!1:this.tooltipNode.textContent=tooltip,attachNode.appendChild(this.tooltipNode),this.tooltipNode.style.left=this.tooltipLeft+"px",this.tooltipNode.style.top=this.tooltipTop+"px",this.tooltipNode.classList.add("skip-to-show-tooltip"),this.tooltipHeight=this.tooltipNode.getBoundingClientRect().height,this.tooltipNode.classList.remove("skip-to-show-tooltip")},updateStyle:function(stylePlaceholder,value,defaultValue){"string"==typeof value&&0!==value.length||(value=defaultValue);for(var index1=this.defaultCSS.indexOf(stylePlaceholder),index2=index1+stylePlaceholder.length;0<=index1&&index2<this.defaultCSS.length;)this.defaultCSS=this.defaultCSS.substring(0,index1)+value+this.defaultCSS.substring(index2),index2=(index1=this.defaultCSS.indexOf(stylePlaceholder,index2))+stylePlaceholder.length},addCSSColors:function(){var theme=this.colorThemes.default;"object"==typeof this.colorThemes[this.config.colorTheme]&&(theme=this.colorThemes[this.config.colorTheme]),this.updateStyle("$fontFamily",this.config.fontFamily,theme.fontFamily),this.updateStyle("$fontSize",this.config.fontSize,theme.fontSize),this.updateStyle("$positionLeft",this.config.positionLeft,theme.positionLeft),this.updateStyle("$menuTextColor",this.config.menuTextColor,theme.menuTextColor),this.updateStyle("$menuBackgroundColor",this.config.menuBackgroundColor,theme.menuBackgroundColor),this.updateStyle("$menuitemFocusTextColor",this.config.menuitemFocusTextColor,theme.menuitemFocusTextColor),this.updateStyle("$menuitemFocusBackgroundColor",this.config.menuitemFocusBackgroundColor,theme.menuitemFocusBackgroundColor),this.updateStyle("$focusBorderColor",this.config.focusBorderColor,theme.focusBorderColor),this.updateStyle("$buttonTextColor",this.config.buttonTextColor,theme.buttonTextColor),this.updateStyle("$buttonBackgroundColor",this.config.buttonBackgroundColor,theme.buttonBackgroundColor)},getBrowserSpecificAccesskey:function(accesskey){var hasOpera=navigator.userAgent.toLowerCase(),hasChrome=navigator.platform.toLowerCase(),hasWin=0<=hasChrome.indexOf("win"),hasMac=0<=hasChrome.indexOf("mac"),hasLinux=0<=hasChrome.indexOf("linux")||0<=hasChrome.indexOf("bsd"),hasAndroid=0<=hasOpera.indexOf("android"),hasFirefox=0<=hasOpera.indexOf("firefox"),hasChrome=0<=hasOpera.indexOf("chrome"),hasOpera=0<=hasOpera.indexOf("opr");if("string"!=typeof accesskey||0===accesskey.length)return"";if(hasWin||hasLinux&&!hasAndroid){if(hasFirefox)return"Shift + Alt + "+accesskey;if(hasChrome||hasOpera)return"Alt + "+accesskey}return hasMac?"Ctrl + Option + "+accesskey:""},setUpConfig:function(appConfig){var name,localConfig=this.config,appConfigSettings=void 0!==appConfig.settings?appConfig.settings.skipTo:{};for(name in appConfigSettings){if(void 0===localConfig[name]||!("string"==typeof appConfigSettings[name]&&0<appConfigSettings[name].length||"boolean"==typeof appConfigSettings[name]))throw new Error('** SkipTo Problem with user configuration option "'+name+'".');localConfig[name]=appConfigSettings[name]}},renderStyleElement:function(css){var styleNode=document.createElement("style"),headNode=document.getElementsByTagName("head")[0],css=document.createTextNode(css);styleNode.setAttribute("type","text/css"),styleNode.id=this.skipToId,styleNode.appendChild(css),headNode.appendChild(styleNode)},getFirstChar:function(label){var c="",label=label.querySelector(".label");return c=label&&this.isNotEmptyString(label.textContent)?label.textContent.trim()[0].toLowerCase():c},getHeadingLevelFromAttribute:function(menuitem){var level="";return level=menuitem.hasAttribute("data-level")?menuitem.getAttribute("data-level"):level},updateKeyboardShortCuts:function(){var mi;this.firstChars=[],this.headingLevels=[];for(var i=0;i<this.menuitemNodes.length;i+=1)mi=this.menuitemNodes[i],this.firstChars.push(this.getFirstChar(mi)),this.headingLevels.push(this.getHeadingLevelFromAttribute(mi))},updateMenuitems:function(){var menuitemNodes=this.menuNode.querySelectorAll("[role=menuitem");this.menuitemNodes=[];for(var i=0;i<menuitemNodes.length;i+=1)this.menuitemNodes.push(menuitemNodes[i]);this.firstMenuitem=this.menuitemNodes[0],this.lastMenuitem=this.menuitemNodes[this.menuitemNodes.length-1],this.lastMenuitem.classList.add("last"),this.updateKeyboardShortCuts()},renderMenuitemToGroup:function(tagNodeChild,mi){var tagNode,labelNode,menuitemNode=document.createElement("div");return menuitemNode.setAttribute("role","menuitem"),menuitemNode.classList.add(mi.class),this.isNotEmptyString(mi.tagName)&&menuitemNode.classList.add("skip-to-"+mi.tagName.toLowerCase()),menuitemNode.setAttribute("data-id",mi.dataId),menuitemNode.tabIndex=-1,this.isNotEmptyString(mi.ariaLabel)&&menuitemNode.setAttribute("aria-label",mi.ariaLabel),menuitemNode.addEventListener("keydown",this.handleMenuitemKeydown.bind(this)),menuitemNode.addEventListener("click",this.handleMenuitemClick.bind(this)),menuitemNode.addEventListener("pointerenter",this.handleMenuitemPointerenter.bind(this)),tagNodeChild.appendChild(menuitemNode),mi.class.includes("heading")&&(this.config.enableHeadingLevelShortcuts?(tagNode=document.createElement("span"),(tagNodeChild=document.createElement("span")).appendChild(document.createTextNode(mi.level)),tagNode.append(tagNodeChild),tagNode.appendChild(document.createTextNode(")")),tagNode.classList.add("level"),menuitemNode.append(tagNode)):menuitemNode.classList.add("no-level"),menuitemNode.setAttribute("data-level",mi.level),this.isNotEmptyString(mi.tagName)&&menuitemNode.classList.add("skip-to-"+mi.tagName)),mi.class.includes("landmark")&&(menuitemNode.setAttribute("data-nesting",mi.nestingLevel),menuitemNode.classList.add("skip-to-nesting-level-"+mi.nestingLevel),0<mi.nestingLevel&&mi.nestingLevel>this.lastNestingLevel&&((labelNode=document.createElement("span")).classList.add("nesting"),menuitemNode.append(labelNode)),this.lastNestingLevel=mi.nestingLevel),(labelNode=document.createElement("span")).appendChild(document.createTextNode(mi.name)),labelNode.classList.add("label"),menuitemNode.append(labelNode),menuitemNode},renderGroupLabel:function(titleNode,s,m,n){var mofnNode=document.getElementById(titleNode),titleNode=mofnNode.querySelector(".title"),mofnNode=mofnNode.querySelector(".mofn");titleNode.textContent=s,this.config.enableActions&&this.config.enableMofN&&"number"==typeof m&&"number"==typeof n&&(s=(s=(s=this.config.mofnGroupLabel).replace("$m",m)).replace("$n",n),mofnNode.textContent=s)},renderMenuitemGroup:function(groupId,title){var labelNode,groupNode,menuNode=this.menuNode;return this.isNotEmptyString(title)&&((labelNode=document.createElement("div")).id=groupId+"-label",labelNode.setAttribute("role","separator"),menuNode.appendChild(labelNode),(groupNode=document.createElement("span")).classList.add("title"),groupNode.textContent=title,labelNode.append(groupNode),(groupNode=document.createElement("span")).classList.add("mofn"),labelNode.append(groupNode),(groupNode=document.createElement("div")).setAttribute("role","group"),groupNode.setAttribute("aria-labelledby",labelNode.id),groupNode.id=groupId,menuNode.appendChild(groupNode),menuNode=groupNode),groupNode},removeMenuitemGroup:function(groupId){var node=document.getElementById(groupId);this.menuNode.removeChild(node),node=document.getElementById(groupId+"-label"),this.menuNode.removeChild(node)},renderMenuitemsToGroup:function(groupNode,menuitems,msgNoItemsFound){if(groupNode.innerHTML="",(this.lastNestingLevel=0)===menuitems.length){var item={};item.name=msgNoItemsFound,item.tagName="",item.class="no-items",item.dataId="",this.renderMenuitemToGroup(groupNode,item)}else for(var i=0;i<menuitems.length;i+=1)this.renderMenuitemToGroup(groupNode,menuitems[i])},getShowMoreHeadingsSelector:function(option){return"all"===option?this.showAllHeadingsSelector:this.config.headings},getShowMoreHeadingsLabel:function(option,n){var label=this.config.actionShowSelectedHeadingsLabel;return(label="all"===option?this.config.actionShowAllHeadingsLabel:label).replace("$num",n)},getShowMoreHeadingsAriaLabel:function(option,n){var label=this.config.actionShowSelectedHeadingsAriaLabel;return(label="all"===option?this.config.actionShowAllHeadingsAriaLabel:label).replace("$num",n)},renderActionMoreHeadings:function(groupNode){var headingsLen=this.getHeadings(this.getShowMoreHeadingsSelector("selected")).length,menuitemNode=this.getHeadings(this.getShowMoreHeadingsSelector("all")).length,noAction=headingsLen===menuitemNode,headingsLen=menuitemNode;return noAction||((menuitemNode={tagName:"",role:"menuitem",class:"action",dataId:"skip-to-more-headings"}).name=this.getShowMoreHeadingsLabel("all",headingsLen),menuitemNode.ariaLabel=this.getShowMoreHeadingsAriaLabel("all",headingsLen),(menuitemNode=this.renderMenuitemToGroup(groupNode,menuitemNode)).setAttribute("data-show-heading-option","all"),menuitemNode.title=this.config.actionShowHeadingsHelp),noAction},updateHeadingGroupMenuitems:function(option){var headings=this.getHeadings(this.getShowMoreHeadingsSelector("selected")),headingsLen=headings.length,groupNode=this.getHeadings(this.getShowMoreHeadingsSelector("all")),menuitemNode=groupNode.length,headings="all"===option?groupNode:headings;this.renderGroupLabel("id-skip-to-group-headings-label",this.config.headingGroupLabel,headings.length,groupNode.length),groupNode=document.getElementById("id-skip-to-group-headings"),this.renderMenuitemsToGroup(groupNode,headings,this.config.msgNoHeadingsFound),this.updateMenuitems(),groupNode.firstElementChild&&groupNode.firstElementChild.focus();headingsLen="all"===option?(option="selected",headingsLen):(option="all",menuitemNode),menuitemNode=this.menuNode.querySelector("[data-id=skip-to-more-headings]");menuitemNode.setAttribute("data-show-heading-option",option),menuitemNode.setAttribute("aria-label",this.getShowMoreHeadingsAriaLabel(option,headingsLen)),menuitemNode.querySelector("span.label").textContent=this.getShowMoreHeadingsLabel(option,headingsLen)},getShowMoreLandmarksSelector:function(option){return"all"===option?this.showAllLandmarksSelector:this.config.landmarks},getShowMoreLandmarksLabel:function(option,n){var label=this.config.actionShowSelectedLandmarksLabel;return(label="all"===option?this.config.actionShowAllLandmarksLabel:label).replace("$num",n)},getShowMoreLandmarksAriaLabel:function(option,n){var label=this.config.actionShowSelectedLandmarksAriaLabel;return(label="all"===option?this.config.actionShowAllLandmarksAriaLabel:label).replace("$num",n)},renderActionMoreLandmarks:function(groupNode){var landmarksLen=this.getLandmarks(this.getShowMoreLandmarksSelector("selected")).length,menuitemNode=this.getLandmarks(this.getShowMoreLandmarksSelector("all")).length,noAction=landmarksLen===menuitemNode,landmarksLen=menuitemNode;return noAction||((menuitemNode={tagName:"",role:"menuitem",class:"action",dataId:"skip-to-more-landmarks"}).name=this.getShowMoreLandmarksLabel("all",landmarksLen),menuitemNode.ariaLabel=this.getShowMoreLandmarksAriaLabel("all",landmarksLen),(menuitemNode=this.renderMenuitemToGroup(groupNode,menuitemNode)).setAttribute("data-show-landmark-option","all"),menuitemNode.title=this.config.actionShowLandmarksHelp),noAction},updateLandmarksGroupMenuitems:function(option){var landmarks=this.getLandmarks(this.getShowMoreLandmarksSelector("selected")),landmarksLen=landmarks.length,groupNode=this.getLandmarks(this.getShowMoreLandmarksSelector("all"),!0),menuitemNode=groupNode.length,landmarks="all"===option?groupNode:landmarks;this.renderGroupLabel("id-skip-to-group-landmarks-label",this.config.landmarkGroupLabel,landmarks.length,groupNode.length),groupNode=document.getElementById("id-skip-to-group-landmarks"),this.renderMenuitemsToGroup(groupNode,landmarks,this.config.msgNoLandmarksFound),this.updateMenuitems(),groupNode.firstElementChild&&groupNode.firstElementChild.focus();landmarksLen="all"===option?(option="selected",landmarksLen):(option="all",menuitemNode),menuitemNode=this.menuNode.querySelector("[data-id=skip-to-more-landmarks]");menuitemNode.setAttribute("data-show-landmark-option",option),menuitemNode.setAttribute("aria-label",this.getShowMoreLandmarksAriaLabel(option,landmarksLen)),menuitemNode.querySelector("span.label").textContent=this.getShowMoreLandmarksLabel(option,landmarksLen)},renderMenu:function(){for(var landmarkElements,headingElements,hasNoAction1,hasNoAction2;this.menuNode.lastElementChild;)this.menuNode.removeChild(this.menuNode.lastElementChild);headingElements=this.getShowMoreLandmarksSelector("all"),hasNoAction1=this.getLandmarks(headingElements,!0),headingElements=this.getShowMoreLandmarksSelector("selected"),landmarkElements=this.getLandmarks(headingElements),hasNoAction2=this.renderMenuitemGroup("id-skip-to-group-landmarks",this.config.landmarkGroupLabel),this.renderMenuitemsToGroup(hasNoAction2,landmarkElements,this.config.msgNoLandmarksFound),this.renderGroupLabel("id-skip-to-group-landmarks-label",this.config.landmarkGroupLabel,landmarkElements.length,hasNoAction1.length),headingElements=this.getShowMoreHeadingsSelector("all"),hasNoAction1=this.getHeadings(headingElements),headingElements=this.getShowMoreHeadingsSelector("selected"),headingElements=this.getHeadings(headingElements),hasNoAction2=this.renderMenuitemGroup("id-skip-to-group-headings",this.config.headingGroupLabel),this.renderMenuitemsToGroup(hasNoAction2,headingElements,this.config.msgNoHeadingsFound),this.renderGroupLabel("id-skip-to-group-headings-label",this.config.headingGroupLabel,headingElements.length,hasNoAction1.length),this.config.enableActions&&(hasNoAction2=this.renderMenuitemGroup("id-skip-to-group-actions",this.config.actionGroupLabel),hasNoAction1=this.renderActionMoreLandmarks(hasNoAction2),hasNoAction2=this.renderActionMoreHeadings(hasNoAction2),hasNoAction1&&hasNoAction2&&this.removeMenuitemGroup("id-skip-to-group-actions")),this.updateMenuitems()},setFocusToMenuitem:function(menuitem){menuitem&&menuitem.focus()},setFocusToFirstMenuitem:function(){this.setFocusToMenuitem(this.firstMenuitem)},setFocusToLastMenuitem:function(){this.setFocusToMenuitem(this.lastMenuitem)},setFocusToPreviousMenuitem:function(menuitem){var newMenuitem=menuitem===this.firstMenuitem?this.lastMenuitem:(newMenuitem=this.menuitemNodes.indexOf(menuitem),this.menuitemNodes[newMenuitem-1]);return this.setFocusToMenuitem(newMenuitem),newMenuitem},setFocusToNextMenuitem:function(menuitem){var newMenuitem=menuitem===this.lastMenuitem?this.firstMenuitem:(newMenuitem=this.menuitemNodes.indexOf(menuitem),this.menuitemNodes[newMenuitem+1]);return this.setFocusToMenuitem(newMenuitem),newMenuitem},setFocusByFirstCharacter:function(index,char){var start;1<char.length||(char=char.toLowerCase(),(start=this.menuitemNodes.indexOf(index)+1)>=this.menuitemNodes.length&&(start=0),-1<(index=-1===(index=-1===(index=-1===(index=this.firstChars.indexOf(char,start))?this.headingLevels.indexOf(char,start):index)?this.firstChars.indexOf(char,0):index)?this.headingLevels.indexOf(char,0):index)&&this.setFocusToMenuitem(this.menuitemNodes[index]))},getIndexFirstChars:function(startIndex,char){for(var i=startIndex;i<this.firstChars.length;i+=1)if(char===this.firstChars[i])return i;return-1},openPopup:function(){this.menuNode.setAttribute("aria-busy","true"),this.renderMenu(),this.menuNode.style.display="block",this.menuNode.removeAttribute("aria-busy"),this.buttonNode.setAttribute("aria-expanded","true")},closePopup:function(){this.isOpen()&&(this.buttonNode.setAttribute("aria-expanded","false"),this.menuNode.style.display="none")},isOpen:function(){return"true"===this.buttonNode.getAttribute("aria-expanded")},handleFocusin:function(){this.domNode.classList.add("focus")},handleFocusout:function(){this.domNode.classList.remove("focus")},handleButtonKeydown:function(event){var flag=!1;switch(event.key){case" ":case"Enter":case"ArrowDown":case"Down":this.openPopup(),this.setFocusToFirstMenuitem(),flag=!0;break;case"Esc":case"Escape":this.closePopup(),this.buttonNode.focus(),this.hideTooltip(),flag=!0;break;case"Up":case"ArrowUp":this.openPopup(),this.setFocusToLastMenuitem(),flag=!0}flag&&(event.stopPropagation(),event.preventDefault())},handleButtonClick:function(event){this.isOpen()?(this.closePopup(),this.buttonNode.focus()):(this.openPopup(),this.setFocusToFirstMenuitem()),event.stopPropagation(),event.preventDefault()},isTooltipHidden:function(){return this.tooltipNode.className.indexOf("skip-to-show-tooltip")<0},displayTooltip:function(){(this.showTooltipFocus||this.showTooltipHover)&&this.tooltipNode.classList.add("skip-to-show-tooltip")},showTooltip:function(){this.showTooltipFocus=!0,this.config.enableTooltip&&this.isTooltipHidden()&&(this.tooltipNode.style.left=this.tooltipLeft+"px",this.tooltipNode.style.top=this.tooltipTop+"px",setTimeout(this.displayTooltip.bind(this),this.tooltipTimerDelay))},hideTooltip:function(){this.showTooltipFocus=!1,this.config.enableTooltip&&this.tooltipNode.classList.remove("skip-to-show-tooltip")},handleButtonFocus:function(){this.showTooltip()},handleButtonBlur:function(){this.hideTooltip()},handleButtonPointerenter:function(event){var left,top;this.showTooltipHover=!0,this.config.enableTooltip&&this.isTooltipHidden()&&(top=this.buttonNode.getBoundingClientRect(),left=Math.min(this.tooltipLeft,event.pageX-top.left+this.tooltipHeight),this.tooltipNode.style.left=left+"px",top=event.pageY-top.top,this.tooltipNode.style.top=top+"px",setTimeout(this.showTooltip.bind(this),this.tooltipTimerDelay))},handleButtonPointerout:function(){this.showTooltipHover=!1,this.config.enableTooltip&&this.tooltipNode.classList.remove("skip-to-show-tooltip")},skipToElement:function(elem){var scrollNode,isVisible=this.isVisible,focusNode=!1;function findVisibleElement(e,selectors){if(e)for(var j=0;j<selectors.length;j+=1)for(var elems=e.querySelectorAll(selectors[j]),i=0;i<elems.length;i+=1)if(isVisible(elems[i]))return elems[i];return e}var isLandmark=elem.classList.contains("landmark"),isSearch=elem.classList.contains("skip-to-search"),isNav=elem.classList.contains("skip-to-nav");(elem=document.querySelector('[data-skip-to-id="'+elem.getAttribute("data-id")+'"]'))&&(isSearch&&(focusNode=findVisibleElement(elem,["input","button","input[type=button]","input[type=submit]","a"])),(focusNode=isNav?findVisibleElement(elem,["a","input","button","input[type=button]","input[type=submit]"]):focusNode)&&this.isVisible(focusNode)?(focusNode.focus(),focusNode.scrollIntoView({block:"nearest"})):((elem=isLandmark&&(scrollNode=findVisibleElement(elem,["h1","h2","h3","h4","h5","h6","section","article","p","li","a"]))?scrollNode:elem).tabIndex=-1,elem.focus(),elem.scrollIntoView({block:"center"})))},handleMenuitemAction:function(tgt){var option;switch(tgt.getAttribute("data-id")){case"":break;case"skip-to-more-headings":option=tgt.getAttribute("data-show-heading-option"),this.updateHeadingGroupMenuitems(option);break;case"skip-to-more-landmarks":option=tgt.getAttribute("data-show-landmark-option"),this.updateLandmarksGroupMenuitems(option);break;default:this.closePopup(),this.skipToElement(tgt)}},handleMenuitemKeydown:function(event){var tgt=event.currentTarget,key=event.key,flag=!1;function isPrintableCharacter(str){return 1===str.length&&str.match(/\S/)}if(!(event.ctrlKey||event.altKey||event.metaKey)){if(event.shiftKey)isPrintableCharacter(key)&&(this.setFocusByFirstCharacter(tgt,key),flag=!0),"Tab"===event.key&&(this.buttonNode.focus(),this.closePopup(),flag=!0);else switch(key){case"Enter":case" ":this.handleMenuitemAction(tgt),flag=!0;break;case"Esc":case"Escape":this.closePopup(),this.buttonNode.focus(),flag=!0;break;case"Up":case"ArrowUp":this.setFocusToPreviousMenuitem(tgt),flag=!0;break;case"ArrowDown":case"Down":this.setFocusToNextMenuitem(tgt),flag=!0;break;case"Home":case"PageUp":this.setFocusToFirstMenuitem(),flag=!0;break;case"End":case"PageDown":this.setFocusToLastMenuitem(),flag=!0;break;case"Tab":this.closePopup();break;default:isPrintableCharacter(key)&&(this.setFocusByFirstCharacter(tgt,key),flag=!0)}flag&&(event.stopPropagation(),event.preventDefault())}},handleMenuitemClick:function(event){this.handleMenuitemAction(event.currentTarget),event.stopPropagation(),event.preventDefault()},handleMenuitemPointerenter:function(event){event.currentTarget.focus()},handleBackgroundPointerdown:function(event){this.domNode.contains(event.target)||this.isOpen()&&(this.closePopup(),this.buttonNode.focus())},normalizeName:function(name){return"string"==typeof name?name.replace(/\w\S*/g,function(txt){return txt.charAt(0).toUpperCase()+txt.substr(1).toLowerCase()}):""},getTextContent:function(elem){var str="Test",strings=[];return function getText(e,strings){if(e.nodeType===Node.TEXT_NODE)strings.push(e.data);else if(e.nodeType===Node.ELEMENT_NODE){var tagName=e.tagName.toLowerCase();if("img"===tagName||"area"===tagName)e.alt&&strings.push(e.alt);else for(var c=e.firstChild;c;)getText(c,strings),c=c.nextSibling}}(elem,strings),str=strings.length?strings.join(" "):str},getAccessibleName:function(name){var labelledbyIds=name.getAttribute("aria-labelledby"),label=name.getAttribute("aria-label"),title=name.getAttribute("title"),name="";if(labelledbyIds&&labelledbyIds.length){for(var str,strings=[],ids=labelledbyIds.split(" "),i=0,l=(ids=!ids.length?[labelledbyIds]:ids).length;i<l;i+=1){var e=document.getElementById(ids[i]);(str=e?this.getTextContent(e):str)&&str.length&&strings.push(str)}name=strings.join(" ")}else this.isNotEmptyString(label)?name=label:this.isNotEmptyString(title)&&(name=title);return name},isVisible:function(element){return function isVisibleRec(el){if(9===el.nodeType)return!0;var hidden=window.getComputedStyle(el),display=hidden.getPropertyValue("display"),visibility=hidden.getPropertyValue("visibility"),hidden=el.getAttribute("hidden");return"none"!==display&&"hidden"!==visibility&&null===hidden&&isVisibleRec(el.parentNode)}(element)},getHeadings:function(targets){var headingElementsArr=[];if("string"==typeof(targets="string"!=typeof targets?this.config.headings:targets)&&0!==targets.length){for(var headings=document.querySelectorAll(targets),i=0,len=headings.length;i<len;i+=1){var dataId,level,heading=headings[i],headingItem=heading.getAttribute("role");"string"==typeof headingItem&&"presentation"===headingItem||this.isVisible(heading)&&(dataId=heading.hasAttribute("data-skip-to-id")?heading.getAttribute("data-skip-to-id"):(heading.setAttribute("data-skip-to-id",this.skipToIdIndex),this.skipToIdIndex),level=heading.tagName.substring(1),(headingItem={}).dataId=dataId.toString(),headingItem.class="heading",headingItem.name=this.getTextContent(heading),headingItem.ariaLabel=headingItem.name+", ",headingItem.ariaLabel+=this.config.headingLevelLabel+" "+level,headingItem.tagName=heading.tagName.toLowerCase(),headingItem.role="heading",headingItem.level=level,headingElementsArr.push(headingItem),this.skipToIdIndex+=1)}return headingElementsArr}},getLocalizedLandmarkName:function(tagName,name){var n;switch(tagName){case"aside":n=this.config.asideLabel;break;case"footer":n=this.config.footerLabel;break;case"form":n=this.config.formLabel;break;case"header":n=this.config.headerLabel;break;case"main":n=this.config.mainLabel;break;case"nav":n=this.config.navLabel;break;case"section":case"region":n=this.config.regionLabel;break;case"search":n=this.config.searchLabel;break;default:n=tagName}return this.isNotEmptyString(name)&&(n+=": "+name),n},getNestingLevel:function(landmark,landmarks){for(var nestingLevel=0,parentNode=landmark.parentNode;parentNode;){for(var i=0;i<landmarks.length;i+=1)if(landmarks[i]===parentNode&&3===(nestingLevel+=1))return 3;parentNode=parentNode.parentNode}return nestingLevel},getLandmarks:function(targets,allFlag){"boolean"!=typeof allFlag&&(allFlag=!1),"string"!=typeof targets&&(targets=this.config.landmarks);for(var landmarks=document.querySelectorAll(targets),mainElements=[],searchElements=[],navElements=[],asideElements=[],footerElements=[],regionElements=[],otherElements=[],allLandmarks=[],dataId="",i=0,len=landmarks.length;i<len;i+=1){var landmark=landmarks[i];if(landmark!==this.domNode){var role=landmark.getAttribute("role"),tagName=landmark.tagName.toLowerCase();if(("string"!=typeof role||"presentation"!==role)&&this.isVisible(landmark)){var role=role||tagName,name=this.getAccessibleName(landmark);switch("string"!=typeof name&&(name=""),role){case"banner":tagName="header";break;case"complementary":tagName="aside";break;case"contentinfo":tagName="footer";break;case"form":tagName="form";break;case"main":tagName="main";break;case"navigation":tagName="nav";break;case"region":tagName="section";break;case"search":tagName="search"}["aside","footer","form","header","main","nav","section","search"].indexOf(tagName)<0&&(tagName="main"),landmark.hasAttribute("aria-roledescription")&&(tagName=landmark.getAttribute("aria-roledescription").trim().replace(" ","-"));var dataId=landmark.hasAttribute("data-skip-to-id")?landmark.getAttribute("data-skip-to-id"):(landmark.setAttribute("data-skip-to-id",this.skipToIdIndex),this.skipToIdIndex),landmarkItem={};switch(landmarkItem.dataId=dataId.toString(),landmarkItem.class="landmark",landmarkItem.hasName=0<name.length,landmarkItem.name=this.getLocalizedLandmarkName(tagName,name),landmarkItem.tagName=tagName,landmarkItem.nestingLevel=0,allFlag&&(landmarkItem.nestingLevel=this.getNestingLevel(landmark,landmarks)),this.skipToIdIndex+=1,allLandmarks.push(landmarkItem),tagName){case"main":mainElements.push(landmarkItem);break;case"search":searchElements.push(landmarkItem);break;case"nav":navElements.push(landmarkItem);break;case"aside":asideElements.push(landmarkItem);break;case"footer":footerElements.push(landmarkItem);break;case"section":landmarkItem.hasName&&regionElements.push(landmarkItem);break;default:otherElements.push(landmarkItem)}}}}return allFlag?allLandmarks:[].concat(mainElements,searchElements,navElements,asideElements,regionElements,footerElements,otherElements)}};window.addEventListener("load",function(){SkipTo.init(window.SkipToConfig||("object"==typeof window.Joomla&&"function"==typeof window.Joomla.getOptions?window.Joomla.getOptions("skipto-settings",{}):{}))})}();
-//# sourceMappingURL=skipto.min.js.map/*@end @*/
+!function(){"use strict";class e{constructor(...e){this._flag=!1,this._label="debug";for(const[t,n]of e.entries())if(t<2)switch(typeof n){case"boolean":this._flag=n;break;case"string":this._label=n}}get flag(){return this._flag}set flag(e){"boolean"==typeof e&&(this._flag=e)}get label(){return this._label}set label(e){"string"==typeof e&&(this._label=e)}log(e,t){const n=t?"\n":"";console.log(`${n}[${this._label}] ${e}`)}tag(e,t){if(e&&e.tagName){const n=e.textContent.trim().replace(/\s+/g," ");this.log(`[${e.tagName}]: ${n.substring(0,40)}`,t)}}separator(e){this.log("-----------------------------",e)}}new e("style",!1).flag=!1;const t=document.createElement("template");function n(e,t){if("object"==typeof e[t])return e[t];let n="",o="",i="";const s=new URL(location.href).hostname,r=location.pathname;for(let t in e){const a=e[t].hostnameSelector,l=e[t].pathnameSelector;let d=!1,u=!1;a&&s.indexOf(a)>=0&&(!n||e[n].hostnameSelector.length<a.length?(n=t,d=!0,o=""):e[n].hostnameSelector.length===a.length&&(d=!0)),l&&r.indexOf(l)>=0&&(!o||e[o].pathnameSelector.length<l.length)&&(o=t,u=!0),d&&u&&(i=t)}return i?e[i]:n?e[n]:o?e[o]:e.default}function o(e,n,o,i){let s=i;"string"==typeof n&&n?s=n:"string"==typeof o&&o&&(s=o);let r=t.innerHTML,a=r.indexOf(e),l=a+e.length;for(;a>=0&&l<r.length;)l=(a=(r=r.substring(0,a)+s+r.substring(l)).indexOf(e,l))+e.length;t.innerHTML=r}function i(e,i,s){t.innerHTML=t.innerHTML.replaceAll("$skipToId","#"+s),function(e,t){const i=n(e,t.colorTheme),s=n(e,"default");"string"==typeof i.displayOption&&"fixed popup static".indexOf(i.displayOption.toLowerCase())>=0&&(t.displayOption=i.displayOption),o("$fontFamily",t.fontFamily,i.fontFamily,s.fontFamily),o("$fontSize",t.fontSize,i.fontSize,s.fontSize),o("$positionLeft",t.positionLeft,i.positionLeft,s.positionLeft),o("$mediaBreakPoint",t.mediaBreakPoint,i.mediaBreakPoint,s.mediaBreakPoint),o("$menuTextColor",t.menuTextColor,i.menuTextColor,s.menuTextColor),o("$menuBackgroundColor",t.menuBackgroundColor,i.menuBackgroundColor,s.menuBackgroundColor),o("$menuitemFocusTextColor",t.menuitemFocusTextColor,i.menuitemFocusTextColor,s.menuitemFocusTextColor),o("$menuitemFocusBackgroundColor",t.menuitemFocusBackgroundColor,i.menuitemFocusBackgroundColor,s.menuitemFocusBackgroundColor),o("$focusBorderColor",t.focusBorderColor,i.focusBorderColor,s.focusBorderColor),o("$buttonTextColor",t.buttonTextColor,i.buttonTextColor,s.buttonTextColor),o("$buttonBackgroundColor",t.buttonBackgroundColor,i.buttonBackgroundColor,s.buttonBackgroundColor),o("$zIndex",t.zIndex,i.zIndex,s.zIndex)}(e,i);const r=t.content.cloneNode(!0);r.id=`${s}-style`,document.getElementsByTagName("head")[0].appendChild(r)}function s(e,t){let n=e.getAttribute(t);return null===n?"":r(n)}function r(e){return e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"").replace(/\s+/g," ")}function a(e){return"string"==typeof e&&e.length&&e.trim()&&"&nbsp;"!==e}function l(e){let t=window.getComputedStyle(e).getPropertyValue("visibility");return"hidden"!==t&&"collapse"!==t&&!function e(t){if(!t||t.nodeType!==Node.ELEMENT_NODE)return!1;if(t.hasAttribute("hidden"))return!0;return"none"===window.getComputedStyle(t,null).getPropertyValue("display")||!!t.parentNode&&e(t.parentNode)}(e)}function d(e){return function(e){return!!e&&(e.nodeType===Node.TEXT_NODE&&(e=e.parentNode),e.nodeType===Node.ELEMENT_NODE&&e.hasAttribute("aria-hidden")&&"false"===e.getAttribute("aria-hidden").toLowerCase())}(e)||!function(e){if(!e)return!1;if(e.nodeType===Node.TEXT_NODE&&(e=e.parentNode),e.nodeType===Node.ELEMENT_NODE){const t=window.getComputedStyle(e,null).getPropertyValue("visibility");if(t)return"hidden"===t||"collapse"===t}return!1}(e)&&!function(e){if(!e)return!1;if(e.nodeType===Node.TEXT_NODE&&(e=e.parentNode),e.nodeType===Node.ELEMENT_NODE){if(e.hasAttribute("hidden"))return!0;if(e.hasAttribute("aria-hidden")&&"true"===e.getAttribute("aria-hidden").toLowerCase())return!0;const t=window.getComputedStyle(e,null).getPropertyValue("display");if(t)return"none"===t}return!1}(e)}function u(e){let t,n="",o=[];switch(e.nodeType){case Node.ELEMENT_NODE:if(e.hasAttribute("aria-label"))d(e)&&(n=e.getAttribute("aria-label"));else if(e instanceof HTMLSlotElement){(e.assignedNodes().length?e.assignedNodes():e.assignedNodes({flatten:!0})).forEach(e=>{(t=u(e)).length&&o.push(t)}),n=o.length?o.join(" "):""}else if(function(e){switch(e.tagName.toLowerCase()){case"img":case"area":return!0;case"input":return e.type&&"image"===e.type}return!1}(e)&&d(e))n=s(e,"alt");else if(e.hasChildNodes()){Array.from(e.childNodes).forEach(e=>{(t=u(e)).length&&o.push(t)}),n=o.length?o.join(" "):""}n=function(e,t){let n=t,o=getComputedStyle(e,":before").content,i=getComputedStyle(e,":after").content;'"'!==o[0]||o.toLowerCase().includes("moz-")||(n=o.substring(1,o.length-1)+n);'"'!==i[0]||i.toLowerCase().includes("moz-")||(n+=i.substring(1,i.length-1));return n}(e,n);break;case Node.TEXT_NODE:d(e)&&(n=r(e.textContent))}return n}function c(e,t,n=!1){let o="";return""===(o=function(e,t,n){const o=s(t,n),i=[];if(o.length){const t=o.split(" ");for(let n=0;n<t.length;n++){const o=e.getElementById(t[n]);if(o){const e=u(o);e&&e.length&&i.push(e)}}}if(i.length)return i.join(" ");return""}(e,t,"aria-labelledby"))&&t.hasAttribute("aria-label")&&(o=t.getAttribute("aria-label").trim()),""===o&&n&&(o=u(t)),""===o&&""!==t.title.trim()&&(o=t.title.trim()),o}t.innerHTML='\n<style type="text/css" id="id-skip-to-css">\n$skipToId.popup {\n  position: absolute;\n  top: -34px;\n  transition: top 0.35s ease;\n}\n\n$skipToId button .text {\n  padding: 6px 8px 6px 8px;\n  display: inline-block;\n}\n\n$skipToId button img {\n  height: 24px;\n  padding: 2px 4px 2px 4px;\n  display: none;\n  background-color: #e8e9ea;\n}\n\n$skipToId,\n$skipToId.popup.focus,\n$skipToId.popup:hover {\n  position: absolute;\n  top: 0;\n  left: $positionLeft;\n  font-family: $fontFamily;\n  font-size: $fontSize;\n  display: block;\n  border: none;\n  margin-bottom: 4px;\n  transition: left 1s ease;\n  z-index: $zIndex !important;\n}\n\n$skipToId button {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  border-width: 0px 1px 1px 1px;\n  border-style: solid;\n  border-radius: 0px 0px 6px 6px;\n  border-color: $buttonBackgroundColor;\n  color: $buttonTextColor;\n  background-color: $buttonBackgroundColor;\n  z-index: 100000 !important;\n  font-family: $fontFamily;\n  font-size: $fontSize;\n  z-index: $zIndex !important;\n}\n\n@media screen and (max-width: $mediaBreakPointpx) {\n  $skipToId button img {\n    display: block;\n  }\n\n  $skipToId button {\n    border-color: #e8e9ea;\n  }\n\n  $skipToId button .text {\n    display: none;\n  }\n}\n\n$skipToId.fixed {\n  position: fixed;\n}\n\n\n$skipToId [role="menu"] {\n  position: absolute;\n  min-width: 17em;\n  display: none;\n  margin: 0;\n  padding: 0.25rem;\n  background-color: $menuBackgroundColor;\n  border-width: 2px;\n  border-style: solid;\n  border-color: $focusBorderColor;\n  border-radius: 5px;\n  overflow-x: hidden;\n  z-index: $zIndex !important;\n}\n\n$skipToId [role="group"] {\n  display: grid;\n  grid-auto-rows: min-content;\n  grid-row-gap: 1px;\n}\n\n$skipToId [role="separator"]:first-child {\n  border-radius: 5px 5px 0 0;\n}\n\n$skipToId [role="menuitem"] {\n  padding: 3px;\n  width: auto;\n  border-width: 0px;\n  border-style: solid;\n  color: $menuTextColor;\n  background-color: $menuBackgroundColor;\n  display: grid;\n  overflow-y: clip;\n  grid-template-columns: repeat(6, 1.2rem) 1fr;\n  grid-column-gap: 2px;\n  font-size: 1em;\n  z-index: $zIndex !important;  \n}\n\n$skipToId [role="menuitem"] .level,\n$skipToId [role="menuitem"] .label {\n  font-size: 100%;\n  font-weight: normal;\n  color: $menuTextColor;\n  background-color: $menuBackgroundColor;\n  display: inline-block;\n  line-height: inherit;\n  display: inline-block;\n  white-space: nowrap;\n}\n\n$skipToId [role="menuitem"] .level {\n  text-align: right;\n  padding-right: 4px;\n}\n\n$skipToId [role="menuitem"] .label {\n  text-align: left;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n$skipToId [role="menuitem"] .level:first-letter,\n$skipToId [role="menuitem"] .label:first-letter {\n  text-decoration: underline;\n  text-transform: uppercase;\n}\n\n\n$skipToId [role="menuitem"].skip-to-h1 .level { grid-column: 1; }\n$skipToId [role="menuitem"].skip-to-h2 .level { grid-column: 2; }\n$skipToId [role="menuitem"].skip-to-h3 .level { grid-column: 3; }\n$skipToId [role="menuitem"].skip-to-h4 .level { grid-column: 4; }\n$skipToId [role="menuitem"].skip-to-h5 .level { grid-column: 5; }\n$skipToId [role="menuitem"].skip-to-h6 .level { grid-column: 8;}\n\n$skipToId [role="menuitem"].skip-to-h1 .label { grid-column: 2 / 8; }\n$skipToId [role="menuitem"].skip-to-h2 .label { grid-column: 3 / 8; }\n$skipToId [role="menuitem"].skip-to-h3 .label { grid-column: 4 / 8; }\n$skipToId [role="menuitem"].skip-to-h4 .label { grid-column: 5 / 8; }\n$skipToId [role="menuitem"].skip-to-h5 .label { grid-column: 6 / 8; }\n$skipToId [role="menuitem"].skip-to-h6 .label { grid-column: 7 / 8;}\n\n$skipToId [role="menuitem"].skip-to-h1.no-level .label { grid-column: 1 / 8; }\n$skipToId [role="menuitem"].skip-to-h2.no-level .label { grid-column: 2 / 8; }\n$skipToId [role="menuitem"].skip-to-h3.no-level .label { grid-column: 3 / 8; }\n$skipToId [role="menuitem"].skip-to-h4.no-level .label { grid-column: 4 / 8; }\n$skipToId [role="menuitem"].skip-to-h5.no-level .label { grid-column: 5 / 8; }\n$skipToId [role="menuitem"].skip-to-h6.no-level .label { grid-column: 6 / 8; }\n\n$skipToId [role="menuitem"].skip-to-nesting-level-1 .nesting { grid-column: 1; }\n$skipToId [role="menuitem"].skip-to-nesting-level-2 .nesting { grid-column: 2; }\n$skipToId [role="menuitem"].skip-to-nesting-level-3 .nesting { grid-column: 3; }\n\n$skipToId [role="menuitem"].skip-to-nesting-level-0 .label { grid-column: 1 / 8; }\n$skipToId [role="menuitem"].skip-to-nesting-level-1 .label { grid-column: 2 / 8; }\n$skipToId [role="menuitem"].skip-to-nesting-level-2 .label { grid-column: 3 / 8; }\n$skipToId [role="menuitem"].skip-to-nesting-level-3 .label { grid-column: 4 / 8; }\n\n$skipToId [role="menuitem"].no-items .label,\n$skipToId [role="menuitem"].action .label {\n  grid-column: 1 / 8;\n}\n\n$skipToId [role="separator"] {\n  margin: 1px 0px 1px 0px;\n  padding: 3px;\n  display: block;\n  width: auto;\n  font-weight: bold;\n  border-bottom-width: 1px;\n  border-bottom-style: solid;\n  border-bottom-color: $menuTextColor;\n  background-color: $menuBackgroundColor;\n  color: $menuTextColor;\n  z-index: $zIndex !important;\n}\n\n$skipToId [role="separator"] .mofn {\n  font-weight: normal;\n  font-size: 85%;\n}\n\n$skipToId [role="separator"]:first-child {\n  border-radius: 5px 5px 0 0;\n}\n\n$skipToId [role="menuitem"].last {\n  border-radius: 0 0 5px 5px;\n}\n\n/* focus styling */\n\n$skipToId.focus {\n  display: block;\n}\n\n$skipToId button:focus,\n$skipToId button:hover {\n  background-color: $menuBackgroundColor;\n  color: $menuTextColor;\n  outline: none;\n}\n\n$skipToId button:focus,\n$skipToId button:hover {\n  border-width: 0px 2px 2px 2px;\n  border-color: $focusBorderColor;\n}\n\n$skipToId button:focus .text,\n$skipToId button:hover .text {\n  padding: 6px 7px 5px 7px;\n}\n\n$skipToId button:focus img,\n$skipToId button:hover img {\n  padding: 2px 3px 4px 3px;\n}\n\n\n$skipToId [role="menuitem"]:focus {\n  padding: 1px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: $focusBorderColor;\n  background-color: $menuitemFocusBackgroundColor;\n  color: $menuitemFocusTextColor;\n  outline: none;\n}\n\n$skipToId [role="menuitem"]:focus .level,\n$skipToId [role="menuitem"]:focus .label {\n  background-color: $menuitemFocusBackgroundColor;\n  color: $menuitemFocusTextColor;\n}\n</style>\n',new e("Utils",!1).flag=!1,new e("nameFrom",!1).flag=!1,new e("accName",!1).flag=!1,new e("landmarksHeadings",!1).flag=!1;const m=["base","content","frame","iframe","input[type=hidden]","link","meta","noscript","script","style","template","shadow","title"],p=["banner","complementary","contentinfo","form","main","navigation","region","search"],h=["article","aside","footer","header","main","nav","region","section"];let g=0;function f(){return g}function b(){g+=1}function k(e){const t=e.tagName.toLowerCase(),n=e.hasAttribute("type")?e.getAttribute("type"):"",o="input"===t&&n.length?`${t}[type=${n}]`:t;return m.includes(o)}function C(e){return e.tagName.indexOf("-")>=0}function T(e){return e instanceof HTMLSlotElement}function N(e){for(e=e&&e.parentNode;e&&e.nodeType===Node.ELEMENT_NODE;){const t=e.tagName.toLowerCase();let n=e.getAttribute("role");if(n&&(n=n.toLowerCase()),h.includes(t)||p.includes(n))return!1;e=e.parentNode}return!0}function x(e){if(e.hasAttribute("role")){const t=e.getAttribute("role").toLowerCase();if(p.indexOf(t)>=0)return t}else{switch(e.tagName.toLowerCase()){case"aside":return"complementary";case"main":return"main";case"nav":return"navigation";case"header":if(N(e))return"banner";break;case"footer":if(N(e))return"contentinfo";break;case"section":if(e.hasAttribute("aria-label")||e.hasAttribute("aria-labelledby"))return"region"}}return""}function y(e,t){function n(e,t){var o=null;for(let i=e.firstChild;null!==i;i=i.nextSibling)if(i.nodeType===Node.ELEMENT_NODE&&!k(i))if(T(i)){const e=i.assignedNodes().length?i.assignedNodes():i.assignedNodes({flatten:!0});for(let i=0;i<e.length;i+=1){const s=e[i];if(s.nodeType===Node.ELEMENT_NODE){if(s.tagName.toLowerCase()===t&&l(s))return s;if(o=n(s,t))return o}}}else if(C(i)){if(i.shadowRoot&&(o=n(i.shadowRoot,t)))return o}else{if(i.tagName.toLowerCase()===t&&l(i))return i;if(o=n(i,t))return o}return!1}let o=!1;for(let i=0;i<t.length&&!(o=n(e,t[i]));i+=1);return o||e}function L(e){let t,n=!1,o=!1;const i=["input","button","a"],s=["a","input","button"],r=["h1","h2","h3","h4","h5","h6","section","article","p","li","a"],a=e.classList.contains("landmark"),d=e.classList.contains("skip-to-search"),u=e.classList.contains("skip-to-nav");var c;c=e.getAttribute("data-id"),(t=function e(t){var n=null;for(let o=t.firstChild;null!==o;o=o.nextSibling)if(o.nodeType===Node.ELEMENT_NODE){if(o.getAttribute("data-skip-to-id")===c)return o;if(!k(o))if(T(o)){const t=o.assignedNodes().length?o.assignedNodes():o.assignedNodes({flatten:!0});for(let o=0;o<t.length;o+=1){const i=t[o];if(i.nodeType===Node.ELEMENT_NODE){if(i.getAttribute("data-skip-to-id")===c)return i;if(n=e(i))return n}}}else if(C(o)){if(o.shadowRoot&&(n=e(o.shadowRoot)))return n}else if(n=e(o))return n}return!1}(document.body))&&(d&&(n=y(t,i)),u&&(n=y(t,s)),n&&l(n)?(n.tabIndex>=0?n.focus():(n.tabIndex=0,n.focus(),n.tabIndex=-1),n.scrollIntoView({block:"center"})):(a&&(o=y(t,r))&&(t=o),t.tabIndex>=0?t.focus():(t.tabIndex=0,t.focus(),t.tabIndex=-1),t.scrollIntoView({block:"center"})))}function A(e){const t=e.tagName.toLowerCase(),n=e.hasAttribute("role")?e.getAttribute("role").toLowerCase():"";return"main"===t||"main"===n}function w(e,t){let n=e.landmarks;"string"!=typeof n&&(console.warn("[skipto.js]: Error in landmark configuration"),n="main search navigation");let o=e.headings;"string"!=typeof o&&(console.warn("[skipto.js]: Error in heading configuration"),o="h1 h2");const[i,s]=function(e,t,n){let o=[],i=[],s=function(e){let t=[];return(e=e.toLowerCase()).includes("main")&&t.push("main"),e.includes("search")&&t.push("search"),e.includes("nav")&&t.push("navigation"),(e.includes("complementary")||e.includes("aside"))&&t.push("complementary"),(e.includes("banner")||e.includes("header"))&&t.push("banner"),(e.includes("contentinfo")||e.includes("footer"))&&t.push("contentinfo"),(e.includes("region")||e.includes("section"))&&t.push("region"),t}(e.toLowerCase()),r=function(e){let t=[];return["h1","h2","h3","h4","h5","h6"].forEach(n=>{e.includes(n)&&t.push(n)}),t}(t.toLowerCase()),a=t.includes("main");function l(e,t,d=null,u=!1){for(let m=e.firstChild;null!==m;m=m.nextSibling)if(m.nodeType===Node.ELEMENT_NODE){const e=m.tagName.toLowerCase();if(s.indexOf(x(m))>=0&&m.id!==n&&i.push({node:m,name:c(t,m)}),r.indexOf(e)>=0&&(a&&!u||o.push({node:m,name:c(t,m,!0)})),A(m)&&(u=!0),!k(m))if(T(m)){const e=m.assignedNodes().length>0,n=e?m.assignedNodes():m.assignedNodes({flatten:!0}),p=e?d:t;for(let m=0;m<n.length;m+=1){const h=n[m];if(h.nodeType===Node.ELEMENT_NODE){const g=n[m].tagName.toLowerCase();s.indexOf(x(h))>=0&&i.push({node:h,name:c(p,h)}),r.indexOf(g)>=0&&(a&&!u||o.push({node:h,name:c(p,h,!0)})),e?l(h,d,null,u):l(h,t,d,u)}}}else C(m)?m.shadowRoot&&l(m.shadowRoot,m.shadowRoot,t,u):l(m,t,d,u)}}return l(document.body,document),0===o.length&&a&&(a=!1,i=[],l(document.body,document),0===o.length?console.warn("[skipTo.js]: no headings found on page"):console.warn(`[skipTo.js]: no headings found in main landmark, but ${o.length} found in page.`)),0===i.length&&console.warn("[skipTo.js]: no landmarks found on page"),[i,o]}(n,o,t);return[I(e,i),E(e,s)]}function E(e,t){let n,o,i=[];for(let s=0,r=t.length;s<r;s+=1){let r=t[s],d=r.node.getAttribute("role");if(("string"!=typeof d||"presentation"!==d)&&(l(r.node)&&a(r.node.innerHTML))){r.node.hasAttribute("data-skip-to-id")?n=r.node.getAttribute("data-skip-to-id"):(n=f(),r.node.setAttribute("data-skip-to-id",n)),o=r.node.tagName.substring(1);const t={};t.dataId=n.toString(),t.class="heading",t.name=r.name,t.ariaLabel=t.name+", ",t.ariaLabel+=e.headingLevelLabel+" "+o,t.tagName=r.node.tagName.toLowerCase(),t.role="heading",t.level=o,i.push(t),b()}}return i}function v(e,t,n){let o;switch(t){case"aside":o=e.asideLabel;break;case"footer":o=e.footerLabel;break;case"form":o=e.formLabel;break;case"header":o=e.headerLabel;break;case"main":o=e.mainLabel;break;case"nav":o=e.navLabel;break;case"section":case"region":o=e.regionLabel;break;case"search":o=e.searchLabel;break;default:o=t}return a(n)&&(o+=": "+n),o}function I(e,t){let n=[],o=[],i=[],s=[],r=[],a=[],d=[],u="";for(let c=0,m=t.length;c<m;c+=1){let m=t[c];if("id-skip-to"===m.node.id)continue;let p=m.node.getAttribute("role"),h=m.node.tagName.toLowerCase();if(("string"!=typeof p||"presentation"!==p)&&l(m.node)){switch(p||(p=h),p){case"banner":h="header";break;case"complementary":h="aside";break;case"contentinfo":h="footer";break;case"form":h="form";break;case"main":h="main";break;case"navigation":h="nav";break;case"region":h="section";break;case"search":h="search"}["aside","footer","form","header","main","nav","section","search"].indexOf(h)<0&&(h="main"),m.node.hasAttribute("aria-roledescription")&&(h=m.node.getAttribute("aria-roledescription").trim().replace(" ","-")),m.node.hasAttribute("data-skip-to-id")?u=m.node.getAttribute("data-skip-to-id"):(u=f(),m.node.setAttribute("data-skip-to-id",u));const t={};switch(t.dataId=u.toString(),t.class="landmark",t.hasName=m.name.length>0,t.name=v(e,h,m.name),t.tagName=h,t.nestingLevel=0,b(),h){case"main":n.push(t);break;case"search":o.push(t);break;case"nav":i.push(t);break;case"aside":s.push(t);break;case"footer":r.push(t);break;case"section":t.hasName&&a.push(t);break;default:d.push(t)}}}return[].concat(n,o,i,s,a,r,d)}new e("SkipToButton",!1).flag=!1;class B{constructor(e,t,n){this.config=t,this.skiptoId=n,this.containerNode=document.createElement(t.containerElement),"nav"===t.containerElement&&this.containerNode.setAttribute("aria-label",t.buttonLabel),this.containerNode.id=n,a(t.customClass)&&this.containerNode.classList.add(t.customClass);let o=t.displayOption;if("string"==typeof o&&(o=o.trim().toLowerCase()).length)switch(t.displayOption){case"fixed":this.containerNode.classList.add("fixed");break;case"onfocus":case"popup":this.containerNode.classList.add("popup")}const[i,s]=this.getBrowserSpecificShortcut(t);this.buttonNode=document.createElement("button"),this.buttonNode.setAttribute("aria-label",s),this.buttonNode.addEventListener("keydown",this.handleButtonKeydown.bind(this)),this.buttonNode.addEventListener("click",this.handleButtonClick.bind(this)),this.containerNode.appendChild(this.buttonNode),this.buttonTextNode=document.createElement("span"),this.buttonTextNode.classList.add("text"),this.buttonTextNode.textContent=i,this.buttonNode.appendChild(this.buttonTextNode);const r=document.createElement("img");r.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABP5JREFUWAm9V11MXEUUnjN7KbuwKD/L8qOp2kpbWCSFpkZN2qIxjQYWaC2JD/4kxsTE1MQHeedBY6K+mPSpJsakhcSgFaQk+qCh1DZRQmioSypVa0q1IKC1bFlw753jN5e9txfobmkBJ1nm3DPnb87fHEhkWGWVBx9QYqFCkSxk4nuFYMpA7jkilkIsMHNCGnI8m9VPl8/3/e0hcMEVAosjTc+wsl5iomcFc75LuTYA4ug7IajDZ+Qfnxw5dsMR5xoQqm0qF/OqgwXXO4cbscOQCwb5npuI9Yxq+bYBJTUHwqaZHMSNN99USjNE4jQoxuD5KeBnBSm+eZ4BYglWsQkhCzKLLWB6DHC1wwEj4j6DaiZHei8ZGmklkx+CwFZOgqalT772+qG67vb2duUwrXUPVzfVKMv6GMbsQm4ETVO8D5mHqHxXNLSQUFcFC23MdSmz9k3Fus+tVeGt+IsjrUFWc2MwokyfS5lTZiQTYndKuY5H33LlYCplv+Xmyq0Ep8PRvI+nYl0TzjngeKiqoQP63lrEzT9sIK5hIFKLhh1I76HKxjal5t4Tc17s6mEtNlQVbZse7f3A5SJx0dWn+D5DsbwmhBvqCpcQQDDb+ChuKmTrauvfy61h4qAhz0x70JJ8PYpUm5aZFaBvRElN9KGiyga2f1UN46W1rcUe+g0BkdwSiWiH1f4TqmocAGKP1oYqGPEZfGDyfN+vG6J9mVDbgNKqaMRkHkQTCtjnTBa8960U8hRyZAxljT4g44IsN1uWyVn6SRJ0dEP4xOzh5rqJTOXsZnf4kcbHlcUn0DhKl0pb2xc8mkC8R5nk11lCdE6M9sa8El0DNFLXqVCJN+GJF3GFbV7CdYK1Z45RoTw8febLWS1ziQFeJeHqlq2CrZ2WEBUkuBBt+p5M9F5eJDgJKfwot3xcBnJoB7yAB3JxoRUPEwX26r6Q1gCHeD32+yOthfNi/mVc4m0ke44tk+jIzOjJN/4XA5xLhKuj+y3FvTBkE7ww5zMKwrYBoUj0VSAr/RR450qs6y+HYSN2tOJuJHpzygtPG7oRmUl1FAhaEAndtN51FBdVNp5A/PGU3uXCs5uKtfseoCq+R14sGsBUbiAmuuxsT6Ahl3tV+SR1YAIY8eLuDObZzf6CGT1MOIsFwcOL7QTtwm/PA87h8j2nuKgvPnv97HL8ar+DlkoMDR1NZqLPaED8z+mz8FBtJgGZzvQIVV7d/OAfP/aMp6PLaABmtxdMqbakY749nuOZlGt+tzncXtjGUBiWItNNCko9RildJlvHWd19CJDbK0NAnOsMJKiIpJFNcmLBGUiY6rz3DIZDTyAJC7y4O4F1Ev52rhsDz5L1qPNFQl0lPRwc+XTwCgqjDD3bkpKfnBrtO+0QredeHGnZycocQB/IQ+EnA5RT6uvv7+dAeHsRFO0BUj/kB3NLtsfmpsbG1lN5KNIYFUp9DuW2R0lS50Ssu9NuQBjNc/5N8BBKDq9WahFdRhccQBx/JhbX8MDNI6SLHcShSbdjggFtALEuwA9zJu2DYrfJ4fBSdl7W7t9/+GLGfYz0LGguzH2GPr03ndz1wEP5KZKB551x3TXAEV5UGW0h4lfwOO3HdbMd/Fp2/fLBu1/B7Z9Mx072emWtMMA5rK9vNy5MDW8zhbUVLsxDqebil5be4VvcETQ9ExL9g3/rf3lqh/9iV1cXZpuV6z8QFu9El3GwrAAAAABJRU5ErkJggg==",r.setAttribute("alt",""),this.buttonNode.appendChild(r),this.menuNode=document.createElement("div"),this.menuNode.id="id-skip-to-menu",this.menuNode.setAttribute("role","menu"),this.menuNode.setAttribute("aria-label",t.menuLabel),this.menuNode.setAttribute("aria-busy","true"),this.containerNode.appendChild(this.menuNode);const l=document.createElement("div");l.id="id-skip-to-menu-landmark-group-label",l.setAttribute("role","separator"),l.textContent=this.config.landmarkGroupLabel,this.menuNode.appendChild(l),this.landmarkGroupNode=document.createElement("div"),this.landmarkGroupNode.setAttribute("role","group"),this.landmarkGroupNode.setAttribute("aria-labelledby",l.id),this.landmarkGroupNode.id="#id-skip-to-menu-landmark-group",this.menuNode.appendChild(this.landmarkGroupNode);const d=document.createElement("div");return d.id="id-skip-to-menu-heading-group-label",d.setAttribute("role","separator"),d.textContent=this.config.headingGroupLabel,this.menuNode.appendChild(d),this.headingGroupNode=document.createElement("div"),this.headingGroupNode.setAttribute("role","group"),this.headingGroupNode.setAttribute("aria-labelledby",d.id),this.headingGroupNode.id="#id-skip-to-menu-heading-group",this.menuNode.appendChild(this.headingGroupNode),this.containerNode.addEventListener("focusin",this.handleFocusin.bind(this)),this.containerNode.addEventListener("focusout",this.handleFocusout.bind(this)),window.addEventListener("pointerdown",this.handleBackgroundPointerdown.bind(this),!0),(this.usesAltKey||this.usesOptionKey)&&document.addEventListener("keydown",this.handleDocumentKeydown.bind(this)),e.insertBefore(this.containerNode,e.firstElementChild),this.containerNode}getBrowserSpecificShortcut(e){const t=navigator.platform.toLowerCase(),n=navigator.userAgent.toLowerCase(),o=t.indexOf("win")>=0,i=t.indexOf("mac")>=0,s=t.indexOf("linux")>=0||t.indexOf("bsd")>=0,r=n.indexOf("android")>=0;this.usesAltKey=o||s&&!r,this.usesOptionKey=i;let a,l=e.buttonLabel,d=e.buttonLabel;return e.altShortcut&&e.optionShortcut&&((this.usesAltKey||this.usesOptionKey)&&(a=e.buttonShortcut.replace("$key",e.altShortcut)),this.usesAltKey&&(l+=a=a.replace("$modifier",e.altLabel),d=e.altButtonAriaLabel.replace("$key",e.altShortcut)),this.usesOptionKey&&(l+=a=a.replace("$modifier",e.optionLabel),d=e.optionButtonAriaLabel.replace("$key",e.altShortcut))),[l,d]}getFirstChar(e){const t=e.querySelector(".label");return t&&a(t.textContent)?t.textContent.trim()[0].toLowerCase():""}getHeadingLevelFromAttribute(e){return e.hasAttribute("data-level")?e.getAttribute("data-level"):""}updateKeyboardShortCuts(){let e;this.firstChars=[],this.headingLevels=[];for(let t=0;t<this.menuitemNodes.length;t+=1)e=this.menuitemNodes[t],this.firstChars.push(this.getFirstChar(e)),this.headingLevels.push(this.getHeadingLevelFromAttribute(e))}updateMenuitems(){let e=this.menuNode.querySelectorAll("[role=menuitem");this.menuitemNodes=[];for(let t=0;t<e.length;t+=1)this.menuitemNodes.push(e[t]);this.firstMenuitem=this.menuitemNodes[0],this.lastMenuitem=this.menuitemNodes[this.menuitemNodes.length-1],this.lastMenuitem.classList.add("last"),this.updateKeyboardShortCuts()}renderMenuitemToGroup(e,t){let n,o,i,s,r=document.createElement("div");return r.setAttribute("role","menuitem"),r.classList.add(t.class),a(t.tagName)&&r.classList.add("skip-to-"+t.tagName.toLowerCase()),r.setAttribute("data-id",t.dataId),r.tabIndex=-1,a(t.ariaLabel)&&r.setAttribute("aria-label",t.ariaLabel),r.addEventListener("keydown",this.handleMenuitemKeydown.bind(this)),r.addEventListener("click",this.handleMenuitemClick.bind(this)),r.addEventListener("pointerenter",this.handleMenuitemPointerenter.bind(this)),e.appendChild(r),t.class.includes("heading")&&(this.config.enableHeadingLevelShortcuts?(n=document.createElement("span"),(o=document.createElement("span")).appendChild(document.createTextNode(t.level)),n.append(o),n.appendChild(document.createTextNode(")")),n.classList.add("level"),r.append(n)):r.classList.add("no-level"),r.setAttribute("data-level",t.level),a(t.tagName)&&r.classList.add("skip-to-"+t.tagName)),t.class.includes("landmark")&&(r.setAttribute("data-nesting",t.nestingLevel),r.classList.add("skip-to-nesting-level-"+t.nestingLevel),t.nestingLevel>0&&t.nestingLevel>this.lastNestingLevel&&((s=document.createElement("span")).classList.add("nesting"),r.append(s)),this.lastNestingLevel=t.nestingLevel),(i=document.createElement("span")).appendChild(document.createTextNode(t.name)),i.classList.add("label"),r.append(i),r}renderMenuitemsToGroup(e,t,n){if(e.innerHTML="",this.lastNestingLevel=0,0===t.length){const t={};t.name=n,t.tagName="",t.class="no-items",t.dataId="",this.renderMenuitemToGroup(e,t)}else for(let n=0;n<t.length;n+=1)this.renderMenuitemToGroup(e,t[n])}renderMenu(){for(;this.landmarkGroupNode.lastElementChild;)this.landmarkGroupNode.removeChild(this.landmarkGroupNode.lastElementChild);for(;this.headingGroupNode.lastElementChild;)this.headingGroupNode.removeChild(this.headingGroupNode.lastElementChild);const[e,t]=w(this.config,this.skiptoId);this.renderMenuitemsToGroup(this.landmarkGroupNode,e,this.config.msgNoLandmarksFound),this.renderMenuitemsToGroup(this.headingGroupNode,t,this.config.msgNoHeadingsFound),this.updateMenuitems()}setFocusToMenuitem(e){e&&e.focus()}setFocusToFirstMenuitem(){this.setFocusToMenuitem(this.firstMenuitem)}setFocusToLastMenuitem(){this.setFocusToMenuitem(this.lastMenuitem)}setFocusToPreviousMenuitem(e){let t,n;return e===this.firstMenuitem?t=this.lastMenuitem:(n=this.menuitemNodes.indexOf(e),t=this.menuitemNodes[n-1]),this.setFocusToMenuitem(t),t}setFocusToNextMenuitem(e){let t,n;return e===this.lastMenuitem?t=this.firstMenuitem:(n=this.menuitemNodes.indexOf(e),t=this.menuitemNodes[n+1]),this.setFocusToMenuitem(t),t}setFocusByFirstCharacter(e,t){let n,o;t.length>1||(t=t.toLowerCase(),(n=this.menuitemNodes.indexOf(e)+1)>=this.menuitemNodes.length&&(n=0),-1===(o=this.firstChars.indexOf(t,n))&&(o=this.headingLevels.indexOf(t,n)),-1===o&&(o=this.firstChars.indexOf(t,0)),-1===o&&(o=this.headingLevels.indexOf(t,0)),o>-1&&this.setFocusToMenuitem(this.menuitemNodes[o]))}getIndexFirstChars(e,t){for(let n=e;n<this.firstChars.length;n+=1)if(t===this.firstChars[n])return n;return-1}openPopup(){this.menuNode.setAttribute("aria-busy","true");const e=80*window.innerHeight/100;this.menuNode.style.maxHeight=e+"px",this.renderMenu(),this.menuNode.style.display="block";const t=this.buttonNode.getBoundingClientRect(),n=this.menuNode.getBoundingClientRect(),o=window.innerWidth-t.left-n.width-8;o<0&&(t.left+o<0?this.menuNode.style.left=8-t.left+"px":this.menuNode.style.left=o+"px"),this.menuNode.removeAttribute("aria-busy"),this.buttonNode.setAttribute("aria-expanded","true")}closePopup(){this.isOpen()&&(this.buttonNode.setAttribute("aria-expanded","false"),this.menuNode.style.display="none")}isOpen(){return"true"===this.buttonNode.getAttribute("aria-expanded")}handleFocusin(){this.containerNode.classList.add("focus")}handleFocusout(){this.containerNode.classList.remove("focus")}handleButtonKeydown(e){let t=!1;switch(e.key){case" ":case"Enter":case"ArrowDown":case"Down":this.openPopup(),this.setFocusToFirstMenuitem(),t=!0;break;case"Esc":case"Escape":this.closePopup(),this.buttonNode.focus(),t=!0;break;case"Up":case"ArrowUp":this.openPopup(),this.setFocusToLastMenuitem(),t=!0}t&&(e.stopPropagation(),e.preventDefault())}handleButtonClick(e){this.isOpen()?(this.closePopup(),this.buttonNode.focus()):(this.openPopup(),this.setFocusToFirstMenuitem()),e.stopPropagation(),e.preventDefault()}handleDocumentKeydown(e){let t=e.key,n=!1,o=this.usesAltKey&&e.altKey&&!e.ctrlKey&&!e.shiftKey&&!e.metaKey;(this.usesOptionKey&&e.altKey&&!e.ctrlKey&&!e.shiftKey&&!e.metaKey&&this.config.optionShortcut===t||o&&this.config.altShortcut===t)&&(this.openPopup(),this.setFocusToFirstMenuitem(),n=!0),n&&(e.stopPropagation(),e.preventDefault())}handleMenuitemAction(e){switch(e.getAttribute("data-id")){case"":break;default:this.closePopup(),L(e)}}handleMenuitemKeydown(e){let t=e.currentTarget,n=e.key,o=!1;function i(e){return 1===e.length&&e.match(/\S/)}if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.shiftKey)i(n)&&(this.setFocusByFirstCharacter(t,n),o=!0),"Tab"===e.key&&(this.buttonNode.focus(),this.closePopup(),o=!0);else switch(n){case"Enter":case" ":this.handleMenuitemAction(t),o=!0;break;case"Esc":case"Escape":this.closePopup(),this.buttonNode.focus(),o=!0;break;case"Up":case"ArrowUp":this.setFocusToPreviousMenuitem(t),o=!0;break;case"ArrowDown":case"Down":this.setFocusToNextMenuitem(t),o=!0;break;case"Home":case"PageUp":this.setFocusToFirstMenuitem(),o=!0;break;case"End":case"PageDown":this.setFocusToLastMenuitem(),o=!0;break;case"Tab":this.closePopup();break;default:i(n)&&(this.setFocusByFirstCharacter(t,n),o=!0)}o&&(e.stopPropagation(),e.preventDefault())}}handleMenuitemClick(e){this.handleMenuitemAction(e.currentTarget),e.stopPropagation(),e.preventDefault()}handleMenuitemPointerenter(e){e.currentTarget.focus()}handleBackgroundPointerdown(e){this.containerNode.contains(e.target)||this.isOpen()&&(this.closePopup(),this.buttonNode.focus())}}new e("skipto",!1).flag=!0,function(){const e={skipToId:"id-skip-to",domNode:null,buttonNode:null,menuNode:null,menuitemNodes:[],firstMenuitem:!1,lastMenuitem:!1,firstChars:[],headingLevels:[],skipToIdIndex:1,config:{enableHeadingLevelShortcuts:!0,altShortcut:"0",optionShortcut:"º",attachElement:"body",displayOption:"static",containerElement:"nav",containerRole:"",customClass:"",buttonLabel:"Skip To Content",altLabel:"Alt",optionLabel:"Option",buttonShortcut:" ($modifier+$key)",altButtonAriaLabel:"Skip To Content, shortcut Alt plus $key",optionButtonAriaLabel:"Skip To Content, shortcut Option plus $key",menuLabel:"Landmarks and Headings",landmarkGroupLabel:"Landmark Regions",headingGroupLabel:"Headings",headingLevelLabel:"Heading level",mainLabel:"main",searchLabel:"search",navLabel:"navigation",regionLabel:"region",asideLabel:"complementary",footerLabel:"contentinfo",headerLabel:"banner",formLabel:"form",msgNoLandmarksFound:"No landmarks found",msgNoHeadingsFound:"No headings found",landmarks:"main search navigation complementary",headings:"main h1 h2",colorTheme:"",fontFamily:"",fontSize:"",positionLeft:"",mediaBreakPoint:"",menuTextColor:"",menuBackgroundColor:"",menuitemFocusTextColor:"",menuitemFocusBackgroundColor:"",focusBorderColor:"",buttonTextColor:"",buttonBackgroundColor:"",zIndex:""},colorThemes:{default:{fontFamily:"inherit",fontSize:"inherit",positionLeft:"46%",mediaBreakPoint:"540",menuTextColor:"#1a1a1a",menuBackgroundColor:"#dcdcdc",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#1a1a1a",focusBorderColor:"#1a1a1a",buttonTextColor:"#1a1a1a",buttonBackgroundColor:"#eeeeee",zIndex:"100000"},aria:{hostnameSelector:"w3.org",pathnameSelector:"ARIA/apg",fontFamily:"sans-serif",fontSize:"10pt",positionLeft:"7%",menuTextColor:"#000",menuBackgroundColor:"#def",menuitemFocusTextColor:"#fff",menuitemFocusBackgroundColor:"#005a9c",focusBorderColor:"#005a9c",buttonTextColor:"#005a9c",buttonBackgroundColor:"#ddd"},illinois:{hostnameSelector:"illinois.edu",menuTextColor:"#00132c",menuBackgroundColor:"#cad9ef",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#00132c",focusBorderColor:"#ff552e",buttonTextColor:"#444444",buttonBackgroundColor:"#dddede"},skipto:{hostnameSelector:"skipto-landmarks-headings.github.io",fontSize:"14px",menuTextColor:"#00132c",menuBackgroundColor:"#cad9ef",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#00132c",focusBorderColor:"#ff552e",buttonTextColor:"#444444",buttonBackgroundColor:"#dddede"},uic:{hostnameSelector:"uic.edu",menuTextColor:"#001e62",menuBackgroundColor:"#f8f8f8",menuitemFocusTextColor:"#ffffff",menuitemFocusBackgroundColor:"#001e62",focusBorderColor:"#d50032",buttonTextColor:"#ffffff",buttonBackgroundColor:"#001e62"},uillinois:{hostnameSelector:"uillinois.edu",menuTextColor:"#001e62",menuBackgroundColor:"#e8e9ea",menuitemFocusTextColor:"#f8f8f8",menuitemFocusBackgroundColor:"#13294b",focusBorderColor:"#dd3403",buttonTextColor:"#e8e9ea",buttonBackgroundColor:"#13294b"},uis:{hostnameSelector:"uis.edu",menuTextColor:"#036",menuBackgroundColor:"#fff",menuitemFocusTextColor:"#fff",menuitemFocusBackgroundColor:"#036",focusBorderColor:"#dd3444",buttonTextColor:"#fff",buttonBackgroundColor:"#036"}},init:function(e){let t;if(document.skipToHasBeenLoaded)return void console.warn("[skipTo.js] Skipto is already loaded!");document.skipToHasBeenLoaded=!0;let n=document.body;e&&(this.config=this.setupConfigFromGlobal(this.config,e)),this.config=this.setupConfigFromDataAttribute(this.config),"string"==typeof this.config.attachElement&&(t=document.querySelector(this.config.attachElement))&&t.nodeType===Node.ELEMENT_NODE&&(n=t),i(this.colorThemes,this.config,this.skipToId),new B(n,this.config,this.skipToId)},setupConfigFromGlobal:function(e,t){let n={};"object"==typeof t.settings&&"object"==typeof t.settings.skipTo?n=t.settings.skipTo:"object"==typeof t&&(n=t);for(const t in n)void 0!==e[t]&&("string"==typeof n[t]&&n[t].length>0||"boolean"==typeof n[t])?e[t]=n[t]:console.warn("[SkipTo]: Unsupported or deprecated configuration option in global configuration object: "+t);return e},setupConfigFromDataAttribute:function(e){let t={};const n=document.querySelector("[data-skipto]");if(n){const e=n.getAttribute("data-skipto");if(e){e.split(";").forEach(e=>{let[n,o]=e.split(":");n&&(n=n.trim()),o&&(o=o.trim()),n&&o&&(t[n]=o)})}}for(const n in t)void 0!==e[n]&&("string"==typeof t[n]&&t[n].length>0||"boolean"==typeof t[n])?e[n]=t[n]:console.warn("[SkipTo]: Unsupported or deprecated configuration option in data-skipto attribute: "+n);return e}};window.addEventListener("load",function(){e.init(window.SkipToConfig)})}()}();
\ No newline at end of file
diff --git a/scripts/pre-build/library/transformPatternIndex.js b/scripts/pre-build/library/transformPatternIndex.js
index 2a453cdfb..104638e0b 100644
--- a/scripts/pre-build/library/transformPatternIndex.js
+++ b/scripts/pre-build/library/transformPatternIndex.js
@@ -65,8 +65,8 @@ const transformPatternIndex = async (sourcePath /* , sourceContents */) => {
     {% include read-this-first.html %}
     <ul class="tiles">
       ${patterns
-        .map((pattern, index) => {
-          let patternContent = `
+        .map(
+          (pattern) => `
             <li class="tile tile-${pattern.slug}">
               <a href="{{ '/ARIA/apg/${pattern.sitePath}' | relative_url }}">
                 <h2 class="tile-name">
@@ -79,40 +79,8 @@ const transformPatternIndex = async (sourcePath /* , sourceContents */) => {
               </a>
               <div class="tile-introduction">${pattern.introduction}</div>
             </li>
-          `;
-
-          if (pattern.title.startsWith("Grid")) {
-            if (!patterns[index + 1].title.startsWith("Link")) {
-              throw new Error(
-                "Cannot insert the landmarks pattern link because the " +
-                  "correct alphabetical position has diverged from a known " +
-                  "state."
-              );
-            }
-            // This pattern is not like the others and needs separate handling
-            patternContent += `
-              <li class="tile tile-landmarks">
-                <a 
-                  href="{{ '/ARIA/apg/patterns/landmarks/examples/general-principles.html' | relative_url }}"
-                >
-                  <h2 class="tile-name">
-                    <img 
-                      src="{{ '/content-images/wai-aria-practices/img/landmarks.svg' | relative_url }}" 
-                      alt=""
-                    >
-                    <span>Landmarks</span>
-                  </h2>
-                </a>
-                <div class="tile-introduction">
-                  Landmarks provide a powerful way to identify the 
-                  organization and structure of a web page.
-                </div>
-              </li>
-            `;
-          }
-
-          return patternContent;
-        })
+          `
+        )
         .join(" ")}
     </ul>
   `;