Axe accessibility test support (alshedivat#2080)

Added GitHub action to do axe accessibility tests with [axe cli](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli). I believe it is best by default to let this be run only manually, since fixing some of the issues are not straightforward (I haven't fixed them all for this template yet). --------- Signed-off-by: George Araújo <[email protected]>
siril-teja · Jun 19, 2024 · 60e32c4 · 60e32c4
1 parent 84f4667
commit 60e32c4
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 4 deletions.
diff --git a/.github/workflows/axe.yml b/.github/workflows/axe.yml
@@ -0,0 +1,61 @@
+name: Axe accessibility testing
+
+on:
+  # if you want to run this on every push uncomment the following lines
+  # push:
+  #   branches:
+  #     - master
+  #     - main
+  # pull_request:
+  #   branches:
+  #     - master
+  #     - main
+  workflow_dispatch:
+    inputs:
+      url:
+        description: "URL to be checked (e.g.: blog/)"
+        required: false
+
+permissions:
+  contents: write
+
+env:
+  URL: ""
+
+jobs:
+  check:
+    # available images: https://github.com/actions/runner-images#available-images
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.2.2"
+          bundler-cache: true
+      - name: Update _config.yml ⚙️
+        uses: fjogeleit/[email protected]
+        with:
+          commitChange: false
+          valueFile: "_config.yml"
+          changes: |
+            {
+              "giscus.repo": "${{ github.repository }}",
+              "baseurl": ""
+            }
+      - name: Install and Build 🔧
+        run: |
+          pip3 install --upgrade jupyter
+          npm install -g mermaid.cli
+          npm install -g purgecss
+          export JEKYLL_ENV=production
+          bundle exec jekyll build --lsi
+          purgecss -c purgecss.config.js
+      - name: Run axe 🪓
+        # https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli
+        run: |
+          npm install -g @axe-core/cli
+          npm install -g http-server
+          http-server _site/ &
+          axe http://localhost:8080/${{ github.event.inputs.url || env.URL }} --load-delay=1500 --exit
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
@@ -1,5 +1,5 @@
 {% if site.footer_fixed %}
-  <footer class="fixed-bottom">
+  <footer class="fixed-bottom" role="contentinfo">
     <div class="container mt-0">
       &copy; Copyright {{ site.time | date: '%Y' }}
       {{ site.first_name }}
@@ -14,7 +14,7 @@
     </div>
   </footer>
 {% else %}
-  <footer class="sticky-bottom mt-5">
+  <footer class="sticky-bottom mt-5" role="contentinfo">
     <div class="container">
       &copy; Copyright {{ site.time | date: '%Y' }}
       {{ site.first_name }}

diff --git a/_includes/header.liquid b/_includes/header.liquid
@@ -1,6 +1,6 @@
 <header>
   <!-- Nav Bar -->
-  <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
+  <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}" role="navigation">
     <div class="container">
       {% if page.permalink != '/' %}
         <a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl }}/">

diff --git a/_layouts/default.liquid b/_layouts/default.liquid
@@ -14,7 +14,7 @@
     {% include header.liquid %}
 
     <!-- Content -->
-    <div class="container mt-5">
+    <div class="container mt-5" role="contentinfo">
       {% if page.toc and page.toc.sidebar %}
         {% if page.toc.sidebar == 'right' %}
           <div class="row">