Merge pull request #280 from w3c/patterns-practices-pages

Source patterns and practices pages from APG

ARIA/apg/patterns/accordion/accordion-pattern.md

@@ -80,9 +80,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/accordion.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-accordion.svg">
         <h2>Example</h2>
         <p><a href="examples/accordion/">Accordion Example</a>: demonstrates a form divided into three sections using an accordion to show one section at a time.</p>
       </section>

ARIA/apg/patterns/accordion/examples/accordion.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -93,10 +93,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/accordion.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-accordion.svg">
         <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>
 

ARIA/apg/patterns/alert/alert-pattern.md

@@ -81,9 +81,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/alert.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-alert.svg">
         <h2>Example</h2>
         <p><a href="examples/alert/">Alert Example</a></p>
       </section>

ARIA/apg/patterns/alert/examples/alert.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -97,10 +97,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/alert.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-alert.svg">
         <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.

ARIA/apg/patterns/alertdialog/alertdialog-pattern.md

@@ -69,9 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/alertdialog.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-alertdialog.svg">
         <h2>Example</h2>
         <p><a href="examples/alertdialog/">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</p>
       </section>

ARIA/apg/patterns/alertdialog/examples/alertdialog.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/alertdialog.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-alertdialog.svg">
         <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.

ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md

@@ -69,9 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/breadcrumb.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-breadcrumb.svg">
         <h2>Example</h2>
         <p><a href="examples/breadcrumb/">Breadcrumb design pattern example</a></p>
       </section>

ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -93,10 +93,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/breadcrumb.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-breadcrumb.svg">
         <p>The following example demonstrates the <a href="../../">Breadcrumb Pattern</a>.</p>
       </section>
 

ARIA/apg/patterns/button/button-pattern.md

@@ -90,9 +90,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/button.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-button.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/button/">Button Examples</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.</li>

ARIA/apg/patterns/button/examples/button.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -95,10 +95,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/button.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-button.svg">
         <p>The following command and toggle button examples demonstrate the <a href="../../">Button Pattern</a>.</p>
         <p>Similar examples include:</p>
         <ul>

ARIA/apg/patterns/button/examples/button_idl.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -96,6 +96,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
       <section>
         <h2>About This example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-button.svg">
         <p>The following examples of the <a href="../../">Button Pattern</a> demonstrate a new JavaScript syntax for coding ARIA attributes.</p>
         <p>
           The JavaScript for the example buttons on this page uses the <a class="specref" href="https://w3c.github.io/aria/#idl-interface">IDL Interface defined in ARIA 1.2</a>.
@@ -121,10 +122,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <a href="https://github.com/w3c/aria-practices/issues/1692" target="_blank">browser that does not yet provide support for ARIA attribute reflection</a>,
               the buttons will not be styled correctly.
             </p>
-          </div><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/button.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+          </div>
 
           <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
           <div tabindex="0" id="action">Print Page</div>

ARIA/apg/patterns/carousel/carousel-pattern.md

@@ -97,9 +97,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </ul>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/carousel.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-carousel.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/carousel-1-prev-next/">Auto-Rotating Image Carousel with Buttons for Slide Control:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.</li>

ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -96,10 +96,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/carousel.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-carousel.svg">
         <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.

ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/carousel.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-carousel.svg">
         <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.

ARIA/apg/patterns/checkbox/checkbox-pattern.md

@@ -83,9 +83,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </ul>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/checkbox.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-checkbox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/checkbox/">Checkbox (Two-State) Example</a>: Demonstrates a simple 2-state checkbox.</li>

ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/checkbox.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-checkbox.svg">
         <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.

ARIA/apg/patterns/checkbox/examples/checkbox.md

@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 24 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -94,10 +94,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
 
       <section>
-        <h2>About This Example</h2><img alt=""
-    src="{{ '/content-images/wai-aria-practices/img/checkbox.svg' | relative_url }}"
-    class="example-page-example-icon"
-  >
+        <h2>About This Example</h2>
+        <img alt class="example-page-example-icon" src="../../../../../../content-images/wai-aria-practices/images/pattern-checkbox.svg">
         <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>

ARIA/apg/patterns/combobox/combobox-pattern.md

@@ -143,9 +143,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
       </section>
 
-      <section id="examples" class="examples-section"><img alt="" 
-      src="{{ '/content-images/wai-aria-practices/img/combobox.svg' | relative_url }}"
-    >
+      <section id="examples" class="examples-section">
+        <img alt src="../../../../content-images/wai-aria-practices/images/pattern-combobox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/combobox-select-only/">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>