fix(button): prevent style changes on hover for disabled form buttons (…

…#2281)
eBay · Mar 15, 2024 · f39fdfa · f39fdfa
1 parent 96fd3fc
commit f39fdfa
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/.changeset/strange-forks-flow.md b/.changeset/strange-forks-flow.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fix(button): prevent style changes on hover for disabled form buttons
diff --git a/dist/button/button.css b/dist/button/button.css
@@ -352,14 +352,14 @@ a.fake-btn--form {
   border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
   max-width: 100%;
 }
-button.btn--form:hover,
-a.fake-btn--form:hover,
-button.btn--form:focus,
-a.fake-btn--form:focus {
+button.btn--form:not([disabled], [aria-disabled="true"]):hover,
+a.fake-btn--form:not([href]):hover,
+button.btn--form:not([disabled], [aria-disabled="true"]):focus,
+a.fake-btn--form:not([href]):focus {
   background-color: var(--color-state-primary-hover);
 }
-button.btn--form:active,
-a.fake-btn--form:active {
+button.btn--form:not([disabled], [aria-disabled="true"]):active,
+a.fake-btn--form:not([href]):active {
   background-color: var(--color-state-primary-active);
 }
 button.btn--form.btn--large {

diff --git a/dist/listbox-button/listbox-button.css b/dist/listbox-button/listbox-button.css
@@ -45,12 +45,12 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button button[aria-invalid="true"] {
   border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention));
 }
-.listbox-button:not(.listbox-button--error) button.btn--form {
+.listbox-button:not(.listbox-button--error) button:not([disabled], [aria-disabled="true"]).btn--form {
   border-color: var(--listbox-button-border-color, var(--color-stroke-default));
 }
-.listbox-button:not(.listbox-button--error) button.btn--form:hover,
-.listbox-button:not(.listbox-button--error) button.btn--form:focus,
-.listbox-button:not(.listbox-button--error) button.btn--form:active {
+.listbox-button:not(.listbox-button--error) button:not([disabled], [aria-disabled="true"]).btn--form:hover,
+.listbox-button:not(.listbox-button--error) button:not([disabled], [aria-disabled="true"]).btn--form:focus,
+.listbox-button:not(.listbox-button--error) button:not([disabled], [aria-disabled="true"]).btn--form:active {
   border-color: inherit;
 }
 .listbox-button button.expand-btn--borderless,
@@ -77,7 +77,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button[disabled],
 .listbox-button.listbox-button--form button[aria-disabled="true"] {
   border-color: var(--listbox-button-disabled-border-color, var(--color-background-disabled));
-  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-primary));
+  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-disabled));
 }
 .listbox-button.listbox-button--form button:focus {
   background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary));

diff --git a/src/less/button/button.less b/src/less/button/button.less
@@ -354,7 +354,10 @@ a.fake-btn--form {
     border-color: inherit;
     .border-radius-token(expand-btn-border-radius, border-radius-50);
     max-width: 100%;
+}
 
+button.btn--form:not([disabled], [aria-disabled="true"]),
+a.fake-btn--form:not([href]) {
     &:hover,
     &:focus {
         background-color: var(--color-state-primary-hover);

diff --git a/src/less/listbox-button/listbox-button.less b/src/less/listbox-button/listbox-button.less
@@ -42,7 +42,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
 }
 
-.listbox-button:not(.listbox-button--error) button.btn--form {
+.listbox-button:not(.listbox-button--error)
+    button:not([disabled], [aria-disabled="true"]).btn--form {
     .border-color-token(listbox-button-border-color, color-stroke-default);
 
     &:hover,
@@ -78,7 +79,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button[disabled],
 .listbox-button.listbox-button--form button[aria-disabled="true"] {
     .border-color-token(listbox-button-disabled-border-color, color-background-disabled);
-    .color-token(listbox-button-disabled-foreground-color, color-foreground-primary);
+    .color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
 }
 
 .listbox-button.listbox-button--form button:focus {