diff --git a/.changeset/weak-ravens-greet.md b/.changeset/weak-ravens-greet.md
new file mode 100644
index 00000000000..3c6b0f55309
--- /dev/null
+++ b/.changeset/weak-ravens-greet.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: `Button` aria-expanded state (CSS Modules)
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-colorblind-linux.png
new file mode 100644
index 00000000000..f088cdb4624
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-dimmed-linux.png
new file mode 100644
index 00000000000..0ac8ae50e19
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..6151e691021
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-linux.png
new file mode 100644
index 00000000000..7db19bd72af
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..f1377685ade
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-colorblind-linux.png
new file mode 100644
index 00000000000..82c70f537fd
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-high-contrast-linux.png
new file mode 100644
index 00000000000..03f40ef2e65
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-linux.png
new file mode 100644
index 00000000000..9aa79c4bf35
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-tritanopia-linux.png
new file mode 100644
index 00000000000..05e994063ce
Binary files /dev/null and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Aria-expanded-buttons-light-tritanopia-linux.png differ
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
index e1abeaa953f..0ed1c20df09 100644
--- a/e2e/components/Button.test.ts
+++ b/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',
+ // },
+ // },
+ // })
+ // })
+ })
+ }
+ })
})
}
})
diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
index c0d9df86fa8..61bceaafd6f 100644
--- a/packages/react/src/Button/Button.features.stories.tsx
+++ b/packages/react/src/Button/Button.features.stories.tsx
@@ -210,3 +210,20 @@ export const InactiveButtonWithTooltip = () => (
)
+
+export const ExpandedButton = () => (
+
+
+
+
+
+
+)
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
index 867a5c2b4f7..8f8efabbda4 100644
--- a/packages/react/src/Button/ButtonBase.module.css
+++ b/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);
}