testear accesibilidad durante el desarrollo :D
This commit is contained in:
parent
3af4cf3e24
commit
cbb6e21854
8 changed files with 81 additions and 25 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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
11
package.json
11
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",
|
||||
|
|
|
@ -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/)
|
||||
]
|
||||
});
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue