fix(back-to-top): change background color on hover and focus (#3096)

bennypowers · web-flow · commit cc84a1265e4c · 2026-04-15T13:40:18.000Z
* fix(back-to-top): change background color on hover and focus Apply hover/focus colors directly rather than through CSS custom property overrides that don't cascade into shadow DOM. Closes #2743 Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: changeset
diff --git a/.changeset/fix-back-to-top-hover.md b/.changeset/fix-back-to-top-hover.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-back-to-top>`: fixed background color during hover and focus.
diff --git a/elements/pf-back-to-top/pf-back-to-top.css b/elements/pf-back-to-top/pf-back-to-top.css
@@ -41,14 +41,16 @@ a {
   gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 
-a:hover {
+a:hover,
+a:focus {
   --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
 }
 
-a:focus {
-  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));
+[part="trigger"]:is(pf-button):hover,
+[part="trigger"]:is(pf-button):focus-within {
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
+  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
 }
 
 [part="trigger"][hidden] {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@patternfly/elements": patch
 +---
++
 +`<pf-back-to-top>`: fixed background color during hover and focus.
Original file line number	Diff line number	Diff line change
`@@ -41,14 +41,16 @@ a {`
`41`	`41`	`gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));`
`42`	`42`	`}`
`43`	`43`
`44`		`-a:hover {`
	`44`	`+a:hover,`
	`45`	`+a:focus {`
`45`	`46`	`--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));`
`46`	`47`	`--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));`
`47`	`48`	`}`
`48`	`49`
`49`		`-a:focus {`
`50`		`- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));`
	`50`	`+[part="trigger"]:is(pf-button):hover,`
	`51`	`+[part="trigger"]:is(pf-button):focus-within {`
`51`	`52`	`--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));`
	`53`	`+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));`
`52`	`54`	`}`
`53`	`55`
`54`	`56`	`[part="trigger"][hidden] {`