testear accesibilidad durante el desarrollo :D

This commit is contained in:
f 2021-02-10 16:32:11 -03:00
parent 3af4cf3e24
commit cbb6e21854
8 changed files with 81 additions and 25 deletions

View file

@ -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>

View file

@ -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
})
})
})
})
})
})

View file

@ -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);
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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",

View file

@ -1,7 +1,11 @@
const merge = require('webpack-merge');
const common = require('./webpack.config');
const webpack = require('webpack')
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/)
]
});

View file

@ -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"