Skip to content

Possible to detect global prefers-reduced-motion: reduce? #56

@schalkneethling

Description

@schalkneethling

When using https://hankchizljaw.com/wrote/a-modern-css-reset/ it globally turns off all animations and transitions if prefers-reduced-motion: reduce is set, see below:

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  /* We are relaxing the `declaration-no-important` here
     because we want to ensure that code further down the
     cascade will adhere to this accessibility enhancement */
  /* stylelint-disable declaration-no-important */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Thing is, this plugin does not know that and so if you have something like the following in a different stylesheet:

transform-origin: 50%;
transition: transform 0.3s;

It will cause an error around the use of reduced motion. I imagine detecting this might be very problematic but, could there be an additional value one can set other than false, perhaps global?

So, then one can do

"rules": {
  ...
  "a11y/media-prefers-reduced-motion": global
}

instead of:

"rules": {
  ...
  "a11y/media-prefers-reduced-motion": false
}

This is not a deal-breaker but conveys intent a bit more clearly i.e. I am not turning the rule off and ignoring the guidance but, instead, have a global reset that already turns it all off. Would appreciate your thoughts on this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions