Update test case guide

.gitignore

@@ -2,6 +2,7 @@ _site
 .sass-cache
 .jekyll-metadata
 .jekyll-cache
+node_modules
 public/
 *~
 *dwsync.xml

Gemfile

@@ -16,6 +16,7 @@ gem "minima", "~> 2.5"
 # If you have any plugins, put them here!
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
+  gem "webrick", "~> 1.8"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -28,3 +29,5 @@ end
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 
+
+gem "webrick", "~> 1.8"

Gemfile.lock

@@ -67,13 +67,8 @@ GEM
       ffi (~> 1.9)
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    thread_safe (0.3.6)
-    tzinfo (1.2.9)
-      thread_safe (~> 0.1)
-    tzinfo-data (1.2021.1)
-      tzinfo (>= 1.0.0)
     unicode-display_width (1.7.0)
-    wdm (0.1.1)
+    webrick (1.8.1)
 
 PLATFORMS
   x64-mingw32
@@ -86,6 +81,7 @@ DEPENDENCIES
   tzinfo (~> 1.2)
   tzinfo-data
   wdm (~> 0.1.1)
+  webrick (~> 1.8)
 
 BUNDLED WITH
    2.2.14

README.md

@@ -16,4 +16,4 @@ The ICT Baseline Alignment Validation Framework provides test cases as a way for
 ## How to Contribute
 Working Group members can use the [editor on GitHub](https://github.com/Section508Coordinators/BaselineTestPages/edit/master/README.md) to directly edit this file to add references. Members can also  navigate to the [Baseline Test Pages repository](https://github.com/Section508Coordinators/BaselineTestPages) to add files to test. Static pages can be viewed via GitHub Pages from this repository at the following url: <https://section508coordinators.github.io/BaselineTestPages/>.
 
-Contributors do not need to be highly technical nor make a long-term commitment, although both skills and time can certainly be helpful. The ICT Baseline Alignment Working Group needs help developing and evaluating test cases. Accessibility advocates are also needed to spread the word about the Framework, develop a governance structure, participate in governance, develop and maintain the website, provide user experience and plain language expertise, and even provide legal support. Please visit our [How You Can Help](https://section508coordinators.github.io/BaselineTestPages/contributing.html#helping) and [How We Work](https://section508coordinators.github.io/BaselineTestPages/contributing.html#how-we-work) sections or contact us at <[email protected]> for more information about getting involved.
+Contributors do not need to be highly technical nor make a long-term commitment, although both skills and time can certainly be helpful. The ICT Baseline Alignment Working Group needs help developing and evaluating test cases. Accessibility advocates are also needed to spread the word about the Framework, develop a governance structure, participate in governance, develop and maintain the website, provide user experience and plain language expertise, and even provide legal support. Please visit our [How You Can Help](https://section508coordinators.github.io/BaselineTestPages/contributing.html#helping) and [How We Work](https://section508coordinators.github.io/BaselineTestPages/contributing.html#how-we-work) sections or contact us at <[email protected]> for more information about getting involved..

Templates/_testcase-template.md

@@ -16,7 +16,7 @@ tcid:
 descr:
 
 # Reference and link to the applicable ICT Baseline test
-app-basline:
+app-baseline:
 
 # Expected result that the ICT Baseline would predict
 # [Pass | Fail | DNA]
@@ -40,4 +40,4 @@ sample:
 ---
 | Test Instruction | Instruction Detail | Expected Test Case Result |
 |------------------|--------------------|---------------------------|
-| # | Detail | Step Result | 
+| # | Detail | Step Result | 

_config.yml

@@ -8,4 +8,15 @@ description: >-
   should produce the same replicable and reliable test results.
 
 theme: minima
-baseurl: /baselinealignment
+baseurl: /baselinealignment
+
+primary_navigation:
+  - name: Baseline Alignment Home
+    url: /
+  - name: Contributing
+    url: /contributing.html
+  - name: Test Cases
+    url: /testcases.html
+  - name: ICT Baseline (external)
+    url: https://ictbaseline.access-board.gov/
+    ext: true

_includes/footer.html

@@ -1,6 +1,4 @@
 <!-- Footer content -->
 <footer class="mt-auto py-2 bg-light">
-    <div class="footer-content offset-md-2 offset-xl-2 px-3 col-md-9 col-xl-8">
-        <span>copyright notice and link to license page</span>
-    </div>
+    <div id="footer-508"></div>
 </footer>

_includes/header.html

@@ -3,11 +3,22 @@
 GitHub repository.
 {% endcomment %}
 
-<!-- Header with skip links and GitHub repository link-->
-<header class="navbar navbar-dark bg-dark flex">
-    <a href="#main-content" id="skipNavLink" class="visually-hidden visible-when-focused bypass-block-link" tabindex="1">Skip to Content</a>
-    <a href="#secnav" id="skipNavLink" class="visually-hidden visible-when-focused bypass-block-link" tabindex="1">Skip to Page Table of Contents</a>
-    <a class="navbar-brand d-md-none btn btn-dark mr-1" href="javascript:void(0)" onclick="sidebarOpenClose()" aria-label="Open/Close Nav Menu" id="openCloseMenu" aria-expanded="false" aria-haspopup="true" aria-controls="site-nav"><i class="fa fa-bars"></i></a>
-    <a href="https://github.com/Section508Coordinators/baselinealignment" class="navbar-brand ml-auto order-1 order-md-2 btn btn-dark m-0"><i class="fa fa-github" aria-label="Open Repository in GitHub"></i></a>
-    <span class="navbar-link text-white" id="nav-title"><span class="d-none d-md-inline">ICT Accessibility Testing </span>Baseline Alignment Framework</span>
-</header>
+<div id="header-508"></div>
+<section aria-label="Page Banner" class="usa-graphic-list usa-section sml-margin bg-gradient landing-page-banner">
+  <div class="grid-container">
+    <div class="grid-row grid-gap">
+      <div class="tablet: grid-col">
+
+                <span class="banner-title-color font-sans-lg margin-bottom-0">
+                    ICT Baseline Alignment Framework
+                </span>
+        <br>
+
+        <h1 class="text-white font-sans-xl margin-top-0 margin-bottom-0">
+          {{ page.title | xml_escape }}
+        </h1>
+
+      </div>
+    </div>
+  </div>
+</section>

_includes/menu.html

@@ -1,22 +1,23 @@
-
-<!-- Primary site nav manu -->
-<nav class="col d-none d-md-block bg-light col-md-3 col-xl-2 base-nav order-0 px-0 shadow fixed-sidebar" id="site-nav" aria-label="primary navigation">
-    <div class="px-2 row">
-        <h4 class="text-dark bg-light d-inline-block ml-2 my-auto p-2">Menu</h4>
-        <a href="javascript:void(0)" onclick="sidebarOpenClose()" class="d-none btn btn-light my-1 mr-2 ml-auto text-danger" aria-label="Close Nave Menu" id="closeSidebar"><i class="fa fa-remove"></i></a>
-    </div>
-    <ul class="list-group-flush bg-light px-0">
-        <li><a href="/baselinealignment/index.html" id="home" class="list-group-item list-group-item-action bg-light">Home</a></li>
-        <li><a href="/baselinealignment/contributing.html" id="contributing" class="list-group-item list-group-item-action bg-light">Contributing</a></li>
-        <!-- <li><a href="#" class="list-group-item list-group-item-action bg-light">Validating Alignment</a></li> -->
-        <li><a  href="/baselinealignment/testcases.html" id="testcases" class="list-group-item list-group-item-action bg-light">Test Cases</a></li>
-        <!-- <li><a  href="#" class="list-group-item list-group-item-action bg-light">Glossary</a></li> -->
-    </ul>
-    <ul class="list-group-flush bg-light px-0 border-top mt-5">
-        <li><a href="https://ictbaseline.access-board.gov" class="list-group-item list-group-item-action bg-light" target="_blank" rel="noopener noreferrer">ICT Baseline (external)</a></li>
-    </ul>
+<header class="usa-header usa-header--extended baseline-menu">
+  <nav aria-label="Primary site navigation" class="usa-nav site-nav sticky" id="site-nav">
+    <div class="usa-nav__inner site-nav__inner">
+      <button class="usa-nav__close"><img alt="close" src="https://www.section508.gov/assets/img/close.svg"></button>
+      <!-- Desktop nav -->
+      <ul class="usa-nav__primary usa-nav__primary--desktop usa-accordion">
+        {% for nav_item in site.primary_navigation %}
+        <li class="usa-nav__primary-item"><a
+            href="{% if nav_item.ext == true %}{{ nav_item.url }}{% else %}{{ nav_item.url | prepend: site.baseurl }}{% endif %}"
+            data-page-url="{{ page.url }}"
+            data-nav-item-url="{{ nav_item.url }}"
+            class="usa-nav__link{% if page.url == nav_item.url %} usa-current{% endif %}"
+            aria-label="{{ nav_item.name }} menu link"
+            {% if nav_item.ext== true %}target="_blank" {% endif %}>{{
+          nav_item.name }}</a></li>
 
-</nav>
+        {% endfor %}
 
-<!-- Overlay effect when opening sidebar on small screens -->
-<div onclick="sidebarOpenClose()" style="cursor:pointer" class="d-none overlay" title="Close Nav Menu" id="myOverlay"></div>
+      </ul>
+      <!-- /Desktop nav -->
+    </div>
+  </nav>
+</header>

_includes/meta.html

@@ -5,10 +5,15 @@
     <title>{{page.title}}</title>
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="/baselinealignment/assets/css/bootstrap.css">
+<!--    <link rel="stylesheet" href="/baselinealignment/assets/css/bootstrap.css">-->
     <!-- FontAwesome CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="/baselinealignment/assets/css/baseline-align.css">
 
+    <!-- Section 508 external block and styles -->
+    <script src="https://www.section508.gov/assets/js/external-508-blocks.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://www.section508.gov/assets/css/external-blocks.css">
+    <link rel="stylesheet" type="text/css" href="https://www.section508.gov/assets/css/index.css">
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/assets/css/baseline.css">
 </head>

_includes/scripts.html

@@ -3,4 +3,5 @@
 <script src="/baselinealignment/assets/js/bootstrap.bundle.min.js"></script>
 
 <!-- custom JS for sidbar flyover, TOC generation etc. -->
-<script src="/baselinealignment/assets/js/baseline-align.js"></script>
+<script src="/baselinealignment/assets/js/baseline-align.js"></script>
+<script src="https://www.section508.gov/assets/js/uswds.min.js" defer="defer"></script>

_layouts/base.html

@@ -14,7 +14,7 @@
 
   {% include menu.html %}
 
-  {{ content }}
+{{ content }}
 
   {% include footer.html %}
 

_layouts/page.html

@@ -6,12 +6,19 @@
 This template is for a basic single page with bootstrap 'card' holders for content
 {% endcomment %}
 
-{% include toc.html %}
-
-<main class="container-fluid mb-auto flex-shrink-0" id="main-content">
-    <div class="row" id="card-holder">
-        <div class="col-md-9 col-xl-8 py-1 px-1 py-md-2 pl-md-3 offset-md-3 offset-xl-2 order-1">
-            {{ content }}
+<div id="main-content" class="usa-layout-docs usa-section layout-{{ page.layout }}">
+    <div class="grid-container active">
+        <div class="usa-in-page-nav-container">
+            <aside class="usa-in-page-nav"
+                   data-title-text="Table of Contents"
+                   data-title-heading-level="h2"
+                   data-scroll-offset="0"
+                   data-root-margin="0px 0px 0px 0px"
+                   data-threshold="1">
+            </aside>
+            <main class="main-content usa-graphic-list">
+                {{ content }}
+            </main>
         </div>
     </div>
-</main>
+</div>

_layouts/testcase.html

@@ -1,28 +1,25 @@
 ---
-layout: base
+layout: page
 ---
 
 {% comment %}
 This template is for test case content, which relies on specific fields
-provided in the document front matter; see the admin/config > collections 
+provided in the document front matter; see the admin/config > collections
 > Test Cases for field details
 {% endcomment %}
 
-{% include toc.html %}
 
-<main class="container-fluid mb-auto flex-shrink-0" id="main-content">
     <div class="row" id="card-holder">
         <div class="col-md-9 col-xl-8 py-1 px-1 py-md-2 pl-md-3 offset-md-3 offset-xl-2 order-1">
 
-                    <h1 class="card-title" id="TCtitle">{{page.title | markdownify}}</h1>
                         <h2 class="border-bottom" id="TCsum">Test Case Summary</h2>
                             <h3 id="TCid">Test Case ID</h3>
                                 <p>{{page.tcid}}</p>
                             <h3 id="TCdesc">Test Case Description</h3>
                                 <p>{{page.descr | markdownify}}</p>
                             <h3 id="TCbase">Applicable ICT Baseline Test</h3>
                                 <p>{{page.app-baseline | markdownify}}</p>
-            
+
                     <h2 class="border-bottom" id="TCdet">Test Case Detail</h2>
                         <h3 id="TCresult">Expected Baseline Result</h3>
                             <p><strong>
@@ -36,21 +33,23 @@ <h4 id="TCurl">Single-Page URL</h4>
                                 <div id="codelink">
                                     <p><a id="samplecodelink" href="{{page.sample | absolute_url}}">{{page.sample | absolute_url}}</a></p>
                                 </div>
-                
+
                             <h4 id="TCframe">Embedded Code</h4>
-                                <div id="codeframe"></div> 
+                                <div id="codeframe"></div>
                                     <iframe id="codeframe" src="{{page.sample | absolute_url}}" title="embedded code">
                                 </iframe>
-
-                            <h4 id="if_code">Code</h4>
-                                <div id="div_code">
-                                    <pre class="bg-light callout"><code id="ta_code"></code></pre>
-                                </div>
+
+                          <div class="usa-accordion usa-accordion--bordered site-accordion-code margin-top-4">
+                            <button class="usa-accordion__button" aria-controls="code-sticky" aria-expanded="true">Code</button>
+                            <div id="code-sticky" class="usa-accordion__content">
+                              <pre><code id="ta_code" class="language-html" data-lang="html"></code></pre>
+                            </div>
+                          </div>
+
 
                         <h3 id="TCsteps">Test Case Instruction</h3>
                         <div id="TCsteps_table">{{content}}</div>
         </div>
     </div>
-</main>
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
-<script src="/baselinealignment/assets/js/testcases.js"></script>
+<script src="/assets/js/testcases.js"></script>

assets/css/baseline.css

@@ -0,0 +1,72 @@
+@media (min-width: 64em) {
+    .usa-banner__inner, .usa-navbar, .usa-nav__inner, .usa-footer__primary-section .grid-container,
+    .usa-header--extended .usa-navbar {
+        padding-left: 2rem !important;
+    }
+}
+.baseline-menu .usa-nav__primary > .usa-nav__primary-item > a {
+    font-weight: normal;
+}
+
+.baseline-menu .usa-nav__primary > .usa-nav__primary-item > a:hover {
+    color: #005ea2;
+}
+
+.baseline-menu.usa-header--extended .usa-nav__primary-item > .usa-current::after,
+.baseline-menu.usa-header--extended .usa-nav__primary-item > .usa-nav__link:hover::after {
+    background-color: #005ea2;
+}
+
+.layout-testcase .usa-in-page-nav-container main {
+    max-width: 43rem;
+}
+
+@media (max-width: 820px) {
+    .layout-testcase .usa-in-page-nav-container main {
+        max-width: 31rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .layout-testcase .usa-in-page-nav-container main {
+        max-width: 28rem;
+    }
+}
+
+code {
+    color: #d83933 !important;
+}
+
+#ta_code {
+    white-space: pre;
+    display: inline-block;
+    margin: 0;
+    font: 14px / 1.625em Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
+    padding: 0 .5em;
+}
+
+iframe#codeframe {
+    width: 100%;
+}
+
+.usa-table thead th {
+    background-color: #f0f0f0;
+}
+
+.usa-table tbody th {
+    font-weight: bold;
+}
+
+.usa-table tbody th,
+.usa-table tbody td {
+    vertical-align: top;
+}
+
+#codelink {
+    overflow: hidden;
+}
+
+#TCsteps_table table caption {
+    visibility: hidden;
+    height: 0;
+}