Merge branch 'main' into react-classname-optional-data-skelton

.github/workflows/deploy-packages.yml

@@ -112,13 +112,12 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Update dependencies
         run: |
-          yarn upgrade \
-            @carbon/elements@next \
-            @carbon/grid@next \
-            @carbon/themes@next \
-            @carbon/pictograms-react@next \
-            @carbon/icons-react@next \
-            @carbon/react@next
+          yarn workspace gatsby-theme-carbon up  \
+            @carbon/elements \
+            @carbon/grid \
+            @carbon/themes \
+            @carbon/pictograms-react \
+            @carbon/react
       - name: Generate token
         uses: tibdex/github-app-token@v1
         id: generate_token

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "3.8.0-rc.0",
+  "version": "3.8.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

e2e/components/Button/Button-test.avt.e2e.js

@@ -0,0 +1,157 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('Button @avt', () => {
+  test('accessibility-checker', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button');
+  });
+
+  test('accessibility-checker button danger', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--danger',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-danger');
+  });
+
+  test('accessibility-checker button ghost', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--ghost',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-ghost');
+  });
+
+  test('accessibility-checker button icon-button', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--icon-button',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-icon-button');
+  });
+
+  test('accessibility-checker button secondary', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--secondary',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-secondary');
+  });
+
+  test('accessibility-checker button set-of-buttons', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--set-of-buttons',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-set-of-buttons');
+  });
+
+  test('accessibility-checker button skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-skeleton');
+  });
+
+  test('accessibility-checker button tertiary', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--tertiary',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Button-tertiary');
+  });
+
+  test('accessibility-checker disabled button', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--default',
+      globals: {
+        theme: 'white',
+      },
+      args: {
+        disabled: true,
+      },
+    });
+
+    await expect(page.getByRole('button')).toBeDisabled();
+    await expect(page).toHaveNoACViolations('Button-disabled');
+  });
+
+  test('accessibility-checker keyboard interaction', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByRole('button')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button')).toBeFocused();
+  });
+
+  test('accessibility-checker mouse interaction', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByRole('button')).toBeVisible();
+    await page.getByRole('button').click();
+    await expect(page.getByRole('button')).toBeFocused();
+  });
+
+  test('accessibility-checker hover state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'components-button--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.getByRole('button')).toBeVisible();
+    page.getByRole('button').hover();
+
+    await expect(page).toHaveNoACViolations('Button-hover');
+  });
+});

e2e/components/Button/Button-test.e2e.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('Button', () => {
   themes.forEach((theme) => {
@@ -71,15 +71,4 @@ test.describe('Button', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Button',
-      id: 'components-button--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('Button');
-  });
 });