Fix Animation button accessibility issues (fixes #15762, #15763, #15764)

[maureenlholland]

One-line summary

As discussed with Tess, we'd like to keep the text visible on smaller screens to provide toggle animation button label

The above decision also helps make the label more visible for Windows High Contrast Mode

We also want to ensure the button is not overlapped by the sticky nav when focused

• I used an AI to write some of this code.

Significant changes and points to review

Other approaches considered for icon-only toggle animation button label:

• animated text reveal on hover
• custom tooltip
• HTML title attribute

Overall, the visible text label felt simplest and most accessible

Other approaches considered for focused button visibility:

• set custom property with sticky navigation height and use scroll margin to keep focused button below the sticky nav (this did not work when banner was also on page)

Issue / Bugzilla link

#15762
#15763
#15764

Testing

Go to http://localhost:8000/en-US/ and check animation toggle button in hero section

• Text label is visible when large screen is zoomed to 200%

• Text label is visible when on smaller tablet/mobile screens

• Test in Windows High Contrast Mode to confirm button focus color is correct and border color is visible

(Polypane testing with forced colors)
Focused & not focused

• With no motion pref, tab past the hero section, then tab back. The animation toggle button should be visible over top of the sticky navigation
• When button is not focused, the sticky nav is on top

Focused button above sticky nav

Not-focused button below sticky nav

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.07%. Comparing base (d49d532) to head (d41aaf8).
Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15776      +/-   ##
==========================================
+ Coverage   79.06%   79.07%   +0.01%     
==========================================
  Files         160      160              
  Lines        8355     8359       +4     
==========================================
+ Hits         6606     6610       +4     
  Misses       1749     1749              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[maureenlholland]

scroll margin experiment, don't think I'm going to use it, only seems to work with no banner and it doesn't seem worth adding up the nav & occasional banner heights

I think that leaves me with a z-index override option? open to other ideas

[maureenlholland]

we could also make these changes site-wide for buttons in forced-colors