build(compose): add A11yWatch standalone warp speed accessibility recipe

[j-mendez]

The New Solution/Problem/Issue/Bug:

The most efficient web accessibility tool that covers the most issues and domain reach(subdomains, TLDs, etc). Can run millions of audits within minutes depending on the pages being audited (SSG|SSR).

How this PR Solves The Problem:

Quick startup recipe that allows the community to get the most dynamic accessibility testing with flexibility. Can handle large websites in seconds to minutes including more accessibility coverage on the issues being able to detect by over 23% the best alternative.

Manual Testing Instructions:

If curl is installed you can perform a quick test over REST/OpenAPI

curl --location --request POST 'http://a11ywatch:3280/api/crawl' \                        
--header 'Transfer-Encoding: chunked' \
--header 'Content-Type: application/json' \
--data-raw '{
    "url": "https://a11ywatch.com",
    "subdomains": false,
    "tld": false,
    "robots": false,
    "sitemap": false
}' > results.json

Related Issue Link(s):

Standalone build is compact and very portable. The micro-service setup may be of use later too.

[tyler36]

@j-mendez This woul;d make a great canidate for a DDEV addon.

Would you like to try? https://github.com/drud/ddev-addon-template

[j-mendez]

@tyler36 yes, thank you for the direction 🙌.

[tyler36]

I'm getting a ERR_CONNECTION_REFUSED error trying to connect from Chrome (https://d10-base-demo.ddev.site:3280/), and a Unable to connect error from Firefox (http://d10-base-demo.ddev.site:3280/).

The installation instructions suggest I only need to the docker-compose.a11ywatch-standalone.yaml; no other configuration required. Is there something else I'm missing?

[j-mendez]

@tyler36 the Firefox startup should be optional. I think I missed an env accidentally, taking a look now.

[j-mendez]

@tyler36 I need to update the docker image for the standalone to allow the env var FIREFOX_ENABLED to download Firefox onto the image. Currently an env var FIREFOX_LB is required to connect outside. Firefox is also experimental at the moment.

The connection refused error does the chrome port 9280 need to be exposed? I ran the image via compose thinking it would be 1:1. Chrome is installed inside the image so exposing the port should not be required when communicating within the internal network.

[j-mendez]

. I was able to run the example using the following config on my mac m1:

The config.yaml

name: dtest
type: php
docroot: ""
php_version: "8.0"
webserver_type: nginx-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
  type: mariadb
  version: "10.4"
nfs_mount_enabled: false
mutagen_enabled: false
use_dns_when_possible: true
composer_version: "2"
web_environment: []
nodejs_version: "16"

A11yWatch docker-compose.a11ywatch-standalone.yaml

version: '3.6'
services:
  a11ywatch:
    container_name: ddev-${DDEV_SITENAME}-a11ywatch
    hostname: ${DDEV_SITENAME}-a11ywatch
    image: a11ywatch/a11ywatch:${A11YWATCH_IMAGE:-darwin}
    expose:
      - "3280"
      - "50050"
    environment:
      - COMPUTER_VISION_ENDPOINT=${COMPUTER_VISION_ENDPOINT:-""}
      - COMPUTER_VISION_SUBSCRIPTION_KEY=${COMPUTER_VISION_SUBSCRIPTION_KEY:-""}
      - PAGESPEED_API_KEY=${PAGESPEED_API_KEY:-""}
      - AI_DISABLED=${AI_DISABLED:-false}
      - SUPER_MODE=${SUPER_MODE:-true}
    labels:
      com.ddev.site-name: ${DDEV_SITENAME}
      com.ddev.approot: $DDEV_APPROOT
    volumes:
      - a11ywatch:/usr/share/a11ywatch/data
      - ".:/mnt/ddev_config"

volumes:
  a11ywatch:

I actually initially took a shot in the dark adding the implementation before running ddevv. Heard a lot of good things about it and saw the compose aspect which made the intro to adding the recipe more approachable.

[j-mendez]

@tyler36 addon available here https://github.com/a11ywatch/ddev-a11ywatch. I am trying to figure out why when I initially ran ddev the first time with the configs above the port 3280 was available.

The addon fails to bind 3280 and running. I went ahead and restarted the working instance and used ddev get a11ywatch/ddev-a11ywatch to test the addon install and the port failed to bind afterwards. I am using Docker desktop, I know sometimes configurations can mess up when interrupting docker processes like startups and shutdowns without letting things fully complete at times.

[rfay]

Awesome, subscribed!

In general, you don't want a "bind" anywhere in your docker-compose.*.yaml. Using bind means only one project can use it at a time. You want to use expose, and HTTP_EXPOSE + HTTPS_EXPOSE, as long as it's an http port. Take a look at the many other add-ons, ddev get --list --all

BTW, to make yours get listed there, add the label "ddev-get"

[j-mendez]

@rfay I was able to get it working with passing test. Thank you for the guidance https://github.com/a11ywatch/ddev-a11ywatch/actions/runs/4077009029.

[tyler36]

@j-mendez Great job!

Thanks for making the addon. I'm sure it will help others.

I just confirmed that "a11ywatch/ddev-a11ywatch" appears in the list when using ddev add --list --all.

Because we have the dedicated addon, I think we should close this PR.

[j-mendez]

@tyler36 no problem and thank you, sounds good. The add-on template was perfect!