Merge pull request #2537 from w3c/move-examples-build-fixes

Content tweaks for building website (part of issue 2418 task 11)
w3c · Nov 22, 2022 · 8a603a2 · 8a603a2
2 parents 82c2831 + a3a2d04
commit 8a603a2
Show file tree

Hide file tree

Showing 47 changed files with 935 additions and 794 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -63,6 +63,14 @@
         "strict": 0,
         "no-unused-vars":  ["error", { "varsIgnorePattern": "SkipToConfig" }]
       }
+    },
+    {
+      "files": [ "content/shared/js/app.js" ],
+      "parserOptions": { "ecmaVersion": 11 }
+    },
+    {
+      "files": [ "content/shared/js/specLinks.mjs" ],
+      "parserOptions": { "sourceType": "module" }
     }
   ]
 }
diff --git a/content/about/about.html b/content/about/about.html
@@ -7,15 +7,15 @@
 
     <!-- Core JS and CSS shared by about content-->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
-    <link rel="stylesheet" href="../../shared/css/core.css">
-    <script src="../../shared/js/highlight.pack.js"></script>
-    <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <link rel="stylesheet" href="../shared/css/core.css">
+    <script src="../shared/js/highlight.pack.js"></script>
+    <script src="../shared/js/app.js"></script>
+    <script src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
       <h1>About</h1>
-      
+
       <section id="intro">
         <h2>Introduction</h2>
         <p>
@@ -55,7 +55,7 @@ <h2>Introduction</h2>
 
       <section id="change_log">
         <h2>Change History</h2>
-        
+
         <p>
           APG 1.1 supported ARIA 1.1, and this version, APG 1.2, includes changes to support version 1.2 of the ARIA specification.
           It also includes nearly 200 significant updates to improve the quality and breadth of content.
@@ -103,7 +103,7 @@ <h2>Change History</h2>
           </li>
         </ul>
       </section>
-      
+
       <section id="acknowledgements">
         <h2>Acknowledgements</h2>
         <h3>Editors</h3>
@@ -122,7 +122,7 @@ <h3>Editors</h3>
             (<span class="p-org org h-org">Adobe</span>)
           </dd>
           <dd class="editor p-author h-card vcard" data-editor-id="74040">
-            <span class="p-name fn">ZoÃ« Bijl</span> (<span class="p-org org h-org">Invited Expert</span>)
+            <span class="p-name fn">Zoë Bijl</span> (<span class="p-org org h-org">Invited Expert</span>)
           </dd>
           <dd class="editor p-author h-card vcard" data-editor-id="34017">
             <a class="u-url url p-name fn" href="https://www.w3.org/People/cooper/">Michael Cooper</a>
@@ -179,7 +179,7 @@ <h3 id="c-3-participants-active-in-the-aria-authoring-practices-task-force">Part
             <li>Shirisha Balusani (Microsoft Corporation)</li>
             <li>Dorothy Bass (Wells Fargo Bank N.A.)</li>
             <li>Curt Bellew (Oracle)</li>
-            <li>ZoÃ« Bijl (Invited Expert)</li>
+            <li>Zoë Bijl (Invited Expert)</li>
             <li>
               Michael Cooper (<abbr title="World Wide Web Consortium">W3C</abbr>)
             </li>
@@ -205,15 +205,15 @@ <h3 id="c-3-participants-active-in-the-aria-authoring-practices-task-force">Part
           <h3 id="c-4-other-commenters-and-contributors-to-version-1-1">Other commenters and contributors to Version 1.1</h3>
           <ul>
             <li>Vyacheslav Aristov</li>
-            <li>J. RenÃ©e Beach</li>
+            <li>J. Renée Beach</li>
             <li>Kasper Christensen</li>
             <li>Gerard K. Cohen</li>
             <li>Anne-Gaelle Colom</li>
             <li>Kevin Coughlin</li>
             <li>Cameron Cundiff</li>
             <li>Manish Dahamiwal</li>
             <li>Gilmore Davidson</li>
-            <li>Boris DuÅ¡ek</li>
+            <li>Boris Dušek</li>
             <li>Michael Fairchild</li>
             <li>Jeremy Felt</li>
             <li>Rob Fentress</li>
@@ -232,7 +232,7 @@ <h3 id="c-4-other-commenters-and-contributors-to-version-1-1">Other commenters a
             <li>Christopher Tryens</li>
           </ul>
         </section>
-      </section>    
+      </section>
 
     <section id="references">
         <h2 id="d-references">References</h2>
@@ -293,7 +293,7 @@ <h3 id="d-1-informative-references">Informative references</h3>
           </dl>
         </section>
       </section>
-      
+
     </main>
   </body>
 </html>
diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html
diff --git a/content/index.html → content/apg-home.html b/content/index.html → content/apg-home.html
@@ -21,8 +21,8 @@ <h1>ARIA Authoring Practices Guide (APG) Home</h1>
         This guide describes how to apply accessibility semantics to common design patterns and widgets.
         It provides design patterns and functional examples complemented by in-depth guidance for fundamental practices.
       </p>
-      <a href="patterns/">View Patterns</a>
-      <img alt="A laptop screen fills with an accessibility icon and emits a checkmark." src="img/index-1.svg">
+      <a href="patterns/patterns.html">View Patterns</a>
+      <img alt="A laptop screen fills with an accessibility icon and emits a checkmark." src="images/index-1.svg">
     </div>
     <div id="resources">
       <h2>APG Resources</h2>
@@ -34,60 +34,26 @@ <h3>Design Patterns and Examples</h3>
             Learn how to make accessible web components and widgets with ARIA roles, states and properties and by implementing keyboard support.
             One or more ways of implementing each pattern is demonstrated with a functional example.
           </p>
-          <a href="patterns/" aria-label="Learn more about APG patterns and examples">Learn More</a>
-          <img alt="A menagerie of widgets." src="img/index-2.svg">
+          <a href="patterns/patterns.html" aria-label="Learn more about APG patterns and examples">Learn More</a>
+          <img alt="A menagerie of widgets." src="images/index-2.svg">
         </li>
         <li>
           <h3>Use ARIA Landmarks</h3>
           <p>Learn how to use HTML sectioning elements and ARIA landmark roles to make it easy for assistive technology users to understand the meaning of the layout of a page.</p>
-          <a href="practices/landmark-regions/" aria-label="Learn more about ARIA landmarks">Learn More</a>
-          <img alt="A document flies apart into chunks." src="img/index-3.svg">
+          <a href="practices/landmark-regions/landmark-regions-practice.html" aria-label="Learn more about ARIA landmarks">Learn More</a>
+          <img alt="A document flies apart into chunks." src="images/index-3.svg">
         </li>
         <li>
           <h3>Providing Accessible Names and Descriptions</h3>
           <p>Providing elements with accessible names and, where appropriate, accessible descriptions is one of the most important responsibilities authors have when developing accessible web experiences.</p>
-          <a href="practices/names-and-descriptions/" aria-label="Learn more about accessible names and descriptions">Learn More</a>
-          <img alt="Indicators delve inside a document." src="img/index-4.svg">
+          <a href="practices/names-and-descriptions/names-and-descriptions-practice.html" aria-label="Learn more about accessible names and descriptions">Learn More</a>
+          <img alt="Indicators delve inside a document." src="images/index-4.svg">
         </li>
         <li>
           <h3>And So Much More...</h3>
           <p>Learn about other fundamental practices related to correctly using accessibility semantics, developing keyboard interfaces, and more.</p>
-          <a class="button-link" href="practices/" aria-label="Learn more about APG practices">Learn More</a>
-          <img alt="A box with an accessibility label is chock full of widgets and document bits." src="img/index-5.svg">
-        </li>
-      </ul>
-    </div>
-
-    <div id="work">
-      <!--
-        This section will be hidden by the builder for the launch on May 19, 2022.
-        A plan for what to do with this section will be developed post-launch.
-      -->
-      <h2>Current Work</h2>
-      <p>Check out  recent work of the APG Task Force</p>
-      <ul>
-        <li>
-          <h3>Release Plans</h3>
-          <p>Take a look at the plan overview for WAI-ARIA Authoring Practices, priorities and work in progress.</p>
-          <a rel="noopener noreferrer" target="_blank" href="https://github.com/w3c/aria-practices/wiki/Release-Plans" aria-label="View release plans wiki">Learn More</a>
-        </li>
-        <li>
-          <h3>Patterns Progress Status</h3>
-          <p>Status of work on design patterns and reference implementations of those patterns for the first release of the ARIA 1.1 Authoring Practices.</p>
-          <a rel="noopener noreferrer" target="_blank" href="https://github.com/w3c/aria-practices/wiki/Design-Patterns-Development-Status" aria-label="View pattern status wiki">Learn More</a>
-        </li>
-        <li>
-          <h3>How to Write Regression Tests</h3>
-          <p>Learn what the APG Regression Tests test, how to run them and understand the results.</p>
-          <a rel="noopener noreferrer" target="_blank" href="https://github.com/w3c/aria-practices/wiki/Regression-Tests-for-APG-Example-Pages" aria-label="View regression test documentation">Learn More</a>
-        </li>
-        <li>
-          <h3>Meetings</h3>
-          <p>
-            The APG Task Force meets on Tuesdays at 14:00 until 15:00 Eastern Time.
-            Minutes from previous meetings are available.
-          </p>
-          <a rel="noopener noreferrer" target="_blank" href="https://github.com/w3c/aria-practices/wiki/Meetings" aria-label="View meetings wiki">Learn More</a>
+          <a class="button-link" href="practices/practices.html" aria-label="Learn more about APG practices">Learn More</a>
+          <img alt="A box with an accessibility label is chock full of widgets and document bits." src="images/index-5.svg">
         </li>
       </ul>
     </div>
@@ -106,7 +72,7 @@ <h3>Join the Task Force</h3>
             Participants are expected to actively contribute to the work of the task force.
           </p>
           <a rel="noopener noreferrer" target="_blank" href="https://www.w3.org/WAI/ARIA/task-forces/practices/">Learn more about the work of the task force and how to join</a>
-          <img alt="An icon showing three nodes connecting." src="img/index-6.svg">
+          <img alt="An icon showing three nodes connecting." src="images/index-6.svg">
         </li>
         <li>
           <h3>Contribute via GitHub</h3>
@@ -115,7 +81,7 @@ <h3>Contribute via GitHub</h3>
             If you choose this path, please start by studying our guidelines for contributing to the repository and maintaining code quality.
           </p>
           <a rel="noopener noreferrer" target="_blank" href="https://github.com/w3c/aria-practices">View ReadMe in the GitHub repository</a>
-          <img alt="An icon showing two human shapes carrying a burden." src="img/index-7.svg">
+          <img alt="An icon showing two human shapes carrying a burden." src="images/index-7.svg">
         </li>
         <li>
           <h3>Mailing Lists</h3>
@@ -125,7 +91,7 @@ <h3>Mailing Lists</h3>
             While GitHub issues are the preferred place to discuss APG content, the mailing list is available to anyone who would prefer to communicate with the APG Task Force via email.
           </p>
           <p><a rel="noopener noreferrer" target="_blank" href="https://lists.w3.org/Archives/Public/public-aria-practices/">View the aria-practices mailing list archive</a></p>
-          <img alt="A notification bell icon appears over an email icon." src="img/index-8.svg">
+          <img alt="A notification bell icon appears over an email icon." src="images/index-8.svg">
         </li>
       </ul>
     </div>

diff --git a/img/DHTMLexample.png → content/images/DHTMLexample.png b/img/DHTMLexample.png → content/images/DHTMLexample.png
diff --git a/img/accessibleJSelement.png → content/images/accessibleJSelement.png b/img/accessibleJSelement.png → content/images/accessibleJSelement.png
diff --git a/img/accessibleelement.png → content/images/accessibleelement.png b/img/accessibleelement.png → content/images/accessibleelement.png
diff --git a/img/exampletree.png → content/images/exampletree.png b/img/exampletree.png → content/images/exampletree.png
diff --git a/img/index-1.svg → content/images/index-1.svg b/img/index-1.svg → content/images/index-1.svg
diff --git a/img/index-2.svg → content/images/index-2.svg b/img/index-2.svg → content/images/index-2.svg
diff --git a/img/index-3.svg → content/images/index-3.svg b/img/index-3.svg → content/images/index-3.svg
diff --git a/img/index-4.svg → content/images/index-4.svg b/img/index-4.svg → content/images/index-4.svg
diff --git a/img/index-5.svg → content/images/index-5.svg b/img/index-5.svg → content/images/index-5.svg
diff --git a/img/index-6.svg → content/images/index-6.svg b/img/index-6.svg → content/images/index-6.svg
diff --git a/img/index-7.svg → content/images/index-7.svg b/img/index-7.svg → content/images/index-7.svg
diff --git a/img/index-8.svg → content/images/index-8.svg b/img/index-8.svg → content/images/index-8.svg
diff --git a/img/inspectofpagetab.png → content/images/inspectofpagetab.png b/img/inspectofpagetab.png → content/images/inspectofpagetab.png
diff --git a/img/navlandmark.jpg → content/images/navlandmark.jpg b/img/navlandmark.jpg → content/images/navlandmark.jpg
diff --git a/img/taxonomy.png → content/images/taxonomy.png b/img/taxonomy.png → content/images/taxonomy.png
diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html
@@ -46,7 +46,7 @@ <h2>About This Example</h2>
           </li>
           <li>
             Activate the "save" button to trigger an alert when the contents of the "Notes" text area is saved to
-            <a href="https://www.w3.org/TR/webstorage/#the-localstorage-attribute">local storage</a>.
+            <a href="https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute">local storage</a>.
             <ul>
               <li>A successful save triggers a short alert to notify the user that the notes have been saved.</li>
               <li>The "save" button is disabled if the user's local storage value is the same as the "Notes" field.</li>

diff --git a/content/patterns/breadcrumb/examples/breadcrumb.html b/content/patterns/breadcrumb/examples/breadcrumb.html
@@ -40,7 +40,7 @@ <h2 id="ex_label">Example</h2>
           <nav aria-label="Breadcrumb" class="breadcrumb">
             <ol>
               <li>
-                <a href="../../../index.html">WAI-ARIA Authoring Practices Guide (APG)</a>
+                <a href="../../../apg-home.html">WAI-ARIA Authoring Practices Guide (APG)</a>
               </li>
               <li>
                 <a href="../../patterns.html">Patterns</a>

diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
@@ -30,7 +30,7 @@ <h1>Button Examples (IDL Version)</h1>
 
       <section>
         <h2>About This example</h2>
-        <p>The following examples of the <a href="../.button-pattern.html">Button Pattern</a> demonstrate a new JavaScript syntax for coding ARIA attributes.</p>
+        <p>The following examples of the <a href="../button-pattern.html">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="#idl-interface">IDL Interface defined in ARIA 1.2</a>.
           The purpose of these examples is to illustrate how to use ARIA Attribute Reflection and provide a test case for browser and assistive technology interoperability.
@@ -47,12 +47,15 @@ <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="example">
-          <p class="advisement">
-            <strong>IMPORTANT:</strong> This example is coded using syntax that was not introduced until version 1.2 of the ARIA specification.
-            When using a
-            <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 class="advisement">
+            <h3>Important</h3>
+            <p>
+              This example is coded using syntax that was not introduced until version 1.2 of the ARIA specification.
+              When using a
+              <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>
 
           <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
           <div tabindex="0" id="action">Print Page</div>

diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
@@ -18,11 +18,7 @@ <h1>Checkbox Pattern</h1>
 
       <section id="about">
         <h2>About This Pattern</h2>
-        <p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets:</p>
-        <ol>
-          <li>Dual-state: The most common type of checkbox, it allows the user to toggle between two choices -- checked and not checked.</li>
-          <li>Tri-state: This type of checkbox supports an additional third state known as partially checked.</li>
-        </ol>
+        <p>WAI-ARIA supports two types of <a href="#checkbox" class="role-reference">checkbox</a> widgets: dual-state checkboxes toggle between two choices -- checked and not checked -- and tri-state checkboxes, which  allow an additional third state known as partially checked.</p>
         <p>
           One common use of a tri-state checkbox can be found in software installers where a single tri-state checkbox is used to represent and control the state of an entire group of install options.
           And, each option in the group can be individually turned on or off with a dual state checkbox.

diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
@@ -29,7 +29,7 @@ <h1>Checkbox Example (Two State)</h1>
 
       <section>
         <h2>About This Example</h2>
-        <p>This example implements the <a href="checkbox.html">Checkbox Design Pattern</a> for a two state checkbox using <code>div</code> elements.</p>
+        <p>This example implements the <a href="../checkbox-pattern.html">Checkbox Pattern</a> for a two state checkbox using <code>div</code> elements.</p>
 
         <p>Similar examples include:</p>
         <ul>

diff --git a/content/patterns/checkbox/examples/js/checkbox.js b/content/patterns/checkbox/examples/js/checkbox.js
@@ -19,6 +19,7 @@ class Checkbox {
     }
 
     this.domNode.addEventListener('keydown', this.onKeydown.bind(this));
+    this.domNode.addEventListener('keyup', this.onKeyup.bind(this));
     this.domNode.addEventListener('click', this.onClick.bind(this));
   }
 
@@ -32,7 +33,14 @@ class Checkbox {
 
   /* EVENT HANDLERS */
 
+  // Make sure to prevent page scrolling on space down
   onKeydown(event) {
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+
+  onKeyup(event) {
     var flag = false;
 
     switch (event.key) {
@@ -47,7 +55,6 @@ class Checkbox {
 
     if (flag) {
       event.stopPropagation();
-      event.preventDefault();
     }
   }
 

diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -30,6 +30,7 @@ <h1>Example Disclosure Navigation Menu with Top-Level Links</h1>
       <section>
         <h2>About This Example</h2>
         <div class="advisement">
+          <h3>Important</h3>
           <p>
             Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role.
             This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role.

diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -30,6 +30,7 @@ <h1>Example Disclosure Navigation Menu</h1>
       <section>
         <h2>About This Example</h2>
         <div class="advisement">
+          <h3>Important</h3>
           <p>
             Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role.
             This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role.

diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -32,8 +32,9 @@ <h1>(Deprecated) Collapsible Dropdown Listbox Example</h1>
       <section>
         <h2>About This Example</h2>
         <div class="advisement">
+          <h3>Deprecation Warning</h3>
           <p>
-            <strong>DEPRECATION WARNING:</strong> This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices.
+            This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices.
             The <a href="../../combobox/examples/combobox-select-only.html">select-only combobox</a> should be used as an alternative to this pattern.
           </p>
         </div>

diff --git a/content/patterns/menubar/examples/menubar-navigation.html b/content/patterns/menubar/examples/menubar-navigation.html
@@ -30,7 +30,8 @@ <h1>Navigation Menubar Example</h1>
       <section>
         <h2>About This Example</h2>
         <div class="advisement">
-          <p><strong>CAUTION!</strong> Before considering use of the <a href="../menu-and-menubar-pattern.html">Menubar Pattern</a> for site navigation, it is important to understand:</p>
+          <h3>Caution!</h3>
+          <p>Before considering use of the <a href="../menu-and-menubar-pattern.html">Menubar Pattern</a> for site navigation, it is important to understand:</p>
           <ul>
             <li>The <code>menubar</code> pattern requires complex functionality that is unnecessary for typical site navigation that is styled to look like a menubar with expandable sections or <q>fly outs</q>.</li>
             <li>

diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Patterns</title>
+</head>
+<body>
+  In a future iteration this file will contain a list of all patterns.
+</body>
+</html>