Feature/accessability (#267)

* fix syntax-highlight
* minor global adjustments for better compliance
* prefer design color tokens
* 0 compliance errors
* add compliance action
* prefer design token colors
* removed comments
* improve pa11y config

---------

Co-authored-by: David Waltermire <davewaltermire@gmail.com>
Co-authored-by: A.J. Stein <alexander.stein@gsa.gov>

Author: 3 people

.github/workflows/workflow-compliance-test.yml

@@ -0,0 +1,107 @@
+name: Compliance Test
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+    - main
+    - develop
+    - "feature/*"
+    - "release/*"
+
+jobs:
+  compliance-test:
+    name: Run Compliance Tests
+    runs-on: ubuntu-22.04
+    steps:
+    - name: Checkout Latest
+      uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+      with:
+        submodules: recursive
+
+    # Install Hugo
+    - name: Read .env
+      id: hugo-version
+      run: |
+        . .github/workflows/config/.env
+        echo "HUGO_VERSION=${HUGO_VERSION}" >> "${GITHUB_OUTPUT}"
+
+    - uses: actions/setup-go@41dfa10bad2bb2ae585af6ee5bb4d7d973ad74ed
+      with:
+        go-version: '1.21'  
+
+    - name: Setup Hugo
+      uses: peaceiris/actions-hugo@16361eb4acea8698b220b76c0d4e84e1fd22c61d
+      with:
+        hugo-version: '${{ steps.hugo-version.outputs.HUGO_VERSION }}'
+        extended: true
+
+    - name: Set up NodeJS
+      uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8
+      with:
+        node-version-file: '.github/workflows/config/.nvmrc'
+        cache: 'npm'
+        cache-dependency-path: package-lock.json
+
+    - name: Install Chrome
+      run: |
+        echo "Installing Chrome..."
+        wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+        sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+        sudo apt-get update
+        sudo apt-get install -y google-chrome-stable
+        google-chrome --version
+
+    - name: Install Dependencies
+      run: |
+        npm install --loglevel verbose
+        
+        # Verify pa11y-ci installation
+        echo "Checking pa11y-ci installation..."
+        npx pa11y-ci --version
+        which pa11y-ci || echo "pa11y-ci not in PATH"
+        ls -la node_modules/.bin/pa11y-ci || echo "pa11y-ci not in node_modules/.bin"
+
+    # Start Hugo server in background and wait for it to be ready
+    - name: Start Hugo Server
+      run: |
+        cd website
+        hugo serve --bind 0.0.0.0 --baseURL http://localhost:1313/hugo-uswds/ &
+        HUGO_PID=$!
+        echo "Hugo server started with PID: $HUGO_PID"
+        
+        # Check port binding
+        echo "Checking network status..."
+        netstat -tlpn
+        
+        echo "Waiting for Hugo server to start..."
+        
+        # Wait for up to 30 seconds for the server to be ready
+        max_attempts=30
+        attempt=1
+        while ! curl -s --head http://localhost:1313/hugo-uswds/ > /dev/null; do
+          if [ $attempt -gt $max_attempts ]; then
+            echo "Server failed to start after $max_attempts seconds"
+            exit 1
+          fi
+          echo "Attempt $attempt: Server not ready yet, waiting..."
+          sleep 1
+          attempt=$((attempt + 1))
+        done
+        
+        echo "Server is ready!"
+        echo "Network status after server start:"
+        netstat -tlpn
+        echo "Testing server response:"
+        curl -I http://localhost:1313/hugo-uswds/
+        echo "Process status:"
+        ps aux | grep hugo
+
+    # Run compliance tests with increased verbosity
+    - name: Run Compliance Tests
+      run: |
+        # Verify sitemap is accessible
+        echo "Testing sitemap access..."
+        curl -v http://localhost:1313/hugo-uswds/sitemap.xml
+        
+        echo "Running pa11y-ci tests with debug logging..."
+        DEBUG=pa11y* CHROME_PATH=$(which google-chrome) npm run test:compliance

.github/workflows/workflow-generate-website.yml

@@ -102,7 +102,7 @@ jobs:
         npm install --loglevel verbose
         echo "$PWD/node_modules/.bin/" >> $GITHUB_PATH
     # cache hugo modules
-    - uses: actions/cache@13aacd865c20de90d75de3b17ebe84f7a17d57d2
+    - uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf
       with:
         path: /tmp/hugo_cache
         key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.sum') }}
@@ -118,7 +118,7 @@ jobs:
         zip ${{ runner.temp }}/website.zip -r public/
       working-directory: ${{ github.workspace }}/website
     - name: Upload generated site
-      uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce
+      uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1
       with:
         name: website
         path: |
@@ -137,7 +137,7 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       continue-on-error: true
     - name: Upload link check report
-      uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce
+      uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1
       with:
         name: html-link-report
         path: html-link-report.md

.pa11yci

@@ -0,0 +1,15 @@
+{
+  "defaults": {
+    "timeout": 60000,
+    "chromeLaunchConfig": {
+      "args": [
+        "--no-sandbox",
+        "--disable-setuid-sandbox",
+        "--headless",
+        "--disable-gpu",
+        "--disable-dev-shm-usage"
+      ]
+    },
+    "standard": "WCAG2AA"
+  }
+}

dist/css/styles.css

@@ -55,7 +55,9 @@
 {{- end -}}
 
 {{- if ne .Kind "404" }}
-  <p class="font-sans-sm text-center" style="margin: 1.5rem auto; clear: both;">This page was last updated on {{ .Lastmod.Format "January 2, 2006" }}.{{ if .Site.Params.contentrepopath }} <a href="{{ .Site.Params.contentrepopath }}/{{ with .File }}{{ .Path }}{{ end }}">Improve this Page.</a>{{ end }}</p>
+  <footer>
+    <p class="font-sans-sm text-center" style="margin: 1.5rem auto; clear: both;">This page was last updated on {{ .Lastmod.Format "January 2, 2006" }}.{{ if .Site.Params.contentrepopath }} <a href="{{ .Site.Params.contentrepopath }}/{{ with .File }}{{ .Path }}{{ end }}">Improve this Page.</a>{{ end }}</p>
+  </footer>
 {{- end -}}
 
 {{- range .Site.Params.custom_js }}

dist/css/styles.css.map

@@ -21,6 +21,6 @@
   {{- end -}}
 
   <li class="{{ delimit $itemClasses " " }}">
-    <a href="{{ $page.RelPermalink }}" class="{{ delimit $anchorClasses " " }}"{{ if eq $page $activePage }} aria-current="page"{{end}}><span>{{ $page.LinkTitle }}</span></a>
+    <a href="{{ $page.RelPermalink }}" class="{{ delimit $anchorClasses " " }}"{{ if eq $page $activePage }} aria-current="page"{{end}}>{{ $page.LinkTitle }}</a>
   </li>
 {{- end -}}

dist/js/hugo-uswds.min.js

@@ -7,7 +7,7 @@
         <button class="usa-accordion__button usa-nav__link{{ if $currentPage.HasMenuCurrent "primary" . }} usa-current{{ end }}"
           type="button"
           aria-expanded="false"
-          aria-controls="{{ $guid }}"><span>{{ .Name }}</span></button>
+          aria-controls="{{ $guid }}">{{ .Name }}</button>
         <ul id="{{ $guid }}" class="usa-nav__submenu">
           <li class="usa-nav__submenu-item">
             <a href="{{ .URL }}">{{ .Name }}</a>
@@ -21,7 +21,7 @@
       </li>
     {{ else }}
       <li class="usa-nav__primary-item">
-        <a class="usa-nav__link" href="{{ .URL }}"><span>{{ .Name }}</span></a>
+        <a class="usa-nav__link" href="{{ .URL }}">{{ .Name }}</a>
       </li>
     {{ end }}
   {{ end }}