Merge pull request #117 from cisagov/nmb/pa11y-scanning

Automated accessibility scanning

.github/workflows/test.yaml

@@ -12,61 +12,30 @@ on:
 jobs:
   python-linting:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v3
-      - name: Set up Python 3.10
+
-        uses: actions/setup-python@v3
+      - name: Linting
-      - name: Install linters
-        run: |
-          python -m pip install --upgrade pip
-          pip install bandit black flake8 mypy types-requests
-      - name: Lint with flake8
         working-directory: ./src
-        run: flake8 . --count --show-source --statistics
+        # all of our linting is configured in
-      - name: Check formatting with black
+        # registrar/management/commands/lint.py
-        working-directory: ./src
+        run: docker compose run app python manage.py lint
-        run: black --check .
-      - name: Run type checking
-        working-directory: ./src
-        run: mypy .
-      - name: Run bandit security scanning
-        working-directory: ./src
-        run: bandit -r .
 
   python-test:
     runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres
-        env:
-          POSTGRES_DB: app
-          POSTGRES_USER: user
-          POSTGRES_PASSWORD: feedabee
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-        ports:
-          - 5432:5432
-
     steps:
       - uses: actions/checkout@v3
-      - name: Set up Python 3.10
+
-        uses: actions/setup-python@v3
+      - name: Unit tests
-      - name: Install Django
         working-directory: ./src
-        run: |
+        run: docker compose run app python manage.py test
-          python -m pip install --upgrade pip
+
-          pip install pipenv
+  pa11y-scan:
-          pipenv install --system --dev
+    runs-on: ubuntu-latest
-      - name: Test
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Accessibility Scan
         working-directory: ./src
-        env:
+        # leverage the docker compose setup that we already have for local development
-          PYTHONUNBUFFERED: yup
+        run: docker compose run pa11y npm run pa11y-ci
-          DATABASE_URL: postgres://user:feedabee@localhost/app
-          DJANGO_SETTINGS_MODULE: registrar.config.settings
-          DJANGO_SECRET_KEY: feedabee
-          DJANGO_DEBUG: True
-        run: ./manage.py test

docs/developer/README.md

@@ -62,6 +62,20 @@ Linters:
 docker-compose exec app ./manage.py lint
 ```
 
+## Accessibility Scanning
+
+The tool `pa11y-ci` is used to scan pages for compliance with a set of
+accessibility rules. The scan runs as part of our CI setup (see
+`.github/workflows/test.yaml`) but it can also be run locally. To run locally,
+type
+
+```shell
+docker-compose run pa11y npm run pa11y-ci
+```
+
+The URLs that `pa11y-ci` will scan are configured in `src/.pa11yci`. When new
+views and pages are added, their URLs should also be added to that file.
+
 ## USWDS and styling
 We use the U.S. Web Design System (USWDS) for building and styling our applications. Additionally, we utilize the [uswds-compile tool](https://designsystem.digital.gov/documentation/getting-started/developers/phase-two-compile/) from USWDS  to compile and package the static assets.
 When you run `docker-compose up` the `node` service in the container will begin to watch for changes in the `registrar/assets` folder, and will recompile once any changes are made.

src/.pa11yci

@@ -0,0 +1,6 @@
+{
+    "urls": [
+        "http://app:8080/",
+        "http://app:8080/health/"
+    ]
+}

src/docker-compose.yml

@@ -49,3 +49,20 @@ services:
     stdin_open: true
     tty: true
     command: ./run_node_watch.sh
+
+  pa11y:
+    build:
+      context: .
+      dockerfile: node.Dockerfile
+    cap_add:
+      - SYS_ADMIN
+    volumes:
+      - .:/app
+      # internal Docker volume that will cover up the host's
+      # node_modules directory inside of the container
+      - /app/node_modules
+    working_dir: /app
+    links:
+      - app
+    profiles:
+      - pa11y

src/node.Dockerfile

@@ -0,0 +1,10 @@
+FROM docker.io/cimg/node:current-browsers
+
+WORKDIR /app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY --chown=circleci:circleci package*.json ./
+
+RUN npm install

src/package.json

@@ -4,12 +4,14 @@
   "description": "========================",
   "main": "index.js",
   "scripts": {
+    "pa11y-ci": "pa11y-ci",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@uswds/uswds": "^3.1.0",
+    "pa11y-ci": "^3.0.1",
     "sass": "^1.54.8"
   },
   "devDependencies": {

src/registrar/config/settings.py

@@ -158,6 +158,7 @@ TEMPLATES = [
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "registrar.context_processors.language_code",
             ],
         },
     },
@@ -493,8 +494,8 @@ if DEBUG:
         "::1",
     ]
 
-    # allow dev laptop to connect
+    # allow dev laptop and docker-compose network to connect
-    ALLOWED_HOSTS += ("localhost",)
+    ALLOWED_HOSTS += ("localhost", "app")
     SECURE_SSL_REDIRECT = False
     SECURE_HSTS_PRELOAD = False
 

src/registrar/context_processors.py

@@ -0,0 +1,13 @@
+from django.conf import settings
+
+
+def language_code(request):
+    """Add LANGUAGE_CODE to the template context.
+
+    The <html> element of a web page should include a lang="..." attribute. In
+    Django, the correct thing to put in that attribute is the value of
+    settings.LANGUAGE_CODE but the template context can't access that value
+    unless we add it here (and configure this context processor in the
+    TEMPLATES dict of our settings file).
+    """
+    return {"LANGUAGE_CODE": settings.LANGUAGE_CODE}

src/registrar/tests/test_views.py

@@ -8,4 +8,4 @@ class HealthTest(TestCase):
     def test_health_check_endpoint(self):
         response = self.client.get("/health/")
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(response.content, b"OK")
+        self.assertContains(response, "OK")

src/registrar/views/health.py

@@ -2,4 +2,6 @@ from django.http import HttpResponse
 
 
 def health(request):
-    return HttpResponse("OK")
+    return HttpResponse(
+        '<html lang="en"><head><title>OK - Get.gov</title></head><body>OK</body>'
+    )