Merge branch 'main' into tylerjdev/prevent-double-keydown-event

primer · Jul 25, 2024 · fde3af7 · fde3af7
2 parents 59cb424 + d79f6d5
commit fde3af7
Show file tree

Hide file tree

Showing 135 changed files with 1,615 additions and 380 deletions.
diff --git a/.changeset/curvy-shrimps-agree.md b/.changeset/curvy-shrimps-agree.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Prevents inactive indicator icon/tooltip from appearing in ActionMenu items
diff --git a/.changeset/lazy-jobs-pump.md b/.changeset/lazy-jobs-pump.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `loading` state to `Button` and `IconButton`
diff --git a/.changeset/modern-carrots-check.md b/.changeset/modern-carrots-check.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TextInput: Refactor TextInputInnerAction to use the default icon button tooltip (No changes in the behaviour or DOM is expected)
diff --git a/.changeset/real-bees-vanish.md b/.changeset/real-bees-vanish.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+experimental/SelectPanel v2: Fix heading color for dark themes
diff --git a/.changeset/sixty-trains-flow.md b/.changeset/sixty-trains-flow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+AnchoredOverlay: Add 'className' prop to the component
diff --git a/.changeset/thick-ants-try.md b/.changeset/thick-ants-try.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add experimental ScrollableRegion component and useOverflow hook
diff --git a/.changeset/wild-actors-jam.md b/.changeset/wild-actors-jam.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+StateLabel: Differentiate issue and pull request labels for screen readers
diff --git a/.changeset/wild-maps-bathe.md b/.changeset/wild-maps-bathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update Blankslate styles to better support server-side rendering
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-colorblind-linux.png
diff --git a/...ts/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-linux.png b/...ts/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-dimmed-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-high-contrast-linux.png
diff --git a/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-linux.png b/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-dark-tritanopia-linux.png
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-colorblind-linux.png
diff --git a/...nMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-linux.png b/...nMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-high-contrast-linux.png
diff --git a/...mponents/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-linux.png b/...mponents/ActionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-linux.png
diff --git a/...tionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-linux.png b/...tionMenu.test.ts-snapshots/ActionMenu-Inactive-Items-light-tritanopia-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-colorblind-linux.png b/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-colorblind-linux.png
diff --git a/...tton.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-dimmed-linux.png b/...tton.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/Button-Loading-Custom-Announcement-dark-high-contrast-linux.png b/...st.ts-snapshots/Button-Loading-Custom-Announcement-dark-high-contrast-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-linux.png b/...ents/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-tritanopia-linux.png b/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-colorblind-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-light-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-light-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png b/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png
diff --git a/...tton.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png b/...tton.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png b/...st.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png b/...ents/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png b/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-colorblind-linux.png
diff --git a/...ton.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-dimmed-linux.png b/...ton.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/Button-Loading-With-Trailing-Action-dark-high-contrast-linux.png b/...t.ts-snapshots/Button-Loading-With-Trailing-Action-dark-high-contrast-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/Button-Loading-With-Trailing-Action-light-colorblind-linux.png b/...est.ts-snapshots/Button-Loading-With-Trailing-Action-light-colorblind-linux.png
diff --git a/....ts-snapshots/Button-Loading-With-Trailing-Action-light-high-contrast-linux.png b/....ts-snapshots/Button-Loading-With-Trailing-Action-light-high-contrast-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-linux.png b/...ts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-linux.png
diff --git a/...est.ts-snapshots/Button-Loading-With-Trailing-Action-light-tritanopia-linux.png b/...est.ts-snapshots/Button-Loading-With-Trailing-Action-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png
diff --git a/...ton.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png b/...ton.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png b/...t.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png b/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png b/...ts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png
diff --git a/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png b/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png
diff --git a/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png b/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png
diff --git a/...pshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png b/...pshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png
diff --git a/...components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png b/...components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png b/...ght/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png
diff --git a/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png b/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png
diff --git a/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png b/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png
diff --git a/...omponents/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png b/...omponents/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png b/...ht/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png
diff --git a/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png b/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png
diff --git a/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png b/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png
diff --git a/...ts/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png b/...ts/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png
diff --git a/...onents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png b/...onents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png
diff --git a/...snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png b/...snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png
diff --git a/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png b/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png
diff --git a/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png b/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png
diff --git a/...nents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png b/...nents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png
diff --git a/...napshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png b/...napshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png
diff --git a/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png b/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png
diff --git a/...ectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-colorblind-linux.png b/...ectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-colorblind-linux.png
diff --git a/.../SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-dimmed-linux.png b/.../SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-dimmed-linux.png
diff --git a/...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png b/...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png
diff --git a/.../drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-linux.png b/.../drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-linux.png
diff --git a/...ectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-tritanopia-linux.png b/...ectPanel.test.ts-snapshots/drafts-SelectPanel-Default-dark-tritanopia-linux.png
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
@@ -479,6 +479,184 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Loading', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Button.Loading.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Loading Custom Announcement', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-custom-announcement',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `Button.Loading Custom Announcement.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-custom-announcement',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Loading With Leading Visual', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-with-leading-visual',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `Button.Loading With Leading Visual.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-with-leading-visual',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Loading With Trailing Visual', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-with-trailing-visual',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `Button.Loading With Trailing Visual.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-with-trailing-visual',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
+  test.describe('Loading With Trailing Action', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-with-trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `Button.Loading With Trailing Action.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--loading-with-trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Dev: Invisible Variants', () => {
     for (const theme of themes) {
       test.describe(theme, () => {