Bug fix: Button aria-expanded state (CSS Modules) (#5011)

* reorder + test

* add snap

* Create weak-ravens-greet.md

* danger active icon

* test(vrt): update snapshots

* test disable

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>

.changeset/weak-ravens-greet.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: `Button` aria-expanded state (CSS Modules)

e2e/components/Button.test.ts

@@ -700,6 +700,51 @@ test.describe('Button', () => {
           })
         }
       })
+
+      test.describe('Aria expanded buttons', () => {
+        for (const theme of themes) {
+          test.describe(theme, () => {
+            test('default @vrt', async ({page}) => {
+              await visit(page, {
+                id: 'components-button-features--expanded-button',
+                globals: {
+                  colorScheme: theme,
+                  featureFlags: {
+                    primer_react_css_modules_team: featureFlagOn,
+                  },
+                },
+              })
+
+              // Default state
+              expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+                `Button.Aria expanded buttons.${theme}.png`,
+              )
+            })
+
+            // temporarily disabled due to a bug in primer/primitves
+
+            // eslint-disable-next-line jest/no-commented-out-tests
+            // test('axe @aat', async ({page}) => {
+            //   await visit(page, {
+            //     id: 'components-button-features--expanded-button',
+            //     globals: {
+            //       colorScheme: theme,
+            //       featureFlags: {
+            //         primer_react_css_modules_team: featureFlagOn,
+            //       },
+            //     },
+            //   })
+            //   await expect(page).toHaveNoViolations({
+            //     rules: {
+            //       'color-contrast': {
+            //         enabled: theme !== 'dark_dimmed',
+            //       },
+            //     },
+            //   })
+            // })
+          })
+        }
+      })
     })
   }
 })

packages/react/src/Button/Button.features.stories.tsx

@@ -210,3 +210,20 @@ export const InactiveButtonWithTooltip = () => (
     <Button inactive>Review changes</Button>
   </Tooltip>
 )
+
+export const ExpandedButton = () => (
+  <Stack align="start">
+    <Button aria-expanded trailingAction={TriangleDownIcon}>
+      Review changes
+    </Button>
+    <Button aria-expanded trailingAction={TriangleDownIcon} variant="primary">
+      Review changes
+    </Button>
+    <Button aria-expanded trailingAction={TriangleDownIcon} variant="invisible">
+      Review changes
+    </Button>
+    <Button aria-expanded trailingAction={TriangleDownIcon} variant="danger">
+      Review changes
+    </Button>
+  </Stack>
+)

packages/react/src/Button/ButtonBase.module.css

@@ -251,6 +251,11 @@
     background-color: var(--button-default-bgColor-rest);
     box-shadow: var(--button-default-shadow-resting);
 
+    &[aria-expanded='true'] {
+      background-color: var(--button-default-bgColor-active);
+      border-color: var(--button-default-borderColor-active);
+    }
+
     &:hover {
       background-color: var(--button-default-bgColor-hover);
       border-color: var(--button-default-borderColor-hover);
@@ -268,11 +273,6 @@
       box-shadow: none;
     }
 
-    &[aria-expanded='true'] {
-      background-color: var(--button-default-bgColor-active);
-      border-color: var(--button-default-borderColor-active);
-    }
-
     & .CounterLabel {
       background-color: var(--buttonCounter-default-bgColor-rest) !important; /* temporarily override our own sx prop */
     }
@@ -290,6 +290,11 @@
     border-color: var(--button-primary-borderColor-rest);
     box-shadow: var(--shadow-resting-small);
 
+    &[aria-expanded='true'] {
+      background-color: var(--button-primary-bgColor-active);
+      box-shadow: var(--button-primary-shadow-selected);
+    }
+
     &:hover {
       background-color: var(--button-primary-bgColor-hover);
       border-color: var(--button-primary-borderColor-hover);
@@ -312,11 +317,6 @@
       box-shadow: none;
     }
 
-    &[aria-expanded='true'] {
-      background-color: var(--button-primary-bgColor-active);
-      box-shadow: var(--button-primary-shadow-selected);
-    }
-
     & .CounterLabel {
       color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */
       background-color: var(--buttonCounter-primary-bgColor-rest) !important; /* temporarily override our own sx prop */
@@ -335,6 +335,17 @@
     background-color: var(--button-danger-bgColor-rest);
     box-shadow: var(--button-default-shadow-resting);
 
+    &[aria-expanded='true'] {
+      color: var(--button-danger-fgColor-active);
+      background-color: var(--button-danger-bgColor-active);
+      border-color: var(--button-danger-borderColor-active);
+      box-shadow: var(--button-danger-shadow-selected);
+
+      & .Visual {
+        color: var(--button-danger-iconColor-hover);
+      }
+    }
+
     &:hover {
       color: var(--button-danger-fgColor-hover);
       background-color: var(--button-danger-bgColor-hover);
@@ -361,6 +372,10 @@
         color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */
         background-color: var(--buttonCounter-danger-bgColor-hover) !important;
       }
+
+      & .Visual {
+        color: var(--button-danger-iconColor-hover);
+      }
     }
 
     &:disabled {
@@ -375,13 +390,6 @@
       }
     }
 
-    &[aria-expanded='true'] {
-      color: var(--button-danger-fgColor-active);
-      background-color: var(--button-danger-bgColor-active);
-      border-color: var(--button-danger-borderColor-active);
-      box-shadow: var(--button-danger-shadow-selected);
-    }
-
     & .CounterLabel {
       color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */
       background-color: var(--buttonCounter-danger-bgColor-rest) !important;
@@ -399,6 +407,10 @@
     border-color: transparent;
     box-shadow: none;
 
+    &[aria-expanded='true'] {
+      background-color: var(--button-invisible-bgColor-active);
+    }
+
     &:hover {
       background-color: var(--button-invisible-bgColor-hover);
 
@@ -422,10 +434,6 @@
       box-shadow: none;
     }
 
-    &[aria-expanded='true'] {
-      background-color: var(--button-invisible-bgColor-active);
-    }
-
     & .Visual {
       color: var(--button-invisible-iconColor-rest);
     }