Launch fixes

.gitignore

@@ -6,4 +6,3 @@ vendor
 node_modules
 .netlify
 .bundle
-landmarks

index/accordion/accordion.md → ARIA/APG/example-index/accordion/accordion.md

@@ -1,12 +1,21 @@
 ---
 # This is a generated file
 title: "Accordion Example"
-ref: /aria-practices/
+ref: /aria/apg/example-index/accordion/accordion
 
 github:
   repository: w3c/aria-practices
-  path: aria-practices.html
-permalink: /index/accordion/accordion
+  branch: main
+  path: examples/accordion/accordion.html
+feedbackmail: [email protected]
+permalink: /aria/apg/example-index/accordion/accordion
+
+sidebar: true
+
+footer: "          <div class='example-page-footer'>            <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>            <p>Page last updated: November 23, 2021</p>          </div>        "
+
+# Context here: https://github.com/w3c/wai-aria-practices/issues/31
+type_of_guidance: APG
 
 lang: en
 ---
@@ -17,62 +26,65 @@ lang: en
 <link rel="stylesheet" type="text/css" href="css/accordion.css" />
 
 
-<link rel="stylesheet" href="/assets/styles.css">
+<link 
+  rel="stylesheet"
+  href="{{ '/content-assets/wai-aria-practices/styles.css' | relative_url }}"
+>
 <!-- Code highlighting styles -->
-<link rel="stylesheet" href="/index/css/github.css">
+<link 
+  rel="stylesheet"
+  href="{{ '/aria/apg/example-index/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>
+
 <div>
 
-        <div class="sidebar-container">
-          <aside class="sidebar-left" aria-describedby="sidebar-toc">
-            <h2 id="sidebar-toc" class="sidebar-headline">Table of Contents</h2>
-            <ul class="sidebar-list">
-
-                    <li>
-                      <a href="#ex_label">Example</a>
-                    </li>
-
-                    <li>
-                      <a href="#kbd_label">Keyboard Support</a>
-                    </li>
-
-                    <li>
-                      <a href="#rps_label">Role, Property, State, and Tabindex  Attributes</a>
-                    </li>
-
-                    <li>
-                      <a href="#javascript-and-css-source-code">Javascript and CSS Source Code</a>
-                    </li>
-
-                    <li>
-                      <a href="#sc1_label">HTML Source Code</a>
-                    </li>
-
-            </ul>
-
-    <ul class="sidebar-list sidebar-list-yellow">
-      <li><a href="/about/#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
-      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
-      <li><a href="https://github.com/w3c/aria-practices/projects/8">Related Issues</a></li>
-      <li><a href="/patterns/accordion/">Design Pattern</a></li>
+            <h2>About This Example</h2>
+            <details id="support-notice" class="note">
+    <summary>Important Note About Use of This Example</summary>
+    <p>
+        Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
+    </p>
+    <ul>
+    <li>
+        There may be support gaps in some
+        <a href="{{ '/aria/apg/practices/read-me-first/#browser_and_AT_support' | relative_url }}">browser and assistive technology combinations</a>,
+        especially for <a href="{{ '/aria/apg/practices/read-me-first/#mobile_and_touch_support' | relative_url }}">mobile/touch devices</a>.
+        Testing code based on this example with assistive technologies is essential before considering use in production systems.
+    </li>
+    <li>
+        The <a href="https://aria-at.w3.org">ARIA and Assistive Technologies Project</a>
+        is developing measurements of assistive technology support for APG examples.
+    </li>
+    <li>
+        Robust accessibility can be further optimized by choosing implementation patterns that
+        <a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a>
+        and heeding the warning that
+        <a href="{{ '/aria/apg/practices/read-me-first/#no_aria_better_bad_aria' | relative_url }}">No ARIA is better than Bad ARIA</a>.
+    </li>
     </ul>
-
-          </aside>
-          <div class="sidebar-right"><h2 class="followed-by-support-notice">About This Example</h2><img alt=""
-        src="/assets/img/accordion.svg"
-        class="example-page-example-icon"
-      >
+</details>
+          <img alt=""
+          src="{{ '/content-images/wai-aria-practices/img/accordion.svg' | relative_url }}"
+          class="example-page-example-icon"
+        >
 
   <div>
 
   <p>
     The below example section contains a simple personal information input form divided into 3 sections
     that demonstrates the
-    <a href="/patterns/accordion/">design pattern for accordion</a>.
+    <a href="{{ '/aria/apg/patterns/accordion/' | relative_url }}">design pattern for accordion</a>.
   </p>
   <section>
     <div class="example-header">
-      <h2 id="ex_label" tabindex="-1">Example</h2>
+      <h2 id="ex_label">Example</h2>
     </div>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
     <div id="ex1">
@@ -196,7 +208,7 @@ lang: en
     <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>
   <section>
-    <h2 id="kbd_label" tabindex="-1">Keyboard Support</h2>
+    <h2 id="kbd_label">Keyboard Support</h2>
     <div class="table-wrap"><table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
@@ -232,7 +244,7 @@ lang: en
   </section>
 
   <section>
-    <h2 id="rps_label" tabindex="-1">Role, Property, State, and Tabindex  Attributes</h2>
+    <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
     <div class="table-wrap"><table aria-labelledby="rps_label" class="data attributes">
       <thead>
@@ -295,15 +307,15 @@ lang: en
   </section>
 
   <section>
-    <h2 tabindex="-1" id="javascript-and-css-source-code">Javascript and CSS Source Code</h2>
+    <h2>Javascript and CSS Source Code</h2>
     <ul id="css_js_files">
       <li>CSS: <a href="css/accordion.css" type="tex/css">accordion.css</a></li>
       <li>JavaScript: <a href="js/accordion.js" type="text/javascript">accordion.js</a></li>
     </ul>
   </section>
 
   <section>
-    <h2 id="sc1_label" tabindex="-1">HTML Source Code</h2>
+    <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
     <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
@@ -314,13 +326,9 @@ lang: en
   </section>
 
   </div>
-  <nav>
-    <a href="/patterns/accordion/">Accordion Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
-  </nav>
+
   <script src="js/accordion.js"></script>
-</div>
-        </div>
-
+
 </div>
 <script>
   var SkipToConfig = {
@@ -333,4 +341,6 @@ lang: en
     }
   };
 </script>
-<script src="/assets/skipto.min.js"></script>
+<script 
+  src="{{ '/content-assets/wai-aria-practices/skipto.min.js' | relative_url }}"
+></script>