Add accessibility specs / resolve accessibility errors.

.github/workflows/jekyll.yml

@@ -32,24 +32,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup Ruby
-        uses: ruby/setup-ruby@55283cc23133118229fd3f97f9336ee23a179fcf # v1.146.0
+        uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
         with:
-          ruby-version: '3.1' # Not needed with a .ruby-version file
+          # Uses the .ruby-version specified in the root directory
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 0 # Increment this number if you need to re-download cached gems
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
       - name: Build with Jekyll
         # Outputs to the './_site' directory by default
         run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
         env:
           JEKYLL_ENV: production
       - name: Upload artifact
         # Automatically uploads an artifact from the './_site' directory by default
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
 
   # Deployment job
   deploy:
@@ -61,4 +61,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/specs.yml

@@ -0,0 +1,19 @@
+name: Run rspec tests
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ruby/setup-ruby@v1
+        with:
+          # Use the .ruby-version file in the repository
+          # runs 'bundle install' and caches installed gems automatically
+          bundler-cache: true
+      # TODO: Setup 'optional' a11y specs, in addition to required ones.
+      - name: Run rspec tests
+        run: |
+          bundle exec rspec

Gemfile

@@ -1,6 +1,8 @@
-source "https://rubygems.org"
+# frozen_string_literal: true
 
-ruby "~> 3"
+source 'https://rubygems.org'
+
+ruby '~> 3'
 
 # Hello! This is where you manage which Jekyll version is used to run.
 # When you want to use a different version, change it below, save the
@@ -11,12 +13,12 @@ ruby "~> 3"
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
 
-gem "jekyll", "~> 4"
-gem "kramdown"
-gem "kramdown-parser-gfm"
+gem 'jekyll', '~> 4'
+gem 'kramdown'
+gem 'kramdown-parser-gfm'
 
 # Needed for Ruby 3, Jekyll < 4
-gem "webrick"
+gem 'webrick'
 
 # Used for syncing content with aws
 # aws.cs10.org is a backup site
@@ -31,9 +33,18 @@ gem "webrick"
 
 # If you have any plugins, put them here!
 group :jekyll_plugins do
-  gem "jekyll-github-metadata", "~> 1.0"
-  gem "jekyll-redirect-from"
-  gem "jekyll-feed"
-  gem "jekyll-sitemap"
-  gem "jekyll-seo-tag"
+  gem 'jekyll-feed'
+  gem 'jekyll-github-metadata', '~> 1.0'
+  gem 'jekyll-redirect-from'
+  gem 'jekyll-seo-tag'
+  gem 'jekyll-sitemap'
+end
+
+group :development, :test do
+  gem 'axe-core-capybara'
+  gem 'axe-core-rspec'
+  gem 'capybara'
+  gem 'rack-jekyll'
+  gem 'rspec'
+  gem 'selenium-webdriver'
 end

Gemfile.lock

@@ -3,9 +3,38 @@ GEM
   specs:
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
+    axe-core-api (4.9.1)
+      dumb_delegator
+      virtus
+    axe-core-capybara (4.9.1)
+      axe-core-api (= 4.9.1)
+      dumb_delegator
+    axe-core-rspec (4.9.1)
+      axe-core-api (= 4.9.1)
+      dumb_delegator
+      virtus
+    axiom-types (0.1.1)
+      descendants_tracker (~> 0.0.4)
+      ice_nine (~> 0.11.0)
+      thread_safe (~> 0.3, >= 0.3.1)
     base64 (0.1.1)
+    capybara (3.40.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.11)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
+    coercible (1.0.0)
+      descendants_tracker (~> 0.0.1)
     colorator (1.1.0)
     concurrent-ruby (1.2.2)
+    descendants_tracker (0.0.4)
+      thread_safe (~> 0.3, >= 0.3.1)
+    diff-lcs (1.5.1)
+    dumb_delegator (1.0.0)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
@@ -23,6 +52,7 @@ GEM
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
+    ice_nine (0.11.2)
     jekyll (4.3.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
@@ -61,20 +91,47 @@ GEM
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    matrix (0.4.2)
     mercenary (0.4.0)
+    mini_mime (1.1.5)
+    nokogiri (1.16.6-arm64-darwin)
+      racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (5.0.3)
+    racc (1.8.0)
+    rack (1.6.13)
+    rack-jekyll (0.5.0)
+      jekyll (>= 1.3)
+      listen (>= 1.3)
+      rack (~> 1.5)
+    rack-test (2.1.0)
+      rack (>= 1.3)
     rake (13.0.6)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    regexp_parser (2.9.2)
     rexml (3.2.6)
     rouge (4.1.3)
+    rspec (3.13.0)
+      rspec-core (~> 3.13.0)
+      rspec-expectations (~> 3.13.0)
+      rspec-mocks (~> 3.13.0)
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-support (3.13.1)
     ruby2_keywords (0.0.5)
+    rubyzip (2.3.2)
     safe_yaml (1.0.5)
     sass-embedded (1.62.1)
       google-protobuf (~> 3.21)
@@ -84,16 +141,31 @@ GEM
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
+    selenium-webdriver (4.14.0)
+      rexml (~> 3.2, >= 3.2.5)
+      rubyzip (>= 1.2.2, < 3.0)
+      websocket (~> 1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
+    thread_safe (0.3.6)
     unicode-display_width (2.4.2)
+    virtus (2.0.0)
+      axiom-types (~> 0.1)
+      coercible (~> 1.0)
+      descendants_tracker (~> 0.0, >= 0.0.3)
     webrick (1.8.1)
+    websocket (1.2.10)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
 
 PLATFORMS
   ruby
   x64-mingw32
 
 DEPENDENCIES
+  axe-core-capybara
+  axe-core-rspec
+  capybara
   jekyll (~> 4)
   jekyll-feed
   jekyll-github-metadata (~> 1.0)
@@ -102,6 +174,9 @@ DEPENDENCIES
   jekyll-sitemap
   kramdown
   kramdown-parser-gfm
+  rack-jekyll
+  rspec
+  selenium-webdriver
   webrick
 
 RUBY VERSION

_config.yml

@@ -20,7 +20,7 @@ description: >
   The Beauty and Joy of Computing is an endorsed AP Computer Science Principles course that is a rigorous introduction to programming and that the ways we interact with and are affected by technology every day.
 keywords: >
   AP CSP, advanced placement, computer scince principles, comp sci, snap,
-  programming, computing, BJC, computer science, cs10, bjcx, bjc4nyc
+  programming, computing, BJC, computer science, cs10, bjcx, bjc4nyc, BJC Sparks, middle school, robotics,
 baseurl: ""
 # NOTE: This URL is needed for Github pages. It will get overriden
 # in the build scripts.
@@ -32,7 +32,7 @@ permalink: pretty
 # This is used for displaying a warning on sites that aren't the
 # production site.
 production_url: https://bjc.berkeley.edu
-twitter_username:   cspbjc
+# twitter_username:   cspbjc
 facebook_username:  cspbjc
 instagram_username: cspbjc
 flipboard_link:     https://bjc.link/computingnews
@@ -49,17 +49,16 @@ lang: en_US
 social:
     name: The Beauty and Joy of Computing
     links:
-        - https://twitter.com/cspbjc
         - https://www.facebook.com/cspbjc
         - https://github.com/beautyjoy
         - https://instagram.com/cspbjc
 google_site_verification: KuWL2ZXn4a2LNuAH4B-ghSObfCQ3tI6yXiSIRo6f05k"
 
-# These are specifically whitelisted by Github
 plugins:
   - jekyll-redirect-from
   - jekyll-feed
   - jekyll-seo-tag
+  - jekyll-sitemap
 
 # Build settings
 markdown: kramdown
@@ -75,3 +74,4 @@ exclude:
   - .*
   - .github
   - .devcontainer
+  - spec

spec/accessibility_spec.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+# Run accessibility specs for all pages in the webiste.
+# This runs the axe accessibility checker on each page in a headless browser.
+
+# spec_helper ensures the webiste is built and can be served locally
+
+require 'yaml'
+require 'spec_helper'
+
+# RSPEC_CONFIG_FILE = '_config.yml' or ENV['RSPEC_CONFIG_FILE']
+
+def site_url
+  @site_url ||= YAML.load_file(RSPEC_CONFIG_FILE)['url']
+end
+
+def load_site_urls
+  puts "Running accessibility tests, expected deploy URL: #{site_url}"
+  # TODO: Handle case where build is not in _site
+  sitemap_text = File.read('_site/sitemap.xml')
+  sitemap_links = sitemap_text.scan(%r{<loc>.+</loc>})
+  sitemap_links.filter_map do |link|
+    link = link.gsub("<loc>#{site_url}", '').gsub('</loc>', '')
+
+    next unless link.end_with?('.html') || link.end_with?('/')
+
+    link
+  end.sort
+end
+
+ALL_PAGES = load_site_urls
+puts "Running tests on #{ALL_PAGES.count} pages."
+puts "\t- #{ALL_PAGES.join("\n\t- ")}\n#{'=' * 50}\n\n"
+
+ALL_PAGES.each do |path|
+  describe "Page '#{path}' is accessible", type: :feature, js: true do
+    before(:each) do
+      visit(path)
+    end
+
+    it 'according to WCAG 2.0 AA (REQUIRED)' do
+      expect(page).to be_axe_clean.according_to(
+        :wcag2aa, "path: #{path} does NOT meet WCAG 2.0 AA standards"
+      )
+    end
+  end
+end