testear accesibilidad durante el desarrollo :D

_includes/env.html

@@ -1,6 +1,7 @@
 <script async type="text/javascript">
   window.env = {
     AIRBRAKE_PROJECT_ID: {{ site.env.AIRBRAKE_PROJECT_ID }},
-    AIRBRAKE_PROJECT_KEY: '{{ site.env.AIRBRAKE_PROJECT_KEY }}'
+    AIRBRAKE_PROJECT_KEY: '{{ site.env.AIRBRAKE_PROJECT_KEY }}',
+    JEKYLL_ENV: '{{ site.env.JEKYLL_ENV }}'
   }
 </script>

_packs/entry.js

@@ -36,8 +36,29 @@ document.addEventListener('turbolinks:click', event => {
   event.preventDefault()
 })
 
+try {
+  window.axe = require('axe-core/axe')
+} catch(e) {}
+
+if (window.axe) window.axe.configure({ locale: require('axe-core/locales/es.json') })
+
 // Prevenir que Turbolinks interfiera la navegación a un anchor al
 // recargar la página
 document.addEventListener('turbolinks:load', event => {
   window.location.hash = window.location.hash
+
+  if (!window.axe) return
+
+  window.axe.run().then(results => {
+    results.violations.forEach(violation => {
+      violation.nodes.forEach(node => {
+        node.target.forEach(target => {
+          document.querySelectorAll(target).forEach(element => {
+            element.classList.add('inaccesible')
+            element.ariaLabel = node.failureSummary
+          })
+        })
+      })
+    })
+  })
 })

_sass/accessibility.scss

@@ -11,3 +11,27 @@
     animation: none !important;
   }
 }
+
+.inaccesible {
+  outline: $red 1px solid;
+
+  @extend .position-relative;
+
+  &:focus::after {
+    @extend .position-fixed;
+    @extend .background-red;
+    @extend .white;
+    @extend .p-3;
+
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    font-size: 1rem;
+
+    word-wrap: normal;
+    line-break: auto;
+    white-space: pre-line;
+
+    content: attr(aria-label);
+  }
+}

package.json

@@ -2,22 +2,23 @@
   "dependencies": {
     "bootstrap": "~4.4",
     "fork-awesome": "^1.1.7",
+    "lunr": "^2.3.9",
+    "lunr-languages": "^1.4.0",
     "purgecss": "~1"
   },
   "devDependencies": {
-    "liquidjs": "^9.14.0",
-    "lunr": "^2.3.9",
-    "lunr-languages": "^1.4.0",
-    "dotenv-webpack": "^6.0.0",
-    "turbolinks": "^5.2.0",
     "@airbrake/browser": "^1.4.1",
     "@babel/core": "^7.10.4",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
+    "axe-core": "^4.1.2",
     "babel-loader": "^8.1.0",
     "core-js": "^3.6.5",
+    "dotenv-webpack": "^6.0.0",
+    "liquidjs": "^9.14.0",
     "regenerator-runtime": "^0.13.5",
     "stimulus": "^1.1.1",
+    "turbolinks": "^5.2.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",

webpack.prod.js

@@ -1,7 +1,11 @@
-const merge = require('webpack-merge');
+const webpack = require('webpack')
-const common = require('./webpack.config');
+const merge = require('webpack-merge')
+const common = require('./webpack.config')
 
 module.exports = merge.merge(common, {
   mode: 'production',
-  devtool: 'source-map'
+  devtool: 'source-map',
+  plugins: [
+    new webpack.IgnorePlugin(/axe-core/)
+  ]
 });

yarn.lock

@@ -1227,6 +1227,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+axe-core@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
+  integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
+
 babel-loader@^8.1.0:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"