Merge branch 'main' into 6379--update-framer-motion

.github/workflows/ci.yml

@@ -182,28 +182,6 @@ jobs:
           name: playwright-avt-report
           path: .playwright
 
-  vrt-runner:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '20.x'
-          cache: yarn
-      - name: Install
-        run: yarn
-      - name: Install browsers
-        run: yarn playwright install --with-deps
-      - name: Build project
-        run: yarn build
-      - name: Run VRT
-        working-directory: packages/core
-        env:
-          PERCY_TOKEN: web_d04495b0b413d61c2ea6b9118d1748b43f4fdd58d17ebe453ef8e0016b5766e4
-        run: yarn percy storybook storybook-static
-
   avt:
     if: ${{ always() }}
     runs-on: ubuntu-latest

.github/workflows/process-pr-review-data.yml

@@ -17,11 +17,6 @@ jobs:
       github.event.workflow_run.conclusion == 'success'
     steps:
       - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '20.x'
-          cache: yarn
       - uses: ./actions/add-review-labels
         with:
           APP_ID: ${{ secrets.APP_ID }}

config/jest-config-ibm-cloud-cognitive/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.15.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@[email protected]) (2024-12-09)
+
+
+### Bug Fixes
+
+* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56))
+
+
+
+
+
 # [1.14.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@[email protected]) (2024-12-04)
 
 **Note:** Version bump only for package jest-config-ibm-cloud-cognitive

config/jest-config-ibm-cloud-cognitive/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jest-config-ibm-cloud-cognitive",
   "private": true,
-  "version": "1.14.0",
+  "version": "1.15.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/storybook-addon-carbon-theme/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-09)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
 # [2.4.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-04)
 
 **Note:** Version bump only for package @carbon/storybook-addon-theme

config/storybook-addon-carbon-theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "description": "Carbon theme switcher for Storybook",
-  "version": "2.4.0",
+  "version": "2.5.0-rc.0",
   "license": "Apache-2.0",
   "main": "dist/react.js",
   "repository": {

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

@@ -9,6 +9,7 @@
 
 import { expect, test } from '@playwright/test';
 import { visitStory } from '../../test-utils/storybook';
+import { carbon, pkg } from '../../../packages/ibm-products/src/settings';
 
 test.describe('ProductiveCard @avt', () => {
   test('@avt-default-state', async ({ page }) => {
@@ -23,4 +24,253 @@ test.describe('ProductiveCard @avt', () => {
       'ProductiveCard @avt-default-state'
     );
   });
+
+  test('@avt-with-caption', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--with-caption',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProductiveCard @avt-with-caption');
+  });
+
+  // Disabled state test
+  test('@avt-disabled: validates disabled button state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--with-action-ghost-button',
+    });
+
+    await expect(page).toHaveNoACViolations('ProductiveCard @avt-disabled');
+    const editButton = page.getByRole('button', { name: 'Edit' });
+    const deleteButton = page.getByRole('button', { name: 'Delete' });
+    const disabledButton = page.getByRole('button', { name: 'Read more' });
+    expect(disabledButton.getAttribute('disabled')).not.toBeNull();
+
+    await page.keyboard.press('Tab');
+    expect(editButton).toBeFocused();
+
+    await page.keyboard.press('Tab');
+    expect(deleteButton).toBeFocused();
+    // disabled button
+    await page.keyboard.press('Tab');
+    expect(
+      await disabledButton.evaluate((btn) => document.activeElement !== btn)
+    ).toBe(true);
+  });
+
+  // Overflow menu open/close states test
+  test('@avt-overflow-menu: validates overflow menu interactions', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--with-overflow',
+    });
+
+    const menuButton = page.getByRole('button', { label: 'Option' });
+    const menu = page.getByRole('menu');
+
+    // Check initial state
+    expect(await menuButton.getAttribute('aria-expanded')).toBe('false');
+
+    // Open the menu
+    await menuButton.click();
+
+    // Wait for menu to be visible
+    await expect(menu).toBeVisible();
+
+    expect(await menuButton.getAttribute('aria-expanded')).toBe('true');
+    await expect(page).toHaveNoACViolations('ProductiveCard @menu-open');
+
+    // Close the menu with Escape
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+
+    expect(await menuButton.getAttribute('aria-expanded')).toBe('false');
+    await expect(page).toHaveNoACViolations('ProductiveCard @menu-closed');
+
+    // Reopen the menu via keyboard
+    await page.keyboard.press('Tab');
+    expect(
+      await menuButton.evaluate((btn) => document.activeElement === btn)
+    ).toBe(true);
+
+    await page.keyboard.press('Enter');
+    await expect(menu).toBeVisible();
+
+    // Check menu item count and focus
+    const menuItems = page.locator(`li.${carbon.prefix}--menu-item`);
+    expect(await menuItems.count()).toBeGreaterThan(0);
+    expect(
+      await menuItems.first().evaluate((btn) => document.activeElement === btn)
+    ).toBe(true);
+    expect(await menuButton.getAttribute('aria-expanded')).toBe('true');
+
+    // Ensure the menu is closed when pressing Escape
+    await page.keyboard.press('Escape');
+    // Focus returns to menu button
+    expect(
+      await menuButton.evaluate((btn) => document.activeElement === btn)
+    ).toBe(true);
+
+    // Check final state
+    await expect(menu).not.toBeVisible();
+  });
+
+  test('@avt-keyboard: validates keyboard navigation for all interactive elements', async ({
+    page,
+  }) => {
+    // Navigate to the "Supplemental Bottom Bar" story for ProductiveCard, that has all interactive elements
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--supplemental-bottom-bar',
+    });
+
+    // Ensure no accessibility violations for the story
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - Supplemental Bottom Bar'
+    );
+
+    // Move focus to the Edit button and validate
+    await page.keyboard.press('Tab');
+    const editButton = page.getByLabel('Edit');
+    await expect(editButton).toBeVisible();
+    await expect(editButton).toBeFocused();
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - Edit Button'
+    );
+
+    // Move focus to the Delete button and validate
+    await page.keyboard.press('Tab');
+    const deleteButton = page.getByLabel('Delete');
+    await expect(deleteButton).toBeVisible();
+    await expect(deleteButton).toBeFocused();
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - Delete Button'
+    );
+
+    // Move focus to the Read more button and validate
+    await page.keyboard.press('Tab');
+    const readMoreButton1 = page.getByText('Read more');
+    await expect(readMoreButton1).toBeVisible();
+    await expect(readMoreButton1).toBeFocused();
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - Read more Button'
+    );
+
+    // Tab Navigation in "Clickable Card" story for ProductiveCard, (zone one is default, whole card recieves focus)
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--clickable',
+    });
+
+    // Ensure no accessibility violations for the story
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - Clickable Card'
+    );
+
+    // Move focus to the card element and validate
+    await page.keyboard.press('Tab');
+    const zone1 = page.locator(`.${pkg.prefix}--card__clickable`);
+    await expect(zone1).toBeFocused();
+    await expect(zone1).toHaveAttribute('role', 'button');
+
+    // Move focus to the Read more button and validate
+    await page.keyboard.press('Tab');
+    const readMoreButton2 = page.getByText('Read more');
+    await expect(readMoreButton2).toBeVisible();
+    await expect(readMoreButton2).toBeFocused();
+
+    // Validate zone two focus
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--clickable&args=clickZone:two',
+    });
+    await page.keyboard.press('Tab');
+
+    const zone2 = page.locator(`.${pkg.prefix}--card__header-body-container`);
+    await expect(zone2).toBeFocused();
+    await expect(zone2).toHaveAttribute('role', 'button');
+
+    // Move focus to the Read more button and validate
+    await page.keyboard.press('Tab');
+    const readMoreButton3 = page.getByText('Read more');
+    await expect(readMoreButton3).toBeVisible();
+    await expect(readMoreButton3).toBeFocused();
+
+    // Validate zone three focus
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--clickable&args=clickZone:three',
+    });
+    await page.keyboard.press('Tab');
+    const zone3 = page.locator(`.${pkg.prefix}--card__body`);
+    await expect(zone3).toBeFocused();
+    await expect(zone3).toHaveAttribute('role', 'button');
+
+    // Move focus to the Read more button and validate
+    await page.keyboard.press('Tab');
+    const readMoreButton4 = page.getByText('Read more');
+    await expect(readMoreButton4).toBeVisible();
+    await expect(readMoreButton4).toBeFocused();
+
+    // Navigate to the "button with href" story for ProductiveCard
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--with-button-href',
+    });
+
+    // Ensure no accessibility violations for the story
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - button with href'
+    );
+
+    // Move focus to the href button and validate
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    const hrefButton = page.getByText('Read more');
+    await expect(hrefButton).toHaveAttribute('href', '#');
+    await expect(hrefButton).toBeVisible();
+    await expect(hrefButton).toBeFocused();
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @keyboard-navigation - href Button'
+    );
+  });
+
+  // hover states
+  test('@avt-hover: validates hover states', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--with-overflow',
+    });
+    const menuButton = page.getByRole('button', { label: 'Overflow menu' });
+    const tooltip = page.getByRole('tooltip', { name: 'Overflow menu' });
+
+    await menuButton.hover();
+    await expect(page).toHaveNoACViolations(
+      'ProductiveCard @hover - with overflow'
+    );
+    await expect(tooltip).toBeVisible();
+
+    await visitStory(page, {
+      component: 'ProductiveCard',
+      id: 'ibm-products-components-cards-productivecard--default',
+    });
+    const editButton = page.getByLabel('Edit');
+    const editTooltip = page.getByRole('tooltip', { name: 'Edit' });
+    const deleteButton = page.getByLabel('Delete');
+    const deleteTooltip = page.getByRole('tooltip', { name: 'Delete' });
+
+    await editButton.hover();
+    await expect(page).toHaveNoACViolations('ProductiveCard @hover - default');
+    await expect(editTooltip).toBeVisible();
+
+    await deleteButton.hover();
+    await expect(page).toHaveNoACViolations('ProductiveCard @hover - default');
+    await expect(deleteTooltip).toBeVisible();
+  });
 });

packages/core/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.32.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-09)
+
+
+### Bug Fixes
+
+* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee))
+
+
+### Features
+
+* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc))
+
+
+
+
+
 # [2.31.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-04)
 
 **Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-cloud-cognitive-core",
   "private": true,
-  "version": "2.31.0",
+  "version": "2.32.0-rc.0",
   "license": "Apache-2.0",
   "main": "scripts/build.js",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@carbon/grid": "^11.29.0",
-    "@carbon/ibm-products-styles": "^2.51.0",
+    "@carbon/ibm-products-styles": "^2.52.0-rc.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
     "@carbon/react": "^1.71.1",