MaxMilton/ekscss

View on GitHub
packages/framework/level2/a11y.xcss

Summary

Maintainability
Test Coverage
/* Nav Lists
************/

/*
* List styling is not usually desired in navigation,
* but this also removes list-semantics for screen-readers
* See: https://github.com/mozdevs/cssremedy/issues/15
* See: https://github.com/jensimmons/cssremedy/blob/master/css/reminders.css
*/
nav ul {
  list-style: none;
}

/*
* 1. Add zero-width-space to prevent VoiceOver disable
* 2. Absolute position ensures no extra space
* See: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/
* See: https://github.com/jensimmons/cssremedy/blob/master/css/reminders.css
*/
nav li::before {
  position: absolute;
  content: '\200B';
}

/* Reduced Motion
*****************/

/*
* 1. Immediately jump any animation to the end point
* 2. Remove transitions & fixed background attachment
* See: https://github.com/mozdevs/cssremedy/issues/11
* See: https://github.com/jensimmons/cssremedy/blob/master/css/reminders.css
*/
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}