Skip to content

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

Open
@gertsonderby

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions