Add pa11y-ci for automated accessibility tests with htmlcs runner

.github/workflows/pa11y.yml

@@ -0,0 +1,54 @@
+name: Tests
+
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+  pull_request:
+
+env:
+  FORCE_COLOR: 2
+  NODE: 16
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - run: java -version
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Compile dist
+        run: npm run dist
+
+      - name: Update sri
+        run: npm run release-sri
+
+      - name: Test docs
+        run: npm run docs-build
+
+      - name: Run accessibility tests
+        run: npm run docs-accessibility-json
+
+      - name: Generate HTML accessibility results
+        run: npm run docs-pa11y-html
+        if: failure()
+
+      - name: Upload accessibility results
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: pa11y-ci-results
+          path: pa11y-ci-report/
+          if-no-files-found: error

.gitignore

@@ -39,3 +39,7 @@ Thumbs.db
 # Folders to ignore
 /js/coverage/
 /node_modules/
+
+# Pa11y
+/pa11y-ci-report/
+pa11y-ci-results.json 

build/.pa11yci.json

@@ -0,0 +1,11 @@
+{
+  "standard": "WCAG2AA",
+  "level": "error",
+  "concurrency": 8,
+  "defaults": {
+    "runners": [
+      "htmlcs"
+    ],
+    "hideElements": ".bd-search, footer > div > div > div:nth-child(1) > ul > li, footer > p > a, div:nth-child(4) > main > div:nth-child(3) > div:nth-child(9) > div > strong, button.btn.btn-outline-warning, button.btn.btn-outline-info, button.btn.btn-outline-light, nav.navbar-dark.bg-dark button.btn.btn-outline-success, aside > h2, #disabled-forms > div:nth-child(2) > div > form > fieldset, #floating-labels > div:nth-child(2) > div > form, .navbar.navbar-light > .nav.nav-pills > li > a.nav-link, .bg-light > .text-success, ul.dropdown-menu > li > a.dropdown-item.disabled, a.link-warning, a.link-info, a.link-light, nav.navbar.navbar-light.bg-light .btn.btn-outline-success, nav.navbar.navbar-light.bg-light .btn.btn-outline-secondary, nav.navbar.navbar-light .btn.btn-outline-primary, h4#constructor, label.bg-light .text-muted, nav.navbar-light.bg-light nav.nav.nav-pills > a.nav-link, .sidebar.bg-light .text-muted, form.form-floating, .bg-light .btn.btn-outline-secondary, div[id^=navbarsExample] > form, main > header > div > div > a, main > div > header > a, main header > div > div > div > a, input.form-control[placeholder='Promo code'], input.form-control[placeholder='رمز ترويجي'], .bg-light form small.text-muted, .bg-light form span.text-muted, .bg-light footer.text-muted > p, .bg-light footer > ul > li > a, #dropdownFilter > div > form, #dropdownCalendar > div > div > div > select, #dropdownCalendar > div > div > div > button, footer > p + a[href='/'], footer > div > a[href='/'], footer ul > li > a[href='#'], div:nth-child(10) > footer > div:nth-child(1) > div:nth-child(4) > form, p.text-warning, header div.bg-dark a.text-secondary, header.bg-dark a.text-secondary, header:nth-child(8) > div > div form, header:nth-child(10) > div > div form, header:nth-child(12) > div > div form, header:nth-child(16) > div form, header:nth-child(18) > div > div form, form.bg-light small.text-muted, div.bg-dark.text-secondary p, .bg-light code, .bg-light a, footer.bg-light span.text-muted, main > div:nth-child(3) > div:nth-child(55) > nav > form, main > div:nth-child(3) > div:nth-child(59) > nav > form, main > div:nth-child(3) > div:nth-child(133) > nav > div > button, .opacity-100.bg-primary.text-light, .opacity-75.bg-primary.text-light, .opacity-50.bg-primary.text-light, .opacity-25.bg-primary.text-light, main > div:nth-child(3) > table.table.text-center, body > main > form > p.text-muted, main > div:nth-child(3) > div:nth-child(49) > form"
+  }
+}