diff --git a/.changeset/underline-nav-reduced-motion.md b/.changeset/underline-nav-reduced-motion.md new file mode 100644 index 00000000000..86b0309ce0c --- /dev/null +++ b/.changeset/underline-nav-reduced-motion.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +UnderlineNav and TabNav: skip the loading-counter pulse when prefers-reduced-motion is reduce. diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.module.css b/packages/react/src/internal/components/UnderlineTabbedInterface.module.css index 04f1df2ccc0..4129391431a 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.module.css +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.module.css @@ -167,7 +167,10 @@ border-color: var(--borderColor-default); /* stylelint-disable-next-line primer/borders */ border-radius: 20px; - animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate; + + @media (prefers-reduced-motion: no-preference) { + animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate; + } } @keyframes loadingCounterKeyFrames {