chore: replace playwright wrapper with react 18 counterpart

BREAKING CHANGE: `axe-core` is no longer a public dependency. Its
previous exposure as one was unintentional, and has now been corrected.

.github/workflows/playwright-audit.yml

@@ -21,7 +21,7 @@ jobs:
     timeout-minutes: 20
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.47.0-jammy
+      image: mcr.microsoft.com/playwright:v1.47.2
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/playwright.yml

@@ -12,7 +12,7 @@ jobs:
     timeout-minutes: 30
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.47.0-jammy
+      image: mcr.microsoft.com/playwright:v1.47.2
     strategy:
       fail-fast: false
       matrix:

contributing/testing-guide.md

@@ -89,7 +89,7 @@ A typical `*.pw.tsx` file may look like the following:
 
 ```tsx
 // inside src/components/button/button.pw.tsx
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import Button from "./button.component";
 import { buttonComponent } from "../../../playwright/component/button/index";
 

package.json

@@ -56,7 +56,7 @@
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
-    "@axe-core/playwright": "~4.10.0",
+    "@axe-core/playwright": "~4.10.1",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.3",
     "@babel/eslint-parser": "^7.23.3",
@@ -70,8 +70,8 @@
     "@chromatic-com/storybook": "^2.0.2",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@playwright/experimental-ct-react17": "~1.47.0",
-    "@playwright/test": "~1.47.0",
+    "@playwright/experimental-ct-react": "~1.47.2",
+    "@playwright/test": "~1.47.2",
     "@sage/design-tokens": "~4.29.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -111,7 +111,6 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "axe-core": "^4.8.2",
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "browserslist": "^4.22.1",
@@ -199,7 +198,7 @@
     "styled-system": "^5.1.5"
   },
   "overrides": {
-    "playwright-core": "$@playwright/experimental-ct-react17",
+    "playwright-core": "$@playwright/experimental-ct-react",
     "@testing-library/dom": "$@testing-library/dom",
     "jsdom": "$jsdom"
   },

playwright-ct.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from "@playwright/experimental-ct-react17";
+import { defineConfig, devices } from "@playwright/experimental-ct-react";
 import { resolve } from "path";
 
 const playwrightDir = resolve(__dirname, "./playwright");

playwright/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { beforeMount } from "@playwright/experimental-ct-react17/hooks";
+import { beforeMount } from "@playwright/experimental-ct-react/hooks";
 import GlobalStyle from "../src/style/global-style";
 import CarbonProvider from "../src/components/carbon-provider/carbon-provider.component";
 import I18nProvider from "../src/components/i18n-provider/i18n-provider.component";

playwright/support/helper.ts

@@ -1,6 +1,6 @@
 import type { Locator, Page } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
-import { expect } from "@playwright/experimental-ct-react17";
+import { expect } from "@playwright/experimental-ct-react";
 import { label, legendSpan } from "../components/index";
 
 const OPEN_MODAL = '[data-state="open"]';

src/components/accordion/accordion.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import {
   accordion,
   accordionIcon,

src/components/action-popover/action-popover.pw.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-await-in-loop */
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import React from "react";
 import { HooksConfig } from "../../../playwright";
 import { accordionDefaultTitle } from "../../../playwright/components/accordion";

src/components/advanced-color-picker/advanced-color-picker.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import { AdvancedColorPickerCustom } from "./components.test-pw";
 import {
   currentColorDescription,

src/components/alert/alert.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import {
   alertCrossIcon,
   alertTitle,

src/components/anchor-navigation/anchor-navigation.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 
 import {
   AnchorNavigationComponent,

src/components/badge/badge.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import {
   badge,
   badgeCounter,

src/components/batch-selection/batch-selection.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import { BatchSelectionProps } from "../../../src/components/batch-selection";
 import {
   BatchSelectionComponent,

src/components/box/box.pw.tsx

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import React from "react";
 import { getDataElementByValue } from "../../../playwright/components";
 import {

src/components/breadcrumbs/breadcrumbs.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import {
   breadcrumbsComponent,
   allCrumbs,

src/components/button-bar/button-bar.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import {
   Default as ButtonBarCustom,
   DefaultWithWrapper as ButtonBarWithWrapper,

src/components/button-minor/button-minor.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import { ButtonMinorProps } from "./button-minor.component";
 import {
   Default as ButtonMinor,

src/components/button-toggle/button-toggle.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import { ButtonToggle, ButtonToggleGroupProps, ButtonToggleProps } from ".";
 import {
   ButtonToggleComponent,

src/components/button/button.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import type { HooksConfig } from "../../../playwright/index";
 
 import {

src/components/carbon-provider/carbon-provider.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import { HooksConfig } from "../../../playwright";
 import { SageTheme as SageThemeStory, AllThemes } from "./components.test-pw";
 import Button from "../../../src/components/button";

src/components/card/card.pw.tsx

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import React from "react";
 import "../../../playwright/components";
 import {

src/components/checkbox/checkbox.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import { CommonCheckableInputProps } from "__internal__/checkable-input/checkable-input.component";
 import Box from "../box";
 import { Checkbox, CheckboxProps, CheckboxGroupProps } from ".";

src/components/confirm/confirm.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import Confirm, { ConfirmProps } from "./confirm.component";
 import {
   ConfirmComponent,

src/components/content/content.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import ContentComponent from "./components.test-pw";
 import { CHARACTERS } from "../../../playwright/support/constants";
 import {

src/components/date-range/date-range.pw.tsx

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import React from "react";
 import {
   getDataElementByValue,

src/components/date/date.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import {

src/components/decimal/decimal.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import { Locator } from "@playwright/test";
 
 import {

src/components/definition-list/definition-list.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import {
   DLComponent,
   DLReactFragment,

src/components/detail/detail.pw.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import Detail from "./detail.component";
 import {
   childrenPreview,

src/components/dialog-full-screen/dialog-full-screen.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import type { Page } from "@playwright/test";
 import {
   DialogFullScreenComponent,

src/components/dialog/dialog.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 
 import {
   DialogComponent,

src/components/dismissible-box/dismissible-box.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 
 import { DismissibleBoxProps } from "components/dismissible-box";
 import {

src/components/draggable/draggable.pw.tsx

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/experimental-ct-react17";
+import { expect, test } from "@playwright/experimental-ct-react";
 import React from "react";
 import { checkAccessibility } from "../../../playwright/support/helper";
 

src/components/drawer/drawer.pw.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { test, expect } from "@playwright/experimental-ct-react17";
+import { test, expect } from "@playwright/experimental-ct-react";
 import type { HooksConfig } from "../../../playwright/index";
 import {
   DrawerCustom,