Updated federalist jekyll and also replaced iframe with just a simple…

… link (#13) * Updated federalist jekyll and also replaced iframe with just a simple link. * Allowing hash href links for htmlproofer.
GSA · Aug 25, 2021 · 81c2317 · 81c2317
1 parent db4a546
commit 81c2317
Show file tree

Hide file tree

Showing 15 changed files with 5,753 additions and 1,424 deletions.
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -0,0 +1,45 @@
+name: Build and test Jekyll USWDS
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    name: Install, build and test site with pa11y-ci and htmlproofer.
+    runs-on: ubuntu-latest
+    env:
+      LANG: en_US.UTF-8
+      LANGUAGE: en_US
+      LC_ALL: en_US.UTF-8
+
+    steps:
+      - name: Checkout source.
+        uses: actions/checkout@v2
+
+      - name: Setup ruby env.
+        run: |
+          sudo apt-get update;
+          sudo apt-get install --reinstall -y locales;
+          sudo sed -i 's/# en_US.UTF-8 UTF-8/en_US.UTF-8 UTF-8/' /etc/locale.gen;
+          sudo locale-gen en_US.UTF-8;
+
+      - name: Install ruby.
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+
+      - name: Install node.js.
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Install NPM dependencies.
+        run: npm install
+
+      - name: Build and start up jekyll server.
+        run: npm run build && npm run start-detached
+
+      - name: Run pa11y-ci.
+        run: npm run pa11y-ci:sitemap
+
+      - name: Run htmlproofer.
+        run: npm run htmlproofer
diff --git a/.pa11yci b/.pa11yci
@@ -0,0 +1,7 @@
+{
+  "defaults": {
+    "concurrency": 4,
+    "standard": "WCAG2AA",
+    "runners": ["axe"]
+  }
+}
diff --git a/Gemfile b/Gemfile
@@ -23,4 +23,4 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.0" if Gem.win_platform?
 
-gem "html-proofer", "~> 3.19"
+gem "html-proofer", "~> 3.18"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -20,9 +20,9 @@ GEM
     extras (0.3.0)
       forwardable-extended (~> 2.5)
     fastimage (2.2.3)
-    ffi (1.15.3)
+    ffi (1.15.0)
     forwardable-extended (2.6.0)
-    html-proofer (3.19.2)
+    html-proofer (3.19.1)
       addressable (~> 2.3)
       mercenary (~> 0.3)
       nokogumbo (~> 2.0)
@@ -86,9 +86,9 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.3.6)
-    mini_portile2 (2.5.3)
+    mini_portile2 (2.5.1)
     minitest (5.14.4)
-    nokogiri (1.11.7)
+    nokogiri (1.11.4)
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     nokogumbo (2.0.5)
@@ -125,7 +125,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  html-proofer (~> 3.19)
+  html-proofer (~> 3.18)
   jekyll (~> 3.9)
   jekyll-assets (~> 3.0)
   jekyll-feed (~> 0.15)

diff --git a/_config.yml b/_config.yml
@@ -24,7 +24,7 @@ description: >- # this means to ignore newlines until "baseurl:"
   Agency Name (EAC) Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Aenean et sapien a leo auctor scelerisque quis nec magna. Sed dictum ante a risus vehicula facilisis.
 baseurl: "" # the subpath of your site, e.g. /blog
-# url: "https://example.gov" # the base hostname & protocol for your site, e.g. https://example.com. 
+# url: "https://example.gov" # the base hostname & protocol for your site, e.g. https://example.com.
   # Required to support the jekyll-sitemap plugin below.
   # Uncomment the url line when ready to push to production. If using different branches for multiple
   # custom domains, edit this url parameter in the relevant branch to match the relevant custom domain.

diff --git a/_includes/header.html b/_includes/header.html
@@ -6,7 +6,7 @@
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
   <div class="usa-banner">
     <div class="usa-accordion">
-      <header class="usa-banner__header">
+      <section id="gov-banner-header-section" aria-label="USA Gov banner section header" class="usa-banner__header">
         <div class="usa-banner__inner">
           <div class="grid-col-auto">
             {% asset us_flag_small.png class="usa-banner__header-flag" alt="U.S. flag" %}
@@ -19,7 +19,7 @@
             <span class="usa-banner__button-text">Here's how you know</span>
           </button>
         </div>
-      </header>
+      </section>
       <div class="usa-banner__content usa-accordion__content" id="gov-banner">
         <div class="grid-row grid-gap-lg">
           <div class="usa-banner__guidance tablet:grid-col-6">
@@ -49,4 +49,4 @@
     </div>
   </div>
   <div class="usa-overlay"></div>
-</div>
+</div>
diff --git a/_includes/hero.html b/_includes/hero.html
@@ -1,11 +1,12 @@
-{% comment %} 
+{% comment %}
 This will be displayed on the homepage. Ideally, you want to highlight key goals of the website
 {% endcomment %}
 
 <section class="usa-hero">
   <div class="grid-container">
     <div class="usa-hero__callout">
-      <h2 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hero callout:</span>Bring attention to a digital product accessibility</h2>
+      <h1 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hero callout:</span>Bring attention to a project priority
+      </h1>
       <p>Support the callout with some short explanatory text. You don’t need more than a couple of sentences.</p>
       <a class="usa-button" href="javascript:void(0)">Call to action</a>
     </div>

diff --git a/_includes/menu.html b/_includes/menu.html
@@ -8,7 +8,7 @@
     {% include logo.html %}
     <button class="usa-menu-btn">Menu</button>
   </div>
-  <nav role="navigation" class="usa-nav">
+  <nav id="menu-navigation" aria-label="Menu navigation" role="navigation" class="usa-nav">
     <div class="usa-nav__inner">
       <button class="usa-nav__close">{% asset close.svg alt="close" %}</button>
       <ul class="usa-nav__primary usa-accordion">
@@ -49,4 +49,4 @@
       </div>
     </div>
   </nav>
-</header>
+</header>
diff --git a/_layouts/data.html b/_layouts/data.html
@@ -11,6 +11,7 @@
   <div class="grid-container">
     <div class="grid-row grid-gap">
       <div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
+        <h1 class="title">{{page.title}}</h1>
         {{ content }}
         <ul>
           {% for item in site.data[page.datafile] %}
@@ -22,4 +23,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/_pages/opats.md b/_pages/opats.md
@@ -1,10 +1,10 @@
 ---
 title: OPAT Accessibility Conformance Reports
-layout: wide
+layout: page
 sidenav: false
 permalink: /opats/
 ---
 
-<div class="grid-container">
-    <iframe src="../opat/index.html" title="OPAT Accessibility Conformance Reports table report" width="100%" height="700px" style="border: 0;"></iframe>
-</div>
+# OPAT Accessibility Conformance Reports
+
+Introduction to be added here and then link to the [data table](../opat).
diff --git a/admin/index.html b/admin/index.html
@@ -1,6 +1,6 @@
 ---
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -14,7 +14,7 @@
     img[alt="Logo"] {
       margin-left: 75px;
       width: 150px;
-    } 
+    }
   </style>
 </body>
-</html>
+</html>
diff --git a/blog/index.html b/blog/index.html
@@ -21,13 +21,13 @@ <h1 class="text-normal text-white margin-0">Blog</h1>
       <div
         class="padding-bottom-5 margin-top-4 usa-prose border-bottom-05 border-base-lightest"
       >
-        <h3 class="title">
+        <h2 class="title">
           <a
             class="usa-link text-no-underline"
             href="{{ site.baseurl }}{{ post.url }}"
             >{{post.title}}</a
           >
-        </h3>
+        </h2>
         <div class="text-base margin-bottom-2">
           <div class="margin-top-neg-105">
             By <span class="text-bold">{{ post.author }}</span> · {{ post.date |
@@ -81,11 +81,11 @@ <h3 class="title">
         </div>
       </div>
     </div>
-    <aside class="desktop:grid-col-fill margin-top-4 padding-right-4">
+    <article aria-label="Other site posts and related links" class="desktop:grid-col-fill margin-top-4 padding-right-4">
       <div
         class="border-top-1 border-accent-cool-darker padding-top-2 margin-bottom-4 usa-prose"
       >
-        <h4 class="">Most Recent Posts</h4>
+        <h3 class="">Most Recent Posts</h3>
         <ul class="usa-list usa-list--unstyled padding-top-2">
           {% for post in site.posts limit:3 %}
           <li class="padding-bottom-1">
@@ -99,7 +99,7 @@ <h4 class="">Most Recent Posts</h4>
       <div
         class="border-top-1 border-accent-cool-darker padding-top-2 margin-bottom-4 usa-prose"
       >
-        <h4>Another list of links</h4>
+        <h3>Another list of links</h3>
         <ul class=" usa-list usa-list--unstyled padding-top-2">
           <li class="padding-bottom-1">
             <a class="usa-link" href="{{site.baseurl}}{{blog.url}}"
@@ -131,7 +131,7 @@ <h4>Another list of links</h4>
       <div
         class="border-top-1 border-accent-cool-darker padding-top-2 margin-bottom-4 usa-prose"
       >
-        <h4>Social links</h4>
+        <h3>Social links</h3>
         <ul class="usa-list usa-list--unstyled padding-top-2">
           <li class="padding-bottom-1">
             <svg
@@ -198,7 +198,7 @@ <h4>Social links</h4>
           </li>
         </ul>
       </div>
-    </aside>
+    </article>
   </div>
   <div class="grid-row padding-top-4 tablet:padding-x-4 margin-bottom-4">
     <a class="usa-link" href="#blog">Return to top</a>