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

@@ -37,3 +37,12 @@ group :jekyll_plugins do
   gem "jekyll-sitemap"
   gem "jekyll-seo-tag"
 end
+
+group :development, :test do
+  gem "rspec"
+  gem "selenium-webdriver"
+  gem "capybara"
+  gem "rack-jekyll"
+  gem "axe-core-rspec"
+  gem "axe-core-capybara"
+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,45 @@
+# 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(/<loc>.+<\/loc>/)
+  sitemap_links.filter_map do |link|
+    link = link.gsub("<loc>#{site_url}", '').gsub('</loc>', '')
+
+    next unless link.end_with?('.html') or 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

spec/spec_helper.rb

@@ -0,0 +1,86 @@
+# This file was generated by the `rspec --init` command. Conventionally, all
+# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
+# The generated `.rspec` file contains `--require spec_helper` which will cause
+# this file to always be loaded, without a need to explicitly require it in any
+# files.
+#
+# Given that it is always loaded, you are encouraged to keep this file as
+# light-weight as possible. Requiring heavyweight dependencies from this file
+# will add to the boot time of your test suite on EVERY test run, even for an
+# individual file that may not need all of that loaded. Instead, consider making
+# a separate helper file that requires the additional dependencies and performs
+# the additional setup, and require it from the spec files that actually need
+# it.
+#
+# See https://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
+
+require 'rspec'
+require 'capybara/rspec'
+require 'rack/jekyll'
+require 'rack/test'
+require 'axe-rspec'
+require 'axe-capybara'
+
+RSPEC_CONFIG_FILE = '_config.yml' or ENV['RSPEC_CONFIG_FILE']
+
+RSpec.configure do |config|
+  # rspec-expectations config goes here. You can use an alternate
+  # assertion/expectation library such as wrong or the stdlib/minitest
+  # assertions if you prefer.
+  config.expect_with :rspec do |expectations|
+    # This option will default to `true` in RSpec 4. It makes the `description`
+    # and `failure_message` of custom matchers include text for helper methods
+    # defined using `chain`, e.g.:
+    #     be_bigger_than(2).and_smaller_than(4).description
+    #     # => "be bigger than 2 and smaller than 4"
+    # ...rather than:
+    #     # => "be bigger than 2"
+    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
+  end
+
+  # rspec-mocks config goes here. You can use an alternate test double
+  # library (such as bogus or mocha) by changing the `mock_with` option here.
+  config.mock_with :rspec do |mocks|
+    mocks.verify_partial_doubles = true
+  end
+
+  # This option will default to `:apply_to_host_groups` in RSpec 4 (and will
+  # have no way to turn it off -- the option exists only for backwards
+  # compatibility in RSpec 3). It causes shared context metadata to be
+  # inherited by the metadata hash of host groups and examples, rather than
+  # triggering implicit auto-inclusion in groups with matching metadata.
+  config.shared_context_metadata_behavior = :apply_to_host_groups
+
+  Capybara.register_driver :chrome_headless do |app|
+    options = Selenium::WebDriver::Chrome::Options.new
+    options.add_argument('--headless')
+    options.add_argument('--no-sandbox')
+    options.add_argument('--disable-dev-shm-usage')
+    # macbook air ~13" screen size
+    options.add_argument('--window-size=1280,800')
+
+    Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
+  end
+
+  # Change default_driver to :selenium_chrome if you want to actually see the tests running in a browser locally.
+  # Should be :chrome_headless in CI though.
+  Capybara.default_driver = :chrome_headless
+  Capybara.javascript_driver = :chrome_headless
+
+  # Configure Capybara to load the website through rack-jekyll.
+  # (force_build: true) builds the site before the tests are run,
+  # so our tests are always running against the latest version
+  # of our jekyll site.
+  # TODO: Update this to expose _config.yml
+  jekyll_app = Rack::Jekyll.new(force_build: true, config: RSPEC_CONFIG_FILE)
+
+  # https://stackoverflow.com/questions/52506822/testing-a-jekyll-site-with-rspec-and-capybara-getting-a-bizarre-race-case-on-rs
+  sleep 0.1 while jekyll_app.compiling?
+
+  Capybara.app = jekyll_app
+
+  # Configure Capybara server (otherwise it will error and say to use webrick or puma)
+  Capybara.server = :webrick
+
+  config.include Capybara::DSL
+end