Skip to content

Master spinner does not respect prefers-reduced-motion #399

Description

@gertsonderby
  • pure-react-carousel version: 1.28.0
  • react version: 17.0.2
  • browser used: Firefox 96.0
  • node version: v16.13.0

Relevant code or config:

<StyledCarouselProvider
    [...]
    hasMasterSpinner={false}
    [...]
        >

What you did:

Set hasMasterSpinner prop on provider component to true, load the page with long-loading or erroring slides, or JS switched off. Spinner shows on page and stays there for a significant amount of time.

What happened:

With browser set to prefer reduced motion, master spinner animation continues to rotate forever.

Problem description:

Animations should be possible to reduce or stop based on user configuration to be accessible. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html for more information.

Suggested solution:

Add a prefers-reduced-motion media query which limits the animation suitably.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions