Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EmptyState: Don't apply animation when prefers-reduced-motion is set #87638

Merged
merged 3 commits into from
May 13, 2024

Conversation

ashharrison90
Copy link
Contributor

What is this feature?

  • only apply the empty state animation when no prefers reduced motion media preference is set

Why do we need this feature?

  • better a11y

Who is this feature for?

  • everyone!

Which issue(s) does this PR fix?:

Fixes #

Special notes for your reviewer:

Please check that:

  • It works as expected from a user's perspective.
  • If this is a pre-GA feature, it is behind a feature toggle.
  • The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

@ashharrison90 ashharrison90 added area/grafana/ui Issues that belong to components in the @grafana/ui library type/accessibility Accessibility problem / enhancement no-backport Skip backport of PR no-changelog Skip including change in changelog/release notes labels May 10, 2024
@ashharrison90 ashharrison90 added this to the 11.1.x milestone May 10, 2024
@ashharrison90 ashharrison90 self-assigned this May 10, 2024
@ashharrison90 ashharrison90 requested a review from a team as a code owner May 10, 2024 14:08
@ashharrison90 ashharrison90 requested review from tskarhed and JoaoSilvaGrafana and removed request for a team May 10, 2024 14:08
grotArm?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`);
grotMagnifier?.setAttribute('style', `transform: rotate(${rotation}deg) translateX(${translation}%)`);
});
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why doesn't this bail immediately, rather than at the very end?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point 👍

const grotArm = svgRef.current?.querySelector('#grot-not-found-arm');
const grotMagnifier = svgRef.current?.querySelector('#grot-not-found-magnifier');
// only apply animation if no reduced motion preference is set
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
if (!window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
return;

What about doing an early return instead? ;)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure 👍

@ashharrison90 ashharrison90 merged commit 2cdb7d9 into main May 13, 2024
18 checks passed
@ashharrison90 ashharrison90 deleted the ash/empty-state-animation branch May 13, 2024 09:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend area/grafana/ui Issues that belong to components in the @grafana/ui library no-backport Skip backport of PR no-changelog Skip including change in changelog/release notes type/accessibility Accessibility problem / enhancement
Projects
Status: 🚀 Done
Development

Successfully merging this pull request may close these issues.

None yet

3 participants