Support adding a landmarks pattern page

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 }}"

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 }}"

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 }}"

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 }}"

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 }}"