Sha256: e2c3ebc229b2b3affd1ccc302e8fa07fc0eab51ed324cd214cc2e250b335d1d5
Contents?: true
Size: 1.14 KB
Versions: 9
Compression:
Stored size: 1.14 KB
Contents
////
/// Accesibilidad
/// @group Accesibilidad
////
/// Aquí se aplica la opción `prefers-reduced-motion: reduce`, pero
/// SassDoc no la estaría mostrando.
@media (prefers-reduced-motion: reduce) {
/// Si les usuaries prefirieron reducir las animaciones de los sitios,
/// deshabilitamos la navegación suavizada y las animaciones.
* {
scroll-behavior: auto !important;
animation: none !important;
}
}
/// Utilizamos Axe para poder marcarnos cuáles elementos no cumplen con
/// parámetros de accesibilidad durante el desarrollo. Esta clase
/// muestra un borde rojo alrededor de los elementos inaccesibles y al
/// obtener el foco, muestra los mensajes de error generados por Axe.js.
///
/// @link _packs/entry.js
.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;
/// El contenido se trae desde el ariaLabel del elemento.
content: attr(aria-label);
}
}
Version data entries
9 entries across 9 versions & 2 rubygems