[checkbox] Show Checkmark to users with reduced-motion enabled

[kendallgassner]

When testing Stylelint-a11y rules I noticed that our Checkbox component does not show the checkmark when reduced motion is turned on:

Closes # (type the issue number after # if applicable; otherwise remove this line)

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

• Added/updated tests
• Added/updated documentation
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: a7ada69

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	102.71 KB (-0.03% 🔽)
dist/browser.umd.js	103.25 KB (-0.03% 🔽)

[kendallgassner]

Updating tests now...

[TylerJDev]

Very nice! ✨

[joshblack]

Just wanted to double-check, this seems to include the animation if prefers-reduced-motion is true. Would another possible path here be to add the following declaration to the checked -> before selector:

  &:checked,
  &:indeterminate {
    background: ${get('colors.accent.fg')};
    border-color: ${get('colors.accent.fg')};

    &::before {
+     clip-path: inset(0 0 0 0);

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
      }
    }
  }

So that it still appears with prefers-reduced-motion set but without the animation 👀

[kendallgassner]

@joshblack The animation is very minimal, I think it would be okay to leave in the motion for reduced-motion users.

@ericwbailey or @ichelsea could you also weigh in?

[ericwbailey]

My take is that the animation is minimal and user-initiated. I'd feel comfortable removing the query.

[ichelsea]

@kendallgassner I agree with Eric!