src/patternfly/components/Button/button.scss (2)

768-772: ⚠️ Potential issue | 🟠 Major

Animation replays on every focus of an already-favorited button.

When an already-favorited button loses focus and is then focused again (e.g., via Tab navigation), the pf-m-favorited:focus selector transitions from non-matching → matching, which causes animation-name to go from unset back to #{$button}-icon-favorited — the animation-name property specifies the name of a keyframe animation, and loading or applying a new name causes the animation to execute. This means the "favorited" scale animation will fire repeatedly — once for every time the user Tabs back onto an already-favorited button — rather than only on the one-time transition into the favorited state.

The root cause is that :focus is a momentary state: as soon as focus leaves and returns, CSS sees the animation-name being "freshly applied" again, restarting the animation. This is the same mechanism that causes the original page-load bug; it's just gated by a different condition now.

A CSS-only workaround that avoids the replay problem is to keep animation-name permanently set on .pf-m-favorited .#{$button}__icon (so it never gets "re-applied"), and instead suppress it at the moment of initial render using animation-play-state:

💡 Alternative approach using animation-play-state

- // Favorite button will run an animation when favorited
- &.pf-m-favorited:focus .#{$button}__icon {
-   animation-name: #{$button}-icon-favorited;
-   animation-duration: var(--#{$button}--m-favorited__icon--AnimationDuration);
-   animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
- }

+ // Favorite button runs an animation when transitioning to favorited
+ &.pf-m-favorited .#{$button}__icon {
+   animation-name: #{$button}-icon-favorited;
+   animation-duration: var(--#{$button}--m-favorited__icon--AnimationDuration);
+   animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
+   animation-play-state: paused;
+ }
+
+ &.pf-m-favorited:focus .#{$button}__icon,
+ &.pf-m-favorited:active .#{$button}__icon {
+   animation-play-state: running;
+ }

Note: animation-play-state: paused keeps the animation-name always set (so it is never "re-applied"), while running only during an active focus/click interaction. Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence — so this still may not perfectly solve all scenarios. The most reliable fix for "play once on state change" requires a JavaScript animationend handler to clear the triggering class, as purely CSS-driven approaches cannot distinguish "first application" from "re-application."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Button/button.scss` around lines 768 - 772, The
animation is being re-applied on every focus because the rule sets
animation-name only for the :focus state; update the selectors so the
animation-name for the favorited icon is set permanently on the favorited state
(selector .pf-m-favorited .#{$button}__icon) and move the play control into a
separate property (use animation-play-state: paused by default and set to
running only on :focus/.pf-m-favorited:focus .#{$button}__icon) so the
animation-name is not re-applied when focus toggles; modify the rules around
.pf-m-favorited .#{$button}__icon and .pf-m-favorited:focus .#{$button}__icon to
implement this change.

---

768-772: ⚠️ Potential issue | 🟠 Major

Animation silently absent on mouse-click in macOS Safari.

On macOS, Chrome and Firefox will focus all interactive controls on click — including inputs, buttons, links, and even elements with tabindex="-1". Safari, on the other hand, does not focus buttons and links when clicked. The reason is that macOS didn't transfer focus to operating system and application buttons when they were clicked, and the stakeholders decided to be consistent with the operating system instead. The discussions have lasted 13 years and the team at Apple is adamant: buttons, links, and non-text inputs won't get focus.

Because the animation is now gated on :focus, macOS Safari users who click to favorite a button will never see the animation — the :focus pseudo-class simply isn't set on a button click in that browser. The PR title states the animation should fire "on click or keyboard activation", but :focus alone cannot fulfill the click case in Safari.

Adding :active to the selector partially addresses the click case (:active fires on mousedown in all browsers), though :active is only held during the press duration and animation-fill-mode: both would be needed to ensure the animation completes:

💡 Proposed addition of :active to cover mouse-click in all browsers

- &.pf-m-favorited:focus .#{$button}__icon {
+ &.pf-m-favorited:focus .#{$button}__icon,
+ &.pf-m-favorited:active .#{$button}__icon {
    animation-name: #{$button}-icon-favorited;
    animation-duration: var(--#{$button}--m-favorited__icon--AnimationDuration);
    animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
+   animation-fill-mode: both;
  }

This does not fully resolve the replay-on-re-focus concern raised separately, and ultimately a JS-driven approach (toggling a one-shot class on click/keydown, then removing it on animationend) would be the most semantically correct solution.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Button/button.scss` around lines 768 - 772, The
animation is only triggered on :focus which Safari doesn't apply on click;
update the CSS selector for the favorited icon (the .pf-m-favorited rule that
targets .#{$button}__icon and sets
animation-name/animation-duration/animation-timing-function) to also match
:active (e.g. .pf-m-favorited:focus and .pf-m-favorited:active) so mouse clicks
in Safari trigger it, and add animation-fill-mode: both (or set the
corresponding --#{$button}--m-favorited__icon--AnimationFillMode variable) so
the animation completes after :active ends; consider a separate JS-driven
one-shot class if replay-on-refocus is required.