From fdcfc6bd818fc19207bc5748b33ff9b55e00d73f Mon Sep 17 00:00:00 2001 From: "tom.davies" Date: Tue, 12 Nov 2024 14:47:02 +0000 Subject: [PATCH] feat: remove focusRedesignOptOut feature flag This update removes the `focusRedesignOptOut` feature flag, consumers can no longer opt out of the dual outline focus styling BREAKING CHANGE: The `focusRedesignOptOut` feature flag has been removed completely. If passed to the `CarbonProvider` it will need to be removed, if consumers are also relying on previous focus styling this will also no longer be available. --- .storybook/preview.ts | 13 - .storybook/withThemeProvider.js | 18 +- playwright/index.tsx | 3 - .../input-icon-toggle.style.ts | 15 +- .../input/input-presentation.style.ts | 10 +- .../validations/validation-icon.style.ts | 9 +- src/components/accordion/accordion.pw.tsx | 114 +---- src/components/accordion/accordion.style.ts | 9 +- .../action-popover/action-popover.pw.tsx | 59 +-- .../action-popover/action-popover.style.ts | 24 +- .../advanced-color-picker-cell.style.ts | 12 +- .../advanced-color-picker.pw.tsx | 54 +- .../anchor-navigation-item.style.ts | 11 +- .../anchor-navigation.pw.tsx | 46 +- .../batch-selection/batch-selection.pw.tsx | 68 +-- .../batch-selection/batch-selection.style.ts | 18 +- .../button-minor/button-minor.pw.tsx | 21 +- .../button-toggle/button-toggle.pw.tsx | 24 +- .../button-toggle/button-toggle.style.ts | 11 +- src/components/button/button.pw.tsx | 45 +- src/components/button/button.style.ts | 8 +- .../__internal__/new-validation.context.ts | 4 - .../carbon-provider.component.tsx | 53 +- .../carbon-provider/carbon-provider.test.tsx | 28 -- src/components/card/card.style.ts | 13 +- src/components/checkbox/checkbox.pw.tsx | 54 +- src/components/checkbox/checkbox.style.ts | 15 +- .../date-picker/day-picker.style.ts | 20 +- .../date/__internal__/navbar/button.style.ts | 17 +- src/components/date/date.pw.tsx | 51 +- src/components/drawer/drawer.pw.tsx | 68 +-- src/components/drawer/drawer.style.ts | 17 +- .../picklist-item/picklist-item.test.tsx | 20 +- .../flat-table-row/flat-table-row.style.ts | 64 +-- .../flat-table-row/flat-table-row.test.tsx | 30 +- src/components/flat-table/flat-table.pw.tsx | 465 +----------------- src/components/flat-table/flat-table.style.ts | 19 +- src/components/flat-table/flat-table.test.tsx | 33 +- src/components/flat-table/sort/sort.style.ts | 11 +- src/components/heading/heading.style.ts | 5 +- src/components/heading/heading.test.tsx | 19 - src/components/help/help.pw.tsx | 51 +- src/components/help/help.style.ts | 11 +- src/components/icon-button/icon-button.pw.tsx | 21 +- .../icon-button/icon-button.style.ts | 13 +- src/components/icon/icon.style.ts | 4 +- .../link-preview/link-preview.pw.tsx | 61 +-- .../link-preview/link-preview.style.ts | 12 +- src/components/link/link.pw.tsx | 59 +-- src/components/link/link.style.ts | 1 - src/components/loader/loader.pw.tsx | 21 +- .../menu-full-screen.style.ts | 11 +- .../menu/menu-item/menu-item.style.ts | 12 +- src/components/menu/menu.pw.tsx | 97 +--- .../multi-action-button.pw.tsx | 19 +- .../multi-action-button.style.ts | 12 +- src/components/pager/pager.pw.tsx | 23 +- src/components/pill/pill.pw.tsx | 27 +- src/components/pill/pill.style.ts | 7 - src/components/search/search.pw.tsx | 85 +--- .../filterable-select.pw.tsx | 50 +- .../select/multi-select/multi-select.pw.tsx | 51 +- .../select/simple-select/simple-select.pw.tsx | 52 +- .../simple-color-picker.pw.tsx | 50 +- .../simple-color/simple-color.style.ts | 21 +- .../split-button/split-button-toggle.style.ts | 12 +- .../split-button/split-button.pw.tsx | 26 +- .../split-button/split-button.style.ts | 19 +- src/components/switch/switch.pw.tsx | 24 +- src/components/switch/switch.style.ts | 16 +- .../__internal__/tab-title/tab-title.style.ts | 15 +- src/components/tabs/tabs.pw.tsx | 44 +- .../toolbar-button/toolbar-button.style.ts | 15 +- src/components/text-editor/text-editor.pw.tsx | 60 +-- .../text-editor/text-editor.style.ts | 9 +- .../text-editor/text-editor.test.tsx | 51 -- src/components/textarea/textarea.pw.tsx | 24 +- src/components/textbox/textbox.pw.tsx | 20 +- src/components/tile-select/tile-select.pw.tsx | 26 +- .../tile-select/tile-select.style.ts | 10 +- src/components/toast/toast.pw.tsx | 22 +- .../vertical-menu/vertical-menu.pw.tsx | 20 +- .../vertical-menu/vertical-menu.style.ts | 10 +- 83 files changed, 394 insertions(+), 2398 deletions(-) delete mode 100644 src/components/carbon-provider/carbon-provider.test.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.ts index c78d52d4c2..69bc447bfb 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -58,19 +58,6 @@ const globalTypes = { ], }, }, - focusRedesign: { - name: "Double focus style", - description: "Toggle the focus styling redesign", - defaultValue: "on", - toolbar: { - icon: "eye", - title: "Focus redesign", - items: [ - { value: "on", title: "On" }, - { value: "off", title: "Off" }, - ], - }, - }, ...globalThemeProvider, }; diff --git a/.storybook/withThemeProvider.js b/.storybook/withThemeProvider.js index 26584f8e6b..eeb0a13328 100644 --- a/.storybook/withThemeProvider.js +++ b/.storybook/withThemeProvider.js @@ -11,15 +11,8 @@ const themes = [noTheme, sageTheme].reduce((themesObject, theme) => { return themesObject; }, {}); -const render = ( - Story, - themeName, - focusRedesignOptOut, -) => ( - +const render = (Story, themeName) => ( + ); @@ -58,11 +51,7 @@ const withThemeProvider = makeDecorator({ {Object.keys(themes).map((themeName) => (

{themeName}

- {render( - Story, - themeName, - context.globals.focusRedesign === "off", - )} + {render(Story, themeName)}
))} @@ -74,7 +63,6 @@ const withThemeProvider = makeDecorator({ isChromaticBuild && chromaticTheme ? chromaticTheme : context.globals.theme, - context.globals.focusRedesign === "off", ); }, }); diff --git a/playwright/index.tsx b/playwright/index.tsx index 1b150762e8..856c32ed24 100644 --- a/playwright/index.tsx +++ b/playwright/index.tsx @@ -9,7 +9,6 @@ import "../src/style/fonts.css"; import * as dateLocales from "./support/date-fns-locales"; export type HooksConfig = { - focusRedesignOptOut?: boolean; validationRedesignOptIn?: boolean; theme?: string; localeName?: keyof typeof dateLocales; @@ -42,7 +41,6 @@ const mountedTheme = (theme: string) => { // Setup required providers on mounted component before running test. See https://playwright.dev/docs/test-components#hooks beforeMount(async ({ App, hooksConfig }) => { const { - focusRedesignOptOut, theme = "sage", localeName, validationRedesignOptIn, @@ -50,7 +48,6 @@ beforeMount(async ({ App, hooksConfig }) => { return ( diff --git a/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts b/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts index bbd2c203ff..46bede430d 100644 --- a/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts +++ b/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts @@ -3,10 +3,6 @@ import sizes from "../input/input-sizes.style"; import { ValidationProps } from "../validations"; import addFocusStyling from "../../style/utils/add-focus-styling"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - export interface InputIconToggleStyleProps extends ValidationProps { size?: "small" | "medium" | "large"; disabled?: boolean; @@ -51,16 +47,9 @@ const InputIconToggleStyle = styled.span.attrs( cursor: default; `} - ${({ theme }) => - ` &:focus { - ${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - } - } - `} + ${addFocusStyling()} + } `; export default InputIconToggleStyle; diff --git a/src/__internal__/input/input-presentation.style.ts b/src/__internal__/input/input-presentation.style.ts index 4c87040897..49712e8989 100644 --- a/src/__internal__/input/input-presentation.style.ts +++ b/src/__internal__/input/input-presentation.style.ts @@ -6,10 +6,6 @@ import { InputContextProps } from "../input-behaviour"; import { CarbonProviderProps } from "../../components/carbon-provider"; import addFocusStyling from "../../style/utils/add-focus-styling"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - export const StyledInputPresentationContainer = styled.div< Pick >` @@ -118,13 +114,11 @@ const InputPresentationStyle = styled.div< cursor: not-allowed; `} - ${({ hasFocus, theme }) => + ${({ hasFocus }) => hasFocus && css` & { - ${!theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling()} z-index: 2; } `} diff --git a/src/__internal__/validations/validation-icon.style.ts b/src/__internal__/validations/validation-icon.style.ts index 2df203ca98..ccbe74b3b3 100644 --- a/src/__internal__/validations/validation-icon.style.ts +++ b/src/__internal__/validations/validation-icon.style.ts @@ -11,10 +11,6 @@ const validationIconTypes = { warning: "var(--colorsSemanticCaution500)", }; -const oldFocusStyling = ` - outline: solid 2px var(--colorsSemanticFocus500); -`; - type ValidationType = "error" | "warning" | "info"; const ValidationIconStyle = styled.span< @@ -40,10 +36,7 @@ const ValidationIconStyle = styled.span< } ${StyledIcon}:focus { - ${({ theme }) => - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling()} } ${margin} diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx index 31525eb7ba..a2162a225d 100644 --- a/src/components/accordion/accordion.pw.tsx +++ b/src/components/accordion/accordion.pw.tsx @@ -10,7 +10,6 @@ import { import { positionOfElement, getRotationAngle, - checkGoldenOutline, assertCssValueIsApproximately, getStyle, expectEventWasCalledOnce, @@ -22,7 +21,6 @@ import { ACCORDION_REMOVE_CONTENT, } from "../../../playwright/components/accordion/locators"; import { SIZE, CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; import { AccordionComponent, @@ -42,42 +40,23 @@ import { const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; -test.describe("when focused", () => { - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - const elementLocator = accordionTitleContainer(page); - const element = await elementLocator; - await element.focus(); - await expect(elementLocator).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(elementLocator).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - const elementLocator = accordionTitleContainer(page); - const element = await elementLocator; - await element.focus(); - await expect(elementLocator).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); +// TODO: Skipped due to flaky focus behaviour. To review in FE-6428 +test.skip("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); + const elementLocator = accordionTitleContainer(page); + const element = await elementLocator; + await element.focus(); + await expect(elementLocator).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(elementLocator).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("should render Accordion component", () => { @@ -458,28 +437,7 @@ test.describe("should render Accordion component", () => { }); test.describe("should render Accordion Grouped component", () => { - test("should move through all grouped accordions using ArrowDown key and check focus when focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await accordionTitleContainer(page).nth(0).focus(); - await checkGoldenOutline(accordionTitleContainer(page).nth(0)); - await expect(accordionTitleContainer(page).nth(0)).toBeVisible(); - - await accordionTitleContainer(page).nth(0).press("ArrowDown"); - await checkGoldenOutline(accordionTitleContainer(page).nth(1)); - await expect(accordionTitleContainer(page).nth(1)).toBeVisible(); - - await accordionTitleContainer(page).nth(1).press("ArrowDown"); - await checkGoldenOutline(accordionTitleContainer(page).nth(2)); - await expect(accordionTitleContainer(page).nth(2)).toBeVisible(); - }); - - test("should move through all grouped accordions using ArrowDown key and check focus when focusRedesignOptOut is false", async ({ + test("should move through all grouped accordions using ArrowDown key and check focus", async ({ mount, page, }) => { @@ -507,23 +465,7 @@ test.describe("should render Accordion Grouped component", () => { await expect(accordionTitleContainer(page).nth(2)).toBeVisible(); }); - test("should move to the last grouped accordion using End key and check it is focused when focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await accordionTitleContainer(page).nth(0).focus(); - - await accordionTitleContainer(page).nth(0).press("End"); - - await checkGoldenOutline(accordionTitleContainer(page).nth(2)); - await expect(accordionTitleContainer(page).nth(2)).toBeVisible(); - }); - - test("should move to the last grouped accordion using End key and check it is focused when focusRedesignOptOut is false", async ({ + test("should move to the last grouped accordion using End key and check it is focused", async ({ mount, page, }) => { @@ -540,23 +482,7 @@ test.describe("should render Accordion Grouped component", () => { await expect(accordionTitleContainer(page).nth(2)).toBeVisible(); }); - test("should move to the first grouped accordion using Home key and check it is focused when focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await accordionTitleContainer(page).nth(2).focus(); - - await accordionTitleContainer(page).nth(2).press("Home"); - - await checkGoldenOutline(accordionTitleContainer(page).nth(0)); - await expect(accordionTitleContainer(page).nth(2)).toBeVisible(); - }); - - test("should move to the first grouped accordion using Home key and check it is focused when focusRedesignOptOut is false", async ({ + test("should move to the first grouped accordion using Home key and check it is focused", async ({ mount, page, }) => { diff --git a/src/components/accordion/accordion.style.ts b/src/components/accordion/accordion.style.ts index 5dd2c36c4c..0b9a84bc19 100644 --- a/src/components/accordion/accordion.style.ts +++ b/src/components/accordion/accordion.style.ts @@ -146,10 +146,6 @@ interface StyledAccordionTitleContainerProps { variant?: "standard" | "subtle"; } -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledAccordionTitleContainer = styled.div` ${({ buttonHeading, @@ -157,7 +153,6 @@ const StyledAccordionTitleContainer = styled.div css` @@ -177,9 +172,7 @@ const StyledAccordionTitleContainer = styled.div { }); }); -test.describe("when focused", () => { - // there is an issue with asserting token values for this test - test("has the expected styling when the focusRedesignOptOut flag is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); - await actionPopoverButtonElement.focus(); - await expect(actionPopoverButtonElement).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - await actionPopoverButtonElement.click(); - const focusedItem = await actionPopoverInnerItem(page, 1); - await expect(focusedItem).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - - test("has the expected styling when the focusRedesignOptOut flag is false", async ({ - mount, - page, - }) => { - await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); - await actionPopoverButtonElement.focus(); - await expect(actionPopoverButtonElement).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await actionPopoverButtonElement.click(); - const focusedItem = await actionPopoverInnerItem(page, 1); - await expect(focusedItem).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - }); +// there is an issue with asserting token values for this test +test("has the expected styling when focused", async ({ mount, page }) => { + await mount(); + const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + await actionPopoverButtonElement.focus(); + await expect(actionPopoverButtonElement).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await actionPopoverButtonElement.click(); + const focusedItem = await actionPopoverInnerItem(page, 1); + await expect(focusedItem).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); }); test.describe("Accessibility tests for ActionPopover", () => { diff --git a/src/components/action-popover/action-popover.style.ts b/src/components/action-popover/action-popover.style.ts index 67a11e44e0..acb49358b9 100644 --- a/src/components/action-popover/action-popover.style.ts +++ b/src/components/action-popover/action-popover.style.ts @@ -7,10 +7,6 @@ import StyledButton from "../button/button.style"; import addFocusStyling from "../../style/utils/add-focus-styling"; import baseTheme from "../../style/themes/base"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const Menu = styled.ul` ${({ isOpen }: { isOpen?: boolean }) => isOpen ? "display: block;" : "visibility: hidden;"} @@ -177,12 +173,7 @@ const StyledMenuItem = styled.button>` font-weight: 500; &:focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} z-index: 1; border-radius: var(--borderRadius000); } @@ -255,16 +246,9 @@ const ButtonIcon = styled(Icon)` `; const StyledButtonIcon = styled.div` - ${({ theme }) => - ` - &:focus { - ${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - } - } - `} + &:focus { + ${addFocusStyling()} + } border-radius: var(--borderRadius050); `; diff --git a/src/components/advanced-color-picker/advanced-color-picker-cell.style.ts b/src/components/advanced-color-picker/advanced-color-picker-cell.style.ts index 6bd45b9ce6..b9286278fd 100644 --- a/src/components/advanced-color-picker/advanced-color-picker-cell.style.ts +++ b/src/components/advanced-color-picker/advanced-color-picker-cell.style.ts @@ -8,10 +8,6 @@ const transparentSvg = "45%22%3E%3Crect%20x%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2" + "F%3E%3Crect%20y%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3C%2Fsvg%3E"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledAdvancedColorPickerCell = styled.button.attrs({ type: "button" })` display: block; width: 25px; @@ -36,13 +32,7 @@ const StyledAdvancedColorPickerCell = styled.button.attrs({ type: "button" })` } &:focus { - ${({ theme }) => ` - ${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - } - `} + ${addFocusStyling()} } &::-moz-focus-inner { diff --git a/src/components/advanced-color-picker/advanced-color-picker.pw.tsx b/src/components/advanced-color-picker/advanced-color-picker.pw.tsx index 9c7e30c867..513d4e6d26 100644 --- a/src/components/advanced-color-picker/advanced-color-picker.pw.tsx +++ b/src/components/advanced-color-picker/advanced-color-picker.pw.tsx @@ -12,46 +12,24 @@ import { alertDialogPreview as advancedColorPickerParent } from "../../../playwr import { closeIconButton } from "../../../playwright/components/index"; import { CHARACTERS } from "../../../playwright/support/constants"; import { checkAccessibility } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; -test.describe("when focused", () => { - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - const icon = closeIconButton(page); - await icon.focus(); - await expect(closeIconButton(page)).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(closeIconButton(page)).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); +// TODO: Skipped due to flaky focus behaviour. To review in FE-6428 +test.skip("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); - const icon = closeIconButton(page); - await icon.focus(); - await expect(closeIconButton(page)).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); + const icon = closeIconButton(page); + await icon.focus(); + await expect(closeIconButton(page)).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(closeIconButton(page)).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test("when AdvancedColorPicker is opened and then closed, with the `restoreFocusOnClose` prop passed as `false`, the call to action element should not be focused", async ({ diff --git a/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.ts b/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.ts index b2d2ed2935..d1d1f6d877 100644 --- a/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.ts +++ b/src/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.ts @@ -5,10 +5,6 @@ export interface StyledNavigationItemProps { isSelected?: boolean; } -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledNavigationItem = styled.li` width: 100%; @@ -25,12 +21,7 @@ const StyledNavigationItem = styled.li` border-bottom-right-radius: var(--borderRadius100); &:focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} position: relative; } diff --git a/src/components/anchor-navigation/anchor-navigation.pw.tsx b/src/components/anchor-navigation/anchor-navigation.pw.tsx index f9f87a950f..c96fd99d62 100644 --- a/src/components/anchor-navigation/anchor-navigation.pw.tsx +++ b/src/components/anchor-navigation/anchor-navigation.pw.tsx @@ -11,7 +11,6 @@ import { anchorNavigationStickyMainPage, anchorNavigationItem, } from "../../../playwright/components/anchor-navigation/index"; -import { HooksConfig } from "../../../playwright"; import { checkAccessibility } from "../../../playwright/support/helper"; import { DIALOG_FULL_SCREEN } from "../../../playwright/components/dialog/locators"; @@ -55,42 +54,21 @@ test.describe("Should render AnchorNavigation component", () => { }); }); -test.describe("When focused", () => { - test("has the expected styling when the focusRedesignOptOut flag is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); +test("has the expected styling when focused", async ({ mount, page }) => { + await mount(); - await anchorNavigationItem(page, 0).focus(); + const anchorNavItem = anchorNavigationItem(page, 0); - await expect(anchorNavigationItem(page, 0)).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); + await anchorNavItem.focus(); + await expect(anchorNavItem).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); - test("has the expected styling when the focusRedesignOptOut flag is false", async ({ - mount, - page, - }) => { - await mount(); - - const anchorNavItem = anchorNavigationItem(page, 0); - - await anchorNavItem.focus(); - await expect(anchorNavItem).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - - await expect(anchorNavItem).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); + await expect(anchorNavItem).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("Rounded corners", () => { diff --git a/src/components/batch-selection/batch-selection.pw.tsx b/src/components/batch-selection/batch-selection.pw.tsx index 7a92cc5ff2..be3151ac61 100644 --- a/src/components/batch-selection/batch-selection.pw.tsx +++ b/src/components/batch-selection/batch-selection.pw.tsx @@ -9,7 +9,6 @@ import { import { checkAccessibility, positionOfElement, - checkGoldenOutline, } from "../../../playwright/support/helper"; import { @@ -26,7 +25,6 @@ import { getComponent, icon as buttonIcon, } from "../../../playwright/components/index"; -import { HooksConfig } from "../../../playwright"; const BATCH_SELECTION_COLOR = [ "dark", @@ -177,53 +175,29 @@ test.describe("check BatchSelection component properties", () => { }); }); -test.describe("check BatchSelection buttons are focused", () => { - (["first", "second", "third"] as const).forEach((index) => { - test(`should check BatchSelection ${index} button has expected styling when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const elementLocator = batchSelectionButtonsByPosition( - page, - positionOfElement(index), - ); - - const element = elementLocator; - await element.focus(); - - await checkGoldenOutline(elementLocator); - await expect(elementLocator).toBeVisible(); - }); - }); +(["first", "second", "third"] as const).forEach((index) => { + test(`should check BatchSelection ${index} button has expected styling when BatchSelection buttons are focused`, async ({ + mount, + page, + }) => { + await mount(); - (["first", "second", "third"] as const).forEach((index) => { - test(`should check BatchSelection ${index} button has expected styling when focusRedesignOptOut is false`, async ({ - mount, + const elementLocator = batchSelectionButtonsByPosition( page, - }) => { - await mount(); - - const elementLocator = batchSelectionButtonsByPosition( - page, - positionOfElement(index), - ); - const element = elementLocator; - await element.focus(); - - await expect(elementLocator).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - - await expect(elementLocator).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); + positionOfElement(index), + ); + const element = elementLocator; + await element.focus(); + + await expect(elementLocator).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + + await expect(elementLocator).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); }); diff --git a/src/components/batch-selection/batch-selection.style.ts b/src/components/batch-selection/batch-selection.style.ts index 56335f9871..0a5d3e5347 100644 --- a/src/components/batch-selection/batch-selection.style.ts +++ b/src/components/batch-selection/batch-selection.style.ts @@ -5,10 +5,6 @@ import StyledIcon from "../icon/icon.style"; import { BatchSelectionProps } from "."; import addFocusStyling from "../../style/utils/add-focus-styling"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledBatchSelection = styled.div< Pick >` @@ -22,12 +18,7 @@ const StyledBatchSelection = styled.div< ${StyledIcon} { ${!disabled && `color: var(--colorsActionMajorYin065);`} &:focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} } } @@ -73,12 +64,7 @@ const StyledBatchSelection = styled.div< ${StyledIconButton}:focus { border-radius: var(--borderRadius100); z-index: 1; - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} } ${disabled && diff --git a/src/components/button-minor/button-minor.pw.tsx b/src/components/button-minor/button-minor.pw.tsx index 6f08760868..db53baa03a 100644 --- a/src/components/button-minor/button-minor.pw.tsx +++ b/src/components/button-minor/button-minor.pw.tsx @@ -39,7 +39,6 @@ import { assertCssValueIsApproximately, checkAccessibility, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; @@ -61,10 +60,7 @@ const destructive = "rgb(162, 44, 59)"; const transparent = "rgba(0, 0, 0, 0)"; test.describe("check Focus Outline & Border Radius for Button Minor Component", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { + test("should have the expected focus styling", async ({ mount, page }) => { await mount(); const outlined = buttonMinorComponent(page, 0).nth(0); @@ -76,21 +72,6 @@ test.describe("check Focus Outline & Border Radius for Button Minor Component", await expect(outlined).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px"); }); - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - const outlined = buttonMinorComponent(page, 0).nth(0); - await outlined.focus(); - await expect(outlined).toHaveCSS("outline", "rgb(255, 188, 25) solid 3px"); - }); - test("should have the expected border radius styling", async ({ mount, page, diff --git a/src/components/button-toggle/button-toggle.pw.tsx b/src/components/button-toggle/button-toggle.pw.tsx index f0509cdb7a..290ed75523 100644 --- a/src/components/button-toggle/button-toggle.pw.tsx +++ b/src/components/button-toggle/button-toggle.pw.tsx @@ -24,10 +24,8 @@ import { import { SIZE, CHARACTERS } from "../../../playwright/support/constants"; import { assertCssValueIsApproximately, - checkGoldenOutline, checkAccessibility, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; const characters = [ CHARACTERS.STANDARD, @@ -43,27 +41,7 @@ const helpAlignment: [string, boolean][] = [ const testPropValue = CHARACTERS.STANDARD; test.describe("Styling tests", () => { - test("should render with the expected styling when opt out flag is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const toggleButton1 = buttonToggleButton(page).nth(0); - const toggleButton2 = buttonToggleButton(page).nth(1); - const toggleButton3 = buttonToggleButton(page).nth(2); - - await toggleButton1.focus(); - await checkGoldenOutline(toggleButton1); - await toggleButton2.focus(); - await checkGoldenOutline(toggleButton2); - await toggleButton3.focus(); - await checkGoldenOutline(toggleButton3); - }); - - test("should render with the expected styling when opt out flag is false", async ({ + test("should render with the expected focus styling", async ({ mount, page, }) => { diff --git a/src/components/button-toggle/button-toggle.style.ts b/src/components/button-toggle/button-toggle.style.ts index 9fff91143c..95b0e23437 100644 --- a/src/components/button-toggle/button-toggle.style.ts +++ b/src/components/button-toggle/button-toggle.style.ts @@ -59,10 +59,6 @@ export interface StyledButtonToggleProps { allowDeselect?: boolean; } -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledButtonToggle = styled.button` display: inline-flex; justify-content: center; @@ -100,12 +96,7 @@ const StyledButtonToggle = styled.button` `} &:focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} z-index: 100; } diff --git a/src/components/button/button.pw.tsx b/src/components/button/button.pw.tsx index c5cb9007c0..e0f3f93d68 100644 --- a/src/components/button/button.pw.tsx +++ b/src/components/button/button.pw.tsx @@ -1,6 +1,5 @@ import React from "react"; import { test, expect } from "@playwright/experimental-ct-react17"; -import type { HooksConfig } from "../../../playwright/index"; import { buttonSubtextPreview, @@ -262,36 +261,20 @@ test.describe("Check events for Button component", () => { }); }); -test.describe("When focused", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - await buttonDataComponent(page).focus(); - await expect(buttonDataComponent(page)).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(buttonDataComponent(page)).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - await buttonDataComponent(page).focus(); - await expect(buttonDataComponent(page)).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); +test("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); + await buttonDataComponent(page).focus(); + await expect(buttonDataComponent(page)).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(buttonDataComponent(page)).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test("should have the expected border radius styling", async ({ diff --git a/src/components/button/button.style.ts b/src/components/button/button.style.ts index d164d029f4..5817f1b4bc 100644 --- a/src/components/button/button.style.ts +++ b/src/components/button/button.style.ts @@ -72,11 +72,9 @@ type StyledButtonProps = SpaceProps & buttonType: Required["buttonType"]; }; -const oldFocusStyling = "outline: solid 3px var(--colorsSemanticFocus500);"; - const StyledButton = styled.button` ${space} - ${({ disabled, noWrap, theme }) => css` + ${({ disabled, noWrap }) => css` align-items: center; cursor: ${disabled ? "not-allowed" : "pointer"}; display: inline-flex; @@ -91,9 +89,7 @@ const StyledButton = styled.button` border-radius: var(--borderRadius400); &:focus { - ${!theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling()} } ${stylingForType} diff --git a/src/components/carbon-provider/__internal__/new-validation.context.ts b/src/components/carbon-provider/__internal__/new-validation.context.ts index bd454bbf27..2655b135c7 100644 --- a/src/components/carbon-provider/__internal__/new-validation.context.ts +++ b/src/components/carbon-provider/__internal__/new-validation.context.ts @@ -5,10 +5,6 @@ export interface NewValidationContextProps { * * NOTE - Will eventually be set to `true` by default in the future. */ validationRedesignOptIn?: boolean; - /** (Deprecated) Feature flag for opting out of the focus redesign. - * - * NOTE - This feature flag will soon be removed, along with the legacy styling. */ - focusRedesignOptOut?: boolean; } export default React.createContext({}); diff --git a/src/components/carbon-provider/carbon-provider.component.tsx b/src/components/carbon-provider/carbon-provider.component.tsx index dc7ab40443..7ff7582ab3 100644 --- a/src/components/carbon-provider/carbon-provider.component.tsx +++ b/src/components/carbon-provider/carbon-provider.component.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from "react"; +import React from "react"; import { ThemeProvider } from "styled-components"; import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider"; @@ -9,7 +9,6 @@ import NewValidationContext, { NewValidationContextProps, } from "./__internal__/new-validation.context"; import TopModalProvider from "./__internal__/top-modal-provider.component"; -import Logger from "../../__internal__/utils/logger"; export interface CarbonProviderProps extends NewValidationContextProps { /* Content for the provider to wrap */ @@ -18,46 +17,22 @@ export interface CarbonProviderProps extends NewValidationContextProps { theme?: Partial; } -let deprecatedFocusRedesignOptOut = false; - export const CarbonProvider = ({ children, theme = sageTheme, validationRedesignOptIn = false, - focusRedesignOptOut = false, -}: CarbonProviderProps) => { - const { focusRedesignOptOut: existingFocusRedesignOptOut } = - useContext(NewValidationContext); - - const focusRedesignOptOutValue = - existingFocusRedesignOptOut || focusRedesignOptOut; - - if (!deprecatedFocusRedesignOptOut && focusRedesignOptOutValue) { - deprecatedFocusRedesignOptOut = true; - Logger.deprecate( - "The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + - "Along with this feature flag, the legacy focus styling will also be removed. ", - ); - } - - return ( - - - - {children} - - - - ); -}; +}: CarbonProviderProps) => ( + + + + {children} + + + +); export default CarbonProvider; diff --git a/src/components/carbon-provider/carbon-provider.test.tsx b/src/components/carbon-provider/carbon-provider.test.tsx deleted file mode 100644 index d1cf7111ba..0000000000 --- a/src/components/carbon-provider/carbon-provider.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import { render } from "@testing-library/react"; -import CarbonProvider from "."; -import Logger from "../../__internal__/utils/logger"; - -test("logs a deprecation warning once when the `focusRedesignOptOut` feature flag is `true`", () => { - const loggerSpy = jest - .spyOn(Logger, "deprecate") - .mockImplementation(() => {}); - - render( - <> - - Hello World! - - - Hello World! - - , - ); - - expect(loggerSpy).toHaveBeenCalledWith( - "The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + - "Along with this feature flag, the legacy focus styling will also be removed. ", - ); - expect(loggerSpy).toHaveBeenCalledTimes(1); - loggerSpy.mockRestore(); -}); diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts index a218bb3446..15ad0c20f5 100644 --- a/src/components/card/card.style.ts +++ b/src/components/card/card.style.ts @@ -105,7 +105,7 @@ const StyledCardContent = styled.div.attrs( return {}; }, )` - ${({ interactive, theme }) => + ${({ interactive }) => interactive && css` cursor: pointer; @@ -113,13 +113,10 @@ const StyledCardContent = styled.div.attrs( flex-direction: column; height: 100%; - ${!theme.focusRedesignOptOut && - css` - :focus { - ${addFocusStyling()}; - position: relative; - } - `} + :focus { + ${addFocusStyling()}; + position: relative; + } `} align-items: stretch; diff --git a/src/components/checkbox/checkbox.pw.tsx b/src/components/checkbox/checkbox.pw.tsx index 07d2ab71a5..54da65fd74 100644 --- a/src/components/checkbox/checkbox.pw.tsx +++ b/src/components/checkbox/checkbox.pw.tsx @@ -41,52 +41,24 @@ import { verifyRequiredAsteriskForLegend, verifyRequiredAsteriskForLabel, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const boolVals = [true, false]; -test.describe("should render Checkbox component and check focus outline", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); +test("should have the expected focus styling", async ({ mount, page }) => { + await mount(); - const checkboxElement = checkboxRole(page); - await checkboxElement.focus(); - const focusedElement = checkboxRole(page).locator("..").locator("div"); - await expect(focusedElement).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(focusedElement).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount( - , - { - hooksConfig: { - focusRedesignOptOut: true, - }, - }, - ); - - const checkboxElement = checkboxRole(page); - await checkboxElement.focus(); - const focusedElement = checkboxRole(page).locator("..").locator("div"); - await expect(focusedElement).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px", - ); - }); + const checkboxElement = checkboxRole(page); + await checkboxElement.focus(); + const focusedElement = checkboxRole(page).locator("..").locator("div"); + await expect(focusedElement).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(focusedElement).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("should render Checkbox component and check props", () => { diff --git a/src/components/checkbox/checkbox.style.ts b/src/components/checkbox/checkbox.style.ts index 98f0d867b8..48f39ad6d4 100644 --- a/src/components/checkbox/checkbox.style.ts +++ b/src/components/checkbox/checkbox.style.ts @@ -24,10 +24,6 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps { applyNewValidation?: boolean; } -const oldFocusStyling = ` -box-shadow: 0 0 0 3px var(--colorsSemanticFocus500); -`; - const StyledCheckbox = styled.div` ${margin} ${({ @@ -89,17 +85,10 @@ const StyledCheckbox = styled.div` // prettier-ignore ${StyledHiddenCheckableInput}:not([disabled]) { - ${({ theme }) => - ` &:focus + ${StyledCheckableInputSvgWrapper} , &:hover + ${StyledCheckableInputSvgWrapper} { - ${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - } - } - `} + ${addFocusStyling()} + } } ${StyledLabelContainer} { diff --git a/src/components/date/__internal__/date-picker/day-picker.style.ts b/src/components/date/__internal__/date-picker/day-picker.style.ts index c745529c86..178ecdd027 100644 --- a/src/components/date/__internal__/date-picker/day-picker.style.ts +++ b/src/components/date/__internal__/date-picker/day-picker.style.ts @@ -3,10 +3,6 @@ import styled, { css } from "styled-components"; import baseTheme from "../../../../style/themes/base"; import addFocusStyling from "../../../../style/utils/add-focus-styling"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const officialReactDayPickerStyling = () => css` /* Variables declaration */ /* prettier-ignore */ @@ -453,22 +449,14 @@ const StyledDayPicker = styled.div` } .rdp-focused:not(.rdp-disabled):not(.rdp-outside) { - ${({ theme }) => css` - ${!theme.focusRedesignOptOut - ? addFocusStyling(true) - : /* istanbul ignore next */ oldFocusStyling} - `} + ${addFocusStyling(true)} border-radius: var(--borderRadius400); } .rdp-day.rdp-selected { - ${({ theme }) => css` - &:focus { - ${!theme.focusRedesignOptOut - ? addFocusStyling(true) - : /* istanbul ignore next */ oldFocusStyling} - } - `} + &:focus { + ${addFocusStyling(true)} + } } `; diff --git a/src/components/date/__internal__/navbar/button.style.ts b/src/components/date/__internal__/navbar/button.style.ts index 3033936adb..a0e975b088 100644 --- a/src/components/date/__internal__/navbar/button.style.ts +++ b/src/components/date/__internal__/navbar/button.style.ts @@ -2,10 +2,6 @@ import styled from "styled-components"; import addFocusStyling from "../../../../style/utils/add-focus-styling"; import { baseTheme } from "../../../../style/themes"; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledButton = styled.button.attrs({ type: "button" })` justify-content: center; align-items: center; @@ -20,16 +16,9 @@ const StyledButton = styled.button.attrs({ type: "button" })` box-sizing: border-box; border-radius: var(--borderRadius050); - ${({ theme }) => - ` - &:focus { - ${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - } - } - `} + &:focus { + ${addFocusStyling()} + } `; StyledButton.defaultProps = { diff --git a/src/components/date/date.pw.tsx b/src/components/date/date.pw.tsx index 64358361b2..94fecb12fa 100644 --- a/src/components/date/date.pw.tsx +++ b/src/components/date/date.pw.tsx @@ -18,7 +18,6 @@ import { import { verifyRequiredAsteriskForLabel, assertCssValueIsApproximately, - checkGoldenOutline, checkAccessibility, getStyle, toBeFocusedDelayed, @@ -842,55 +841,7 @@ test.describe("Functionality tests", () => { await expect(dayPickerNavButton2).toHaveCSS("border-radius", "4px"); }); - test(`should have the expected styling when opt out flag is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await page.focus("body"); - await page.keyboard.press("Tab"); - const inputParent = getDataElementByValue(page, "input").locator(".."); - await checkGoldenOutline(inputParent); - await page.keyboard.press("Tab"); - const dayPickerNavButton1 = page.getByLabel("Previous month"); - await dayPickerNavButton1.focus(); - await expect(dayPickerNavButton1).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - await page.keyboard.press("Tab"); - const dayPickerNavButton2 = page.getByLabel("Next month"); - await dayPickerNavButton2.focus(); - await expect(dayPickerNavButton2).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - await page.keyboard.press("Tab"); - const dayPicker1 = page - .getByLabel("Sunday, May 1st, 2022, selected") - .locator(".."); - await dayPicker1.focus(); - await expect(dayPicker1).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - - await page.keyboard.press("ArrowRight"); - const dayPicker2 = page.getByLabel("Monday, May 2nd, 2022").locator(".."); - await dayPicker2.focus(); - await expect(dayPicker2).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - - test(`should have the expected styling when opt out flag is false`, async ({ - mount, - page, - }) => { + test(`should have the expected focus styling`, async ({ mount, page }) => { await mount(); await page.focus("body"); diff --git a/src/components/drawer/drawer.pw.tsx b/src/components/drawer/drawer.pw.tsx index 9099dfda81..fe34925a1f 100644 --- a/src/components/drawer/drawer.pw.tsx +++ b/src/components/drawer/drawer.pw.tsx @@ -1,6 +1,5 @@ import React from "react"; import { test, expect } from "@playwright/experimental-ct-react17"; -import type { HooksConfig } from "../../../playwright/index"; import { DrawerCustom, DrawerCustomFooterHeader, @@ -21,53 +20,30 @@ import { waitForAnimationEnd, } from "../../../playwright/support/helper"; -test.describe("check focus outline and border radius for Drawer component", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - const drawerToggleButton = drawerToggle(page); - await drawerToggleButton.focus(); - await expect(drawerToggleButton).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(drawerToggleButton).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - const drawerToggleButton = drawerToggle(page); - await drawerToggleButton.focus(); - await expect(drawerToggleButton).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); +test("should have the expected focus styling", async ({ mount, page }) => { + await mount(); + + const drawerToggleButton = drawerToggle(page); + await drawerToggleButton.focus(); + await expect(drawerToggleButton).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(drawerToggleButton).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); +}); - test("has the expected border radius styling on the sidebar control", async ({ - mount, - page, - }) => { - await mount(); +test("has the expected border radius styling on the sidebar control", async ({ + mount, + page, +}) => { + await mount(); - const drawerToggleButton = drawerToggle(page); - await drawerToggleButton.focus(); - await expect(drawerToggleButton).toHaveCSS("border-radius", "4px"); - }); + const drawerToggleButton = drawerToggle(page); + await drawerToggleButton.focus(); + await expect(drawerToggleButton).toHaveCSS("border-radius", "4px"); }); test.describe("check props for Drawer component", () => { diff --git a/src/components/drawer/drawer.style.ts b/src/components/drawer/drawer.style.ts index 0475f5b1a9..7563375f4b 100644 --- a/src/components/drawer/drawer.style.ts +++ b/src/components/drawer/drawer.style.ts @@ -175,10 +175,6 @@ interface StyledSidebarToggleButtonProps { isExpanded?: boolean; } -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledSidebarToggleButton = styled.button.attrs({ type: "button", })` @@ -199,16 +195,9 @@ const StyledSidebarToggleButton = styled.button.attrs({ animation: ${buttonClose} ${animationDuration} ease-in-out; border-radius: var(--borderRadius050); - ${({ theme }) => - ` - &:focus { - ${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - } - } - `} + &:focus { + ${addFocusStyling()} + } &:hover { cursor: pointer; diff --git a/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx b/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx index 69a68bd8c2..a4f09fed40 100644 --- a/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx +++ b/src/components/duelling-picklist/picklist-item/picklist-item.test.tsx @@ -5,7 +5,6 @@ import userEvent from "@testing-library/user-event"; import PicklistItem from "./picklist-item.component"; import FocusContext from "../__internal__/duelling-picklist.context"; import iconUnicodes from "../../icon/icon-unicodes"; -import CarbonProvider from "../../carbon-provider"; test("the context callback is called with the expected arguments when isLastItem and isLastGroup are both falsy", async () => { const user = userEvent.setup(); @@ -79,15 +78,12 @@ test("the context callback is called with the expected arguments when isLastItem expect(setElementToFocus).toHaveBeenCalledWith(0, 1, undefined); }); -// test purely for coverage - the `locked` prop is tested in both Chromatic and Playwright [although not with the focusRedesignOptOut flag] -test("should render a locked icon with expected styling when the `locked` prop is set and the focusRedesignOptOut flag is set", () => { +// test purely for coverage - the `locked` prop is tested in both Chromatic and Playwright +test("should render a locked icon with expected styling when the `locked` prop is set", () => { render( - - {}} item={1} locked> - Item content - - ) - , + {}} item={1} locked> + Item content + , ); expect(screen.getByTestId("icon")).toHaveStyleRule( @@ -95,10 +91,4 @@ test("should render a locked icon with expected styling when the `locked` prop i `"${iconUnicodes.locked}"`, { modifier: "&::before" }, ); - - expect(screen.getByTestId("icon")).toHaveStyleRule( - "outline", - "2px solid var(--colorsSemanticFocus500)", - { modifier: ":focus" }, - ); }); diff --git a/src/components/flat-table/flat-table-row/flat-table-row.style.ts b/src/components/flat-table/flat-table-row/flat-table-row.style.ts index 69d94e258d..c38b9773f2 100644 --- a/src/components/flat-table/flat-table-row/flat-table-row.style.ts +++ b/src/components/flat-table/flat-table-row/flat-table-row.style.ts @@ -17,15 +17,6 @@ const horizontalBorderSizes = { large: "4px", }; -const oldFocusStyling = ` - border: 2px solid var(--colorsSemanticFocus500); -`; - -const firstColumnOldFocusStyling = ` - outline: 2px solid var(--colorsSemanticFocus500); - outline-offset: -1px; -`; - const newFocusStyling = (theme: ThemeObject) => { return ` ${addFocusStyling(true)} @@ -59,11 +50,7 @@ const getRightStickyStyling = ( } `; -const stickyColumnFocusStyling = (theme: ThemeObject) => { - /* istanbul ignore else */ - if (!theme.focusRedesignOptOut) return ``; - /* istanbul ignore next */ - return ` +const stickyColumnFocusStyling = (theme: ThemeObject) => ` width: calc(100% + 1px); z-index: ${theme.zIndex.overlay}; :before { @@ -80,7 +67,6 @@ const stickyColumnFocusStyling = (theme: ThemeObject) => { } } `; -}; const borderColor = (colorTheme: FlatTableProps["colorTheme"]) => { switch (colorTheme) { @@ -274,9 +260,7 @@ const StyledFlatTableRow = styled.tr` right: 0px; top: 0; bottom: 0px; - ${!theme.focusRedesignOptOut - ? newFocusStyling(theme) - : /* istanbul ignore next */ oldFocusStyling} + ${newFocusStyling(theme)} pointer-events: none; } @@ -296,40 +280,12 @@ const StyledFlatTableRow = styled.tr` /* Styling for safari. Position relative does not work on tr elements on Safari */ ${isSafari(navigator) && css` - ${theme.focusRedesignOptOut && - /* istanbul ignore next */ - css` - outline: 2px solid var(--colorsSemanticFocus500); - outline-offset: -2px; - position: static; - - :after { - content: none; - border: none; - } - `} - ${!theme.focusRedesignOptOut && - /* istanbul ignore next */ - css` - position: -webkit-sticky; - :after { - border: none; - content: ""; - height: ${rowHeight}px; - ${newFocusStyling(theme)} - } - `} - `} - - ${theme.focusRedesignOptOut && - /* istanbul ignore next */ - css` - td:first-of-type:not(:nth-child(${lhsRowHeaderIndex + 2}))::before { - border-left: 3px solid var(--colorsSemanticFocus500); - } - - td:last-of-type:not(:nth-child(${rhsRowHeaderIndex})) { - border-right: 2px solid var(--colorsSemanticFocus500); + position: -webkit-sticky; + :after { + border: none; + content: ""; + height: ${rowHeight}px; + ${newFocusStyling(theme)} } `} @@ -366,9 +322,7 @@ const StyledFlatTableRow = styled.tr` cursor: pointer; :focus { - ${!theme.focusRedesignOptOut - ? newFocusStyling(theme) - : /* istanbul ignore next */ firstColumnOldFocusStyling} + ${newFocusStyling(theme)} } :hover { diff --git a/src/components/flat-table/flat-table-row/flat-table-row.test.tsx b/src/components/flat-table/flat-table-row/flat-table-row.test.tsx index b3330a89a0..ac9518b2f5 100644 --- a/src/components/flat-table/flat-table-row/flat-table-row.test.tsx +++ b/src/components/flat-table/flat-table-row/flat-table-row.test.tsx @@ -8,7 +8,6 @@ import { } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import CarbonProvider from "components/carbon-provider"; import FlatTableRow from "./flat-table-row.component"; import FlatTableCell from "../flat-table-cell/flat-table-cell.component"; import DrawerSidebarContext from "../../drawer/__internal__/drawer-sidebar.context"; @@ -402,28 +401,25 @@ describe("when FlatTableRowHeader children are passed", () => { }); // needed to hit coverage - it("should render with expected focus styling when first column is not sticky and row is interactive", () => { + it("applies correct sticky styling to specific table cells based on index", () => { render( - - - - {}}> - cell1 - cell2 - {}} data-role="cell3" /> - cell4 - cell5 - cell6 - - -
- , + + + {}}> + cell1 + cell2 + {}} data-role="cell3" /> + cell4 + cell5 + cell6 + + +
, ); const cell1 = screen.getByRole("cell", { name: "cell1" }); const cell2 = screen.getByRole("cell", { name: "cell2" }); // using test-id here as there are other elements with same role etc const cell3 = screen.getByTestId("cell3"); - expect(cell1).toHaveStyle("width: calc(100% + 1px)"); expect(cell2).toHaveStyle("width: calc(100% + 1px)"); expect(cell3).toHaveStyle("width: calc(100% + 1px)"); diff --git a/src/components/flat-table/flat-table.pw.tsx b/src/components/flat-table/flat-table.pw.tsx index caace56e74..84a0950359 100644 --- a/src/components/flat-table/flat-table.pw.tsx +++ b/src/components/flat-table/flat-table.pw.tsx @@ -87,7 +87,6 @@ import { waitForAnimationEnd, continuePressingTAB, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; const sizes = [ ["compact", "8px", "13px", 24], @@ -127,7 +126,6 @@ const colorThemes = [ ["transparent-white", "rgb(255, 255, 255)", "rgb(255, 255, 255)"], ] as const; -const gold = "rgb(255, 188, 25)"; const black = "rgba(0, 0, 0, 0.9)"; const lightGold = "rgb(255, 188, 26)"; const greyBlack = "rgba(0, 0, 0, 0.65)"; @@ -139,13 +137,6 @@ const green = "rgb(177, 211, 69)"; const blue = "rgb(0, 0, 255)"; const lightBlue = "rgb(51, 92, 220)"; -const checkFocus = async (locator: Locator) => { - const contentValue = await locator.evaluate((el) => - window.getComputedStyle(el, "after").getPropertyValue("border"), - ); - expect(contentValue).toBe(`2px solid ${gold}`); -}; - const checkNewFocusStyling = async (locator: Locator) => { const shadowValue = await locator.evaluate((el) => window.getComputedStyle(el, "after").getPropertyValue("box-shadow"), @@ -960,54 +951,7 @@ test.describe("Prop tests", () => { await expect(checkboxCell).not.toBeChecked(); }); - test(`should render with all rows selectable with the mouse when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const checkboxHeader = flatTableCheckboxHeader(page).locator("input"); - await checkboxHeader.click(); - await expect(checkboxHeader).toBeChecked(); - await expect( - flatTableCheckboxHeader(page) - .locator("input") - .locator("..") - .locator("..") - .locator("div:nth-child(2)"), - ).toHaveCSS("box-shadow", `${gold} 0px 0px 0px 3px`); - for await (const i of indexes(4)) { - await expect( - flatTableCheckboxCell(page, i).locator("input"), - ).toBeChecked(); - } - - for await (const i of indexes(5, 1)) { - await expect( - flatTableBodyRowByPosition(page, 0).locator("td").nth(i), - ).toHaveCSS("background-color", green); - await expect( - flatTableBodyRowByPosition(page, 1).locator("td").nth(i), - ).toHaveCSS("background-color", lightGrey); - await expect( - flatTableBodyRowByPosition(page, 2).locator("td").nth(i), - ).toHaveCSS("background-color", green); - await expect( - flatTableBodyRowByPosition(page, 3).locator("td").nth(i), - ).toHaveCSS("background-color", lightGrey); - } - - await expect(batchSelectionCounter(page)).toHaveText("4 selected"); - for await (const i of indexes(3)) { - await expect( - batchSelectionComponent(page).locator("button").nth(i).locator("span"), - ).toHaveCSS("color", greyBlack); - } - }); - - test(`should render with all rows selectable with the mouse when focusRedesignOptOut is false`, async ({ + test(`should render with all rows selectable with the mouse`, async ({ mount, page, }) => { @@ -1116,22 +1060,7 @@ test.describe("Prop tests", () => { await expect(checkboxHeader).not.toBeChecked(); }); - test(`should render with rows highlightable and selectable when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const bodyRow = flatTableBodyRows(page).first(); - await bodyRow.click(); - await expect( - flatTableBodyRows(page).first().locator("td").first(), - ).toHaveCSS("background-color", vlightGrey); - }); - - test(`should render with rows highlightable and selectable when focusRedesignOptOut is false`, async ({ + test(`should render with rows highlightable and selectable`, async ({ mount, page, }) => { @@ -1621,34 +1550,7 @@ test.describe("Prop tests", () => { }); }); - test(`should render with expandable rows expanded by mouse and subrows not accessible when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const transformValue = await getStyle( - flatTableExpandableIcon(page, 0), - "transform", - ); - expect(getRotationAngle(transformValue)).toBe(-90); - - await expect(flatTableSubrows(page)).toHaveCount(0); - await flatTableBodyRowByPosition(page, 0).click(); - await expect(flatTableSubrowByPosition(page, 0)).toHaveCount(1); - await expect(flatTableSubrowByPosition(page, 1)).toHaveCount(1); - - const bodyRow0 = flatTableBodyRowByPosition(page, 0); - await bodyRow0.press("Tab"); - await page.keyboard.press("ArrowDown"); - - const bodyRow3 = flatTableBodyRowByPosition(page, 3).locator("td").nth(3); - await expect(bodyRow3).toHaveCSS("border-right", `2px solid ${gold}`); - }); - - test(`should render with expandable rows expanded by mouse and subrows not accessible when focusRedesignOptOut is false`, async ({ + test(`should render with expandable rows expanded by mouse and subrows not accessible`, async ({ mount, page, }) => { @@ -1673,36 +1575,7 @@ test.describe("Prop tests", () => { await checkNewFocusStyling(bodyRow3); }); - test(`should render with expandable rows expanded by Spacebar and subrows not accessible when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const transformValue = await getStyle( - flatTableExpandableIcon(page, 0), - "transform", - ); - expect(getRotationAngle(transformValue)).toBe(-90); - await expect(flatTableSubrows(page)).toHaveCount(0); - - const bodyRowByPosition = flatTableBodyRowByPosition(page, 0); - await bodyRowByPosition.focus(); - await bodyRowByPosition.press("Space"); - await expect(flatTableSubrowByPosition(page, 0)).toHaveCount(1); - await expect(flatTableSubrowByPosition(page, 1)).toHaveCount(1); - - await bodyRowByPosition.press("Tab"); - await bodyRowByPosition.press("ArrowDown"); - await page.waitForTimeout(250); - await expect( - flatTableBodyRowByPosition(page, 3).locator("td").nth(3), - ).toHaveCSS("border-right", `2px solid ${gold}`); - }); - - test(`should render with expandable rows expanded by Spacebar and subrows not accessible when focusRedesignOptOut is false`, async ({ + test(`should render with expandable rows expanded by Spacebar and subrows not accessible`, async ({ mount, page, }) => { @@ -1727,36 +1600,7 @@ test.describe("Prop tests", () => { await checkNewFocusStyling(flatTableBodyRowByPosition(page, 3)); }); - test(`should render with expandable rows expanded by Enter key and subrows not accessible when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const transformValue = await getStyle( - flatTableExpandableIcon(page, 0), - "transform", - ); - expect(getRotationAngle(transformValue)).toBe(-90); - await expect(flatTableSubrows(page)).toHaveCount(0); - - const bodyRowByPosition = flatTableBodyRowByPosition(page, 0); - await bodyRowByPosition.focus(); - await bodyRowByPosition.press("Enter"); - await expect(flatTableSubrowByPosition(page, 0)).toHaveCount(1); - await expect(flatTableSubrowByPosition(page, 1)).toHaveCount(1); - - await bodyRowByPosition.press("Tab"); - await bodyRowByPosition.press("ArrowDown"); - await page.waitForTimeout(250); - await expect( - flatTableBodyRowByPosition(page, 3).locator("td").nth(3), - ).toHaveCSS("border-right", `2px solid ${gold}`); - }); - - test(`should render with expandable rows expanded by Enter key and subrows not accessible when focusRedesignOptOut is false`, async ({ + test(`should render with expandable rows expanded by Enter key and subrows not accessible`, async ({ mount, page, }) => { @@ -1792,41 +1636,7 @@ test.describe("Prop tests", () => { await relLink(page).click(); }); - test(`should render with expandable rows expanded by mouse, with subrows focusable using down arrow key when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const transformValue = await getStyle( - flatTableExpandableIcon(page, 0), - "transform", - ); - expect(getRotationAngle(transformValue)).toBe(-90); - await expect(flatTableSubrows(page)).toHaveCount(0); - - const bodyRowByPosition0 = flatTableBodyRowByPosition(page, 0); - await bodyRowByPosition0.click(); - await expect(flatTableSubrowByPosition(page, 0)).toHaveCount(1); - await expect(flatTableSubrowByPosition(page, 1)).toHaveCount(1); - - await bodyRowByPosition0.press("ArrowDown"); - const bodyRowByPosition1 = flatTableBodyRowByPosition(page, 1) - .locator("td") - .nth(3); - await expect(bodyRowByPosition1).toHaveCSS( - "border-right", - `2px solid ${gold}`, - ); - await bodyRowByPosition1.press("ArrowDown"); - await expect( - flatTableBodyRowByPosition(page, 2).locator("td").nth(3), - ).toHaveCSS("border-right", `2px solid ${gold}`); - }); - - test(`should render with expandable rows expanded by mouse, with subrows focusable using down arrow key when focusRedesignOptOut is false`, async ({ + test(`should render with expandable rows expanded by mouse, with subrows focusable using down arrow key`, async ({ mount, page, }) => { @@ -2011,52 +1821,7 @@ test.describe("Prop tests", () => { await expect(flatTableSubrows(page)).toHaveCount(8); }); - test(`should render with parent expandable and child subrows selectable when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const bodyRowByPosition0 = flatTableBodyRowByPosition(page, 0); - await bodyRowByPosition0.click(); - await expect(flatTableSubrows(page)).toHaveCount(2); - - const bodyRowByPosition0Input = flatTableBodyRowByPosition(page, 0).locator( - "input", - ); - await bodyRowByPosition0Input.click(); - await expect(bodyRowByPosition0Input).toBeChecked(); - - const bodyRowByPosition0Parent = flatTableBodyRowByPosition(page, 0) - .locator("input") - .locator("..") - .locator("..") - .locator("div:nth-child(2)"); - await expect(bodyRowByPosition0Parent).toHaveCSS( - "box-shadow", - `${gold} 0px 0px 0px 3px`, - ); - - const bodyRowByPosition1Input = flatTableBodyRowByPosition(page, 1).locator( - "input", - ); - await bodyRowByPosition1Input.click(); - await expect(bodyRowByPosition1Input).toBeChecked(); - - const bodyRowByPosition1Parent = flatTableBodyRowByPosition(page, 1) - .locator("input") - .locator("..") - .locator("..") - .locator("div:nth-child(2)"); - await expect(bodyRowByPosition1Parent).toHaveCSS( - "box-shadow", - `${gold} 0px 0px 0px 3px`, - ); - }); - - test(`should render with parent expandable and child subrows selectable when focusRedesignOptOut is false`, async ({ + test(`should render with parent expandable and child subrows selectable`, async ({ mount, page, }) => { @@ -2099,40 +1864,7 @@ test.describe("Prop tests", () => { ); }); - test(`should render with parent expandable row only selectable when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const bodyRowByPosition0 = flatTableBodyRowByPosition(page, 0); - await bodyRowByPosition0.click(); - await expect(flatTableSubrows(page)).toHaveCount(2); - - const bodyRowByPosition0Input = flatTableBodyRowByPosition(page, 0).locator( - "input", - ); - await bodyRowByPosition0Input.click(); - await expect(bodyRowByPosition0Input).toBeChecked(); - - const bodyRowByPosition0Parent = flatTableBodyRowByPosition(page, 0) - .locator("input") - .locator("..") - .locator("..") - .locator("div:nth-child(2)"); - await expect(bodyRowByPosition0Parent).toHaveCSS( - "box-shadow", - `${gold} 0px 0px 0px 3px`, - ); - - await expect( - flatTableBodyRowByPosition(page, 1).locator("input"), - ).toHaveCount(0); - }); - - test(`should render with parent expandable row only selectable when focusRedesignOptOut is false`, async ({ + test(`should render with parent expandable row only selectable`, async ({ mount, page, }) => { @@ -2162,36 +1894,7 @@ test.describe("Prop tests", () => { ).toHaveCount(0); }); - test(`should render with child subrow only selectable when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const bodyRowByPosition0 = flatTableBodyRowByPosition(page, 0); - await bodyRowByPosition0.click(); - await expect(flatTableSubrows(page)).toHaveCount(2); - await expect( - flatTableBodyRowByPosition(page, 0).locator("input"), - ).toHaveCount(0); - - const bodyRowByPosition1Input = flatTableBodyRowByPosition(page, 1).locator( - "input", - ); - await bodyRowByPosition1Input.click(); - await expect(bodyRowByPosition1Input).toBeChecked(); - await expect( - flatTableBodyRowByPosition(page, 1) - .locator("input") - .locator("..") - .locator("..") - .locator("div:nth-child(2)"), - ).toHaveCSS("box-shadow", `${gold} 0px 0px 0px 3px`); - }); - - test(`should render with child subrow only selectable when focusRedesignOptOut is false`, async ({ + test(`should render with child subrow only selectable`, async ({ mount, page, }) => { @@ -2221,24 +1924,7 @@ test.describe("Prop tests", () => { ); }); - test(`should render with first row focusable by tabbing but no further rows are focused on tab press when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await page.keyboard.press("Tab"); - await page.keyboard.press("Tab"); - await checkFocus(flatTableBodyRowByPosition(page, 0)); - await page.keyboard.press("Tab"); - await expect(flatTableBodyRowByPosition(page, 0)).not.toBeFocused(); - await expect(flatTableBodyRowByPosition(page, 1)).not.toBeFocused(); - await expect(flatTableBodyRowByPosition(page, 3)).not.toBeFocused(); - }); - - test(`should render with first row focusable by tabbing but no further rows are focused on tab press when focusRedesignOptOut is false`, async ({ + test(`should render with first row focusable by tabbing but no further rows are focused on tab press`, async ({ mount, page, }) => { @@ -2253,24 +1939,7 @@ test.describe("Prop tests", () => { await expect(flatTableBodyRowByPosition(page, 3)).not.toBeFocused(); }); - test(`should render with the last selected row as the tab stop and removes it from any other ones when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount( - , - { - hooksConfig: { focusRedesignOptOut: true }, - }, - ); - - await page.keyboard.press("Tab"); - await page.keyboard.press("Tab"); - await expect(flatTableBodyRowByPosition(page, 0)).not.toBeFocused(); - await checkFocus(flatTableBodyRowByPosition(page, 1)); - }); - - test(`should render with the last selected row as the tab stop and removes it from any other ones when focusRedesignOptOut is false`, async ({ + test(`should render with the last selected row as the tab stop and removes it from any other ones`, async ({ mount, page, }) => { @@ -2282,24 +1951,7 @@ test.describe("Prop tests", () => { await checkNewFocusStyling(flatTableBodyRowByPosition(page, 1)); }); - test(`should render with the last highlighted row as the tab stop and removes it from any other ones when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount( - , - { - hooksConfig: { focusRedesignOptOut: true }, - }, - ); - - await page.keyboard.press("Tab"); - await page.keyboard.press("Tab"); - await expect(flatTableBodyRowByPosition(page, 0)).not.toBeFocused(); - await checkFocus(flatTableBodyRowByPosition(page, 1)); - }); - - test(`should render with the last highlighted row as the tab stop and removes it from any other ones when focusRedesignOptOut is false`, async ({ + test(`should render with the last highlighted row as the tab stop and removes it from any other ones`, async ({ mount, page, }) => { @@ -2311,32 +1963,7 @@ test.describe("Prop tests", () => { await checkNewFocusStyling(flatTableBodyRowByPosition(page, 1)); }); - test(`should render with clickable rows accessible using down arrow keys when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await continuePressingTAB(page, 6); - - await checkFocus(flatTableBodyRowByPosition(page, 0)); - await page.keyboard.press("Tab"); - await expect( - flatTableBodyRowByPosition(page, 0).locator("input"), - ).toBeFocused(); - await page.keyboard.press("ArrowDown"); - await checkFocus(flatTableBodyRowByPosition(page, 1)); - await page.keyboard.press("ArrowDown"); - await checkFocus(flatTableBodyRowByPosition(page, 2)); - await page.keyboard.press("ArrowDown"); - await checkFocus(flatTableBodyRowByPosition(page, 3)); - await page.keyboard.press("ArrowDown"); - await checkFocus(flatTableBodyRowByPosition(page, 3)); - }); - - test(`should render with clickable rows accessible using down arrow keys when focusRedesignOptOut is false`, async ({ + test(`should render with clickable rows accessible using down arrow keys`, async ({ mount, page, }) => { @@ -2359,31 +1986,7 @@ test.describe("Prop tests", () => { await checkNewFocusStyling(flatTableBodyRowByPosition(page, 3)); }); - test(`should render with clickable rows accessible using up arrow keys when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await page.keyboard.press("Tab"); - const bodyRowByPos3 = flatTableBodyRowByPosition(page, 3) - .locator("input") - .nth(0); - await bodyRowByPos3.focus(); - await expect(bodyRowByPos3).toBeFocused(); - await page.keyboard.press("ArrowUp"); - await checkFocus(flatTableBodyRowByPosition(page, 2)); - await page.keyboard.press("ArrowUp"); - await checkFocus(flatTableBodyRowByPosition(page, 1)); - await page.keyboard.press("ArrowUp"); - await checkFocus(flatTableBodyRowByPosition(page, 0)); - await page.keyboard.press("ArrowUp"); - await checkFocus(flatTableBodyRowByPosition(page, 0)); - }); - - test(`should render with clickable rows accessible using up arrow keys when focusRedesignOptOut is false`, async ({ + test(`should render with clickable rows accessible using up arrow keys`, async ({ mount, page, }) => { @@ -2406,25 +2009,7 @@ test.describe("Prop tests", () => { }); [arrowsToPress].forEach(([arrow]) => { - test(`should render with rows not accessible using ${arrow} keys when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await continuePressingTAB(page, 6); - - const bodyRowByPos = flatTableBodyRowByPosition(page, 0); - await checkFocus(bodyRowByPos); - await bodyRowByPos.press(arrow); - await checkFocus(bodyRowByPos); - }); - }); - - [arrowsToPress].forEach(([arrow]) => { - test(`should render with rows not accessible using ${arrow} keys when focusRedesignOptOut is false`, async ({ + test(`should render with rows not accessible using ${arrow} keys`, async ({ mount, page, }) => { @@ -2962,25 +2547,7 @@ test.describe("Prop tests", () => { } }); - test(`should render with clickable rows when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - for await (const i of indexes(6)) { - const rowByPos = flatTableBodyRowByPosition(page, i); - await rowByPos.click(); - await checkFocus(rowByPos); - } - }); - - test(`should render with clickable rows when focusRedesignOptOut is false`, async ({ - mount, - page, - }) => { + test(`should render with clickable rows`, async ({ mount, page }) => { await mount(); for await (const i of indexes(6)) { diff --git a/src/components/flat-table/flat-table.style.ts b/src/components/flat-table/flat-table.style.ts index a450a9c257..5f7ed3e55c 100644 --- a/src/components/flat-table/flat-table.style.ts +++ b/src/components/flat-table/flat-table.style.ts @@ -17,10 +17,6 @@ const HEADER_OVERLAY_INCREMENT = 3; const STICKY_FOOTER_OVERLAY_INCREMENT = 1; const ROW_HEADER_OVERLAY_INCREMENT = 5; -const oldFocusStyling = ` - outline: 2px solid var(--colorsSemanticFocus500); -`; - const StyledTableContainer = styled.div< Pick >` @@ -147,24 +143,15 @@ const StyledFlatTableWrapper = styled(StyledBox)` border-bottom-right-radius: var(--${bottomBorderRadius}); `} - ${({ isInSidebar, theme, isFocused }) => css` + ${({ isInSidebar, isFocused }) => css` box-sizing: border-box; - /* istanbul ignore next */ - ${theme.focusRedesignOptOut && - isFocused && - /* istanbul ignore next */ - css` - ${oldFocusStyling} - `} - - ${!theme.focusRedesignOptOut && - isFocused && + ${isFocused && css` ${addFocusStyling()} `} - ${isInSidebar ? "min-width: fit-content;" : ""} + ${isInSidebar ? "min-width: fit-content;" : ""} `} ${({ colorTheme }) => { diff --git a/src/components/flat-table/flat-table.test.tsx b/src/components/flat-table/flat-table.test.tsx index f58ab4b6c4..2e8bb706ba 100644 --- a/src/components/flat-table/flat-table.test.tsx +++ b/src/components/flat-table/flat-table.test.tsx @@ -18,7 +18,6 @@ import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context" import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style"; import StyledFlatTableRow from "./flat-table-row/flat-table-row.style"; import Pager from "../pager/pager.component"; -import CarbonProvider from "../carbon-provider"; testStyledSystemMargin( (props) => ( @@ -45,7 +44,7 @@ testStyledSystemMargin( ); describe("when rows are interactive", () => { - it("should apply the expected focus styling to the wrapper element when it is focused and `focusRedesignOptOut` is not set", () => { + it("should apply the expected focus styling to the wrapper element when it is focused", () => { render( @@ -74,36 +73,6 @@ describe("when rows are interactive", () => { ); }); - it("should apply the expected focus styling to the wrapper element when it is focused and `focusRedesignOptOut` is set", () => { - render( - - - - {}}> - one - two - - {}}> - three - four - - - - , - ); - const tableWrapper = screen.getByRole("region"); - const focusableTableContainer = screen.getByTestId("flat-table-container"); - act(() => { - focusableTableContainer.focus(); - }); - - expect(focusableTableContainer).toHaveFocus(); - expect(tableWrapper).toHaveStyleRule( - "outline", - "2px solid var(--colorsSemanticFocus500)", - ); - }); - it("should not move focus to first row with `onClick` when down arrow pressed and table wrapper focused", async () => { const user = userEvent.setup(); render( diff --git a/src/components/flat-table/sort/sort.style.ts b/src/components/flat-table/sort/sort.style.ts index b4cc38085c..3cb52d1e5d 100644 --- a/src/components/flat-table/sort/sort.style.ts +++ b/src/components/flat-table/sort/sort.style.ts @@ -5,10 +5,6 @@ import { SortProps } from "./sort.component"; import addFocusStyling from "../../../style/utils/add-focus-styling"; import baseTheme from "../../../style/themes/base"; -const oldFocusStyling = ` - outline: solid 1px var(--colorsSemanticFocus500); -`; - const StyledSort = styled.div>` display: inline-flex; align-items: center; @@ -23,12 +19,7 @@ const StyledSort = styled.div>` } :focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} border-radius: var(--borderRadius025); } `; diff --git a/src/components/heading/heading.style.ts b/src/components/heading/heading.style.ts index 8337dad0a6..813e52a916 100644 --- a/src/components/heading/heading.style.ts +++ b/src/components/heading/heading.style.ts @@ -30,8 +30,6 @@ type StyledHeaderProps = { hasBackLink?: boolean; }; -const oldFocusStyling = "outline: 3px solid var(--colorsSemanticFocus500);"; - const StyledHeader = styled.div` ${({ divider, subheader, hasBackLink }) => css` ${subheader && @@ -70,8 +68,7 @@ const StyledHeadingBackButton = styled(Link)` &:focus { background-color: transparent; - ${({ theme }) => - !theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling} + ${addFocusStyling()} } &:hover { diff --git a/src/components/heading/heading.test.tsx b/src/components/heading/heading.test.tsx index ceed21a3ec..b4e737cf3f 100644 --- a/src/components/heading/heading.test.tsx +++ b/src/components/heading/heading.test.tsx @@ -1,7 +1,6 @@ import React from "react"; import { render, screen, fireEvent } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import CarbonProvider from "../carbon-provider"; import Pill from "../pill"; import Heading, { HeadingType } from "."; @@ -213,21 +212,3 @@ test("alters the grid-column property on the subtitle node, when a back link/but expect(subtitle).toHaveStyle("grid-column: 2"); }); - -/* styling test for coverage */ -test("alters the outline property on the back link/button, when the back link is focused and consumers opt out of the focus redesign", () => { - render( - - - , - ); - - const backLink = screen.getByTestId("heading-back-button"); - backLink.focus(); - - expect(backLink).toHaveStyleRule( - "outline", - "3px solid var(--colorsSemanticFocus500)", - { modifier: "button:focus" }, - ); -}); diff --git a/src/components/help/help.pw.tsx b/src/components/help/help.pw.tsx index 25a7396eb6..678ae1a0ca 100644 --- a/src/components/help/help.pw.tsx +++ b/src/components/help/help.pw.tsx @@ -14,7 +14,6 @@ import { containsClass, } from "../../../playwright/support/helper"; import { COLOR, CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const tooltipText = "Some helpful text goes here"; @@ -25,40 +24,22 @@ const colors = [ ["brown", COLOR.BROWN], ]; -test.describe("when focused", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - const elementLocator = helpComponent(page); - await elementLocator.focus(); - await expect(helpComponent(page).locator("span")).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(helpComponent(page).locator("span")).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const elementLocator = helpComponent(page); - await elementLocator.focus(); - await expect(helpComponent(page).locator("span")).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 2px", - ); - }); +test("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); + + const elementLocator = helpComponent(page); + await elementLocator.focus(); + await expect(helpComponent(page).locator("span")).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(helpComponent(page).locator("span")).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("Testing Help component properties", () => { diff --git a/src/components/help/help.style.ts b/src/components/help/help.style.ts index dbd703cc0a..5c2b845c30 100644 --- a/src/components/help/help.style.ts +++ b/src/components/help/help.style.ts @@ -8,10 +8,6 @@ interface StyledHelpProps { href?: string; } -const oldFocusStyling = ` - outline: solid 2px var(--colorsSemanticFocus500); -`; - const StyledHelp = styled.div` background: none; cursor: default; @@ -43,12 +39,7 @@ const StyledHelp = styled.div` &:focus ${StyledIcon} { border-radius: var(--borderRadius050); - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} } ${margin} diff --git a/src/components/icon-button/icon-button.pw.tsx b/src/components/icon-button/icon-button.pw.tsx index 97ffbb7a1d..daf09dc275 100644 --- a/src/components/icon-button/icon-button.pw.tsx +++ b/src/components/icon-button/icon-button.pw.tsx @@ -3,14 +3,10 @@ import { test, expect } from "@playwright/experimental-ct-react17"; import IconButtonComponent from "./component.test-pw"; import { button as iconButton } from "../../../playwright/components/index"; import { CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; import { checkAccessibility } from "../../../playwright/support/helper"; test.describe("check IconButton component focus outlines and border radius", () => { - test(`should have the expected styling when the focusRedesignOptOut is false`, async ({ - mount, - page, - }) => { + test(`should have the expected focus styling`, async ({ mount, page }) => { await mount(); await iconButton(page).focus(); @@ -25,21 +21,6 @@ test.describe("check IconButton component focus outlines and border radius", () ); }); - test(`should have the expected styling when the focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await iconButton(page).focus(); - await expect(iconButton(page)).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - test(`should render with the expected border radius`, async ({ mount, page, diff --git a/src/components/icon-button/icon-button.style.ts b/src/components/icon-button/icon-button.style.ts index 42e544281c..49c54d999c 100644 --- a/src/components/icon-button/icon-button.style.ts +++ b/src/components/icon-button/icon-button.style.ts @@ -5,12 +5,6 @@ import StyledIcon from "../icon/icon.style"; import { baseTheme } from "../../style/themes"; import addFocusStyling from "../../style/utils/add-focus-styling"; -const oldFocusStyling = ` - background-color: transparent; - outline: solid 3px var(--colorsSemanticFocus500); - z-index: 1; -`; - const StyledIconButton = styled.button.attrs({ type: "button" })` ${({ disabled }: { disabled?: boolean }) => css` && { @@ -21,12 +15,7 @@ const StyledIconButton = styled.button.attrs({ type: "button" })` border-radius: var(--borderRadius050); &:focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} } &:hover { diff --git a/src/components/icon/icon.style.ts b/src/components/icon/icon.style.ts index 038c65ae63..6edff83279 100644 --- a/src/components/icon/icon.style.ts +++ b/src/components/icon/icon.style.ts @@ -87,8 +87,6 @@ function adjustIconBgSize(fontSize?: FontSize, bgSize?: BgSize) { return bgSize ? iconConfig.backgroundSize[bgSize] : undefined; } -const oldFocusStyling = "outline: 2px solid var(--colorsSemanticFocus500);"; - const StyledIcon = styled.span` ${({ theme, @@ -189,7 +187,7 @@ const StyledIcon = styled.span` ${hasTooltip && ` :focus { - ${!theme.focusRedesignOptOut ? addFocusStyling() : oldFocusStyling} + ${addFocusStyling()} } `} diff --git a/src/components/link-preview/link-preview.pw.tsx b/src/components/link-preview/link-preview.pw.tsx index cceed8fca6..db0a2d110a 100644 --- a/src/components/link-preview/link-preview.pw.tsx +++ b/src/components/link-preview/link-preview.pw.tsx @@ -7,12 +7,8 @@ import { linkPreviewCloseIcon, linkPreviewAs, } from "../../../playwright/components/link-preview"; -import { - checkGoldenOutline, - checkAccessibility, -} from "../../../playwright/support/helper"; +import { checkAccessibility } from "../../../playwright/support/helper"; import { CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const testPlaywright = "test-playwright"; @@ -20,10 +16,7 @@ const urlProp = "./carbon-by-sage-logo.png"; const keysToTrigger = ["Space", "Enter"]; test.describe("check styling for Link Preview component", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { + test("should have the expected focus styling", async ({ mount, page }) => { await mount(); const previewElement = linkPreview(page); @@ -35,26 +28,6 @@ test.describe("check styling for Link Preview component", () => { ); }); - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount( - , - { - hooksConfig: { focusRedesignOptOut: true }, - }, - ); - - const previewElement = linkPreview(page); - await previewElement.focus(); - - await expect(previewElement).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 2px", - ); - }); - test("should render with the expected border radius styling", async ({ mount, page, @@ -150,36 +123,6 @@ test.describe("check functionality for Link Preview component", () => { "rgb(204, 214, 219)", ); }); - - test("should verify border outline color and width of Link Preview on focus", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await linkPreview(page).focus(); - - await checkGoldenOutline(linkPreview(page), "2px"); - }); - - test("should verify border outline color of close icon on focus", async ({ - mount, - page, - }) => { - await mount( - {}} />, - { - hooksConfig: { focusRedesignOptOut: true }, - }, - ); - - const closeButton = page.getByLabel("link preview close button"); - - await closeButton.focus(); - await checkGoldenOutline(closeButton); - }); }); test.describe("check events for Link Preview component", () => { diff --git a/src/components/link-preview/link-preview.style.ts b/src/components/link-preview/link-preview.style.ts index 48786706dd..f78d6fd729 100644 --- a/src/components/link-preview/link-preview.style.ts +++ b/src/components/link-preview/link-preview.style.ts @@ -6,11 +6,6 @@ import { import addFocusStyling from "../../style/utils/add-focus-styling"; import baseTheme from "../../style/themes/base"; -const oldFocusStyling = ` - outline: solid 2px var(--colorsSemanticFocus500); - outline-offset: -1px; -`; - const StyledLinkPreview = styled.a<{ as?: "a" | "div" }>` display: flex; margin: 8px; @@ -26,12 +21,7 @@ const StyledLinkPreview = styled.a<{ as?: "a" | "div" }>` ${as !== "div" && css` :focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling - }`} + ${addFocusStyling()} } :hover { diff --git a/src/components/link/link.pw.tsx b/src/components/link/link.pw.tsx index ae898c5ff7..976b70e281 100644 --- a/src/components/link/link.pw.tsx +++ b/src/components/link/link.pw.tsx @@ -1,6 +1,5 @@ import { expect, test } from "@playwright/experimental-ct-react17"; import React from "react"; -import { HooksConfig } from "../../../playwright"; import { getDataElementByValue, icon, @@ -278,47 +277,23 @@ test.describe("check props for Link component", () => { }); }); -test.describe("when focused", () => { - test("should render with correct focus state, focusRedesignOptOut true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - const linkElement = linkChildren(page); - await linkElement.focus(); - await expect(linkElement).toHaveCSS( - "background-color", - "rgb(255, 218, 128)", - ); - await expect(linkElement).toHaveCSS("color", "rgba(0, 0, 0, 0.9)"); - await expect(linkElement).toHaveCSS("border-radius", "2px"); - }); - - test("should render with correct focus state, focusRedesignOptOut false", async ({ - mount, - page, - }) => { - await mount(); - - const linkElement = linkChildren(page); - await linkElement.focus(); - await expect(linkElement).toHaveCSS( - "background-color", - "rgb(255, 218, 128)", - ); - await expect(linkElement).toHaveCSS("color", "rgba(0, 0, 0, 0.9)"); - await expect(linkElement).toHaveCSS("border-radius", "2px"); - const linkWrapper = link(page); - await expect(linkWrapper).toHaveCSS( - "box-shadow", - "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px", - ); - await expect(linkWrapper).toHaveCSS("max-width", "fit-content"); - }); +test("should render with the correct focus styling", async ({ + mount, + page, +}) => { + await mount(); + + const linkElement = linkChildren(page); + await linkElement.focus(); + await expect(linkElement).toHaveCSS("background-color", "rgb(255, 218, 128)"); + await expect(linkElement).toHaveCSS("color", "rgba(0, 0, 0, 0.9)"); + await expect(linkElement).toHaveCSS("border-radius", "2px"); + const linkWrapper = link(page); + await expect(linkWrapper).toHaveCSS( + "box-shadow", + "rgba(0, 0, 0, 0.9) 0px 4px 0px 0px", + ); + await expect(linkWrapper).toHaveCSS("max-width", "fit-content"); }); test.describe("check events for Link component", () => { diff --git a/src/components/link/link.style.ts b/src/components/link/link.style.ts index 8e284a416d..fec197d55d 100644 --- a/src/components/link/link.style.ts +++ b/src/components/link/link.style.ts @@ -212,7 +212,6 @@ const StyledLink = styled.span` ${!isSkipLink && !disabled && - !theme.focusRedesignOptOut && hasFocus && css` > a, diff --git a/src/components/loader/loader.pw.tsx b/src/components/loader/loader.pw.tsx index 1604cf4870..75800b7846 100644 --- a/src/components/loader/loader.pw.tsx +++ b/src/components/loader/loader.pw.tsx @@ -1,6 +1,5 @@ import React from "react"; import { test, expect } from "@playwright/experimental-ct-react17"; -import type { HooksConfig } from "../../../playwright/index"; import Loader from "."; import LoaderInsideButton from "./components.test-pw"; @@ -11,7 +10,6 @@ import { } from "../../../playwright/components/loader/index"; import { checkAccessibility, - checkGoldenOutline, getStyle, } from "../../../playwright/support/helper"; @@ -149,26 +147,11 @@ test.describe("check props for Loader component test", () => { expect(borderRadius).toEqual("50%"); }); - test("should render Loader inside the Button component and be able to focus it with focusRedesignOptOut set", async ({ + test("should render Loader inside the Button component and be able to focus it", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await loaderInsideButton(page).focus(); - - await checkGoldenOutline(loaderInsideButton(page)); - }); - - test("should render Loader inside the Button component and be able to focus it with focusRedesignOptOut not set", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: false }, - }); + await mount(); await loaderInsideButton(page).focus(); diff --git a/src/components/menu/menu-full-screen/menu-full-screen.style.ts b/src/components/menu/menu-full-screen/menu-full-screen.style.ts index 4f1ba45575..5c4aab2664 100644 --- a/src/components/menu/menu-full-screen/menu-full-screen.style.ts +++ b/src/components/menu/menu-full-screen/menu-full-screen.style.ts @@ -10,11 +10,6 @@ import { MenuType } from "../__internal__/menu.context"; import addFocusStyling from "../../../style/utils/add-focus-styling"; import { StyledLink } from "../../link/link.style"; -const oldFocusStyling = ` -outline: solid 3px var(--colorsSemanticFocus500); -box-shadow: none; -`; - const StyledMenuFullscreen = styled.div<{ transitionDuration: number; startPosition: "left" | "right"; @@ -69,7 +64,7 @@ const StyledMenuModal = styled.div<{ menuType: MenuType }>` } } - ${({ menuType, theme }) => css` + ${({ menuType }) => css` background-color: ${menuConfigVariants[menuType].background}; && { @@ -88,9 +83,7 @@ const StyledMenuModal = styled.div<{ menuType: MenuType }>` border-bottom-right-radius: var(--borderRadius050); border-top-right-radius: var(--borderRadius050); - ${!theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling()} } } } diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts index 77c8c9fdb3..347842cb82 100644 --- a/src/components/menu/menu-item/menu-item.style.ts +++ b/src/components/menu/menu-item/menu-item.style.ts @@ -80,10 +80,6 @@ const parsePadding = (props: Partial) => { } }; -const oldFocusStyling = ` - box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500); -`; - const StyledMenuItemWrapper = styled.a.attrs({ as: Link, })` @@ -122,13 +118,7 @@ const StyledMenuItemWrapper = styled.a.attrs({ a:focus, button:focus { - ${({ theme }) => - `${ - !theme.focusRedesignOptOut - ? addFocusStyling(true) - : /* istanbul ignore next */ oldFocusStyling - } - `} + ${addFocusStyling(true)} } :has([data-element="input"]) ${StyledContent} { diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx index 25b42d1a14..62c5765835 100644 --- a/src/components/menu/menu.pw.tsx +++ b/src/components/menu/menu.pw.tsx @@ -40,7 +40,6 @@ import { import { continuePressingTAB, continuePressingSHIFTTAB, - checkGoldenOutline, assertCssValueIsApproximately, checkAccessibility, waitForAnimationEnd, @@ -72,7 +71,6 @@ import { SubmenuMaxWidth, } from "./component.test-pw"; import { NavigationBarWithSubmenuAndChangingHeight } from "../navigation-bar/navigation-bar-test.stories"; -import { HooksConfig } from "../../../playwright"; const span = "span"; const div = "div"; @@ -1239,7 +1237,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => { }); // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip(`close icon has correct focus styling when focused and focusRedesignOptOut flag is false`, async ({ + test.skip(`close icon has correct focus styling when focused`, async ({ mount, page, }) => { @@ -1262,28 +1260,6 @@ test.describe("Prop tests for Menu Fullscreen component", () => { await expect(closeIcon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px"); }); - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip(`close icon has correct focus styling when focused and focusRedesignOptOut flag is true`, async ({ - mount, - page, - }) => { - await page.setViewportSize({ width: 1200, height: 800 }); - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const openMenuButton = page.getByRole("button", { name: "Menu" }).first(); - await openMenuButton.click(); - const dialog = page.getByRole("dialog"); - await waitForAnimationEnd(dialog); - - await page.keyboard.press("Tab"); - - const closeIcon = page.getByRole("button", { name: "Close" }); - await expect(closeIcon).toBeFocused(); - await checkGoldenOutline(closeIcon); - }); - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 test.skip(`should verify that inner Menu is available with tabbing and styles are correct`, async ({ mount, @@ -1508,7 +1484,7 @@ test.describe("Prop tests for Menu Fullscreen component", () => { await expect(item2).toBeFocused(); }); - test(`should focus the search icon and button on tab press when the current item has a Search input with searchButton and has a value, focusRedesignOptOut flag not set`, async ({ + test(`should focus the search icon and button on tab press when the current item has a Search input with searchButton and has a value`, async ({ mount, page, }) => { @@ -1535,34 +1511,6 @@ test.describe("Prop tests for Menu Fullscreen component", () => { await expect(item2).toBeFocused(); }); - test(`should focus the search icon and button on tab press when the current item has a Search input with searchButton and has a value, focusRedesignOptOut flag set`, async ({ - mount, - page, - }) => { - await mount( - , - { - hooksConfig: { focusRedesignOptOut: true }, - }, - ); - - const item = menuItem(page).first().locator("a"); - await item.focus(); - await page.keyboard.press("Tab"); - const searchInput = searchDefaultInput(page); - await expect(searchInput).toBeFocused(); - await page.keyboard.press("Tab"); - const crossIcon = searchCrossIcon(page).locator(".."); - await expect(crossIcon).toBeFocused(); - await page.keyboard.press("Tab"); - const button = searchButton(page); - await expect(button).toBeFocused(); - await checkGoldenOutline(button); - await page.keyboard.press("Tab"); - const item2 = menuItem(page).last().locator("a"); - await expect(item2).toBeFocused(); - }); - test(`should apply the expected hover styling to the search button`, async ({ mount, page, @@ -2259,46 +2207,7 @@ test.describe("Accessibility tests for Menu Fullscreen component", () => { }); test.describe("Styling, Scrolling & Navigation Bar Tests for Menu Component", () => { - test(`should render menu items with the expected focus styling when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await page.setViewportSize({ width: 1200, height: 800 }); - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const item1 = menuItem(page).first().locator("a"); - await item1.focus(); - await expect(item1).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px inset", - ); - - const item2 = menuItem(page).last().locator("button"); - await item2.focus(); - await expect(item2).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px inset", - ); - await item2.click(); - - const subMenu1 = submenu(page).last().locator("button").first(); - await subMenu1.focus(); - await expect(subMenu1).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px inset", - ); - - const subMenu2 = submenu(page).last().locator("a").first(); - await subMenu2.focus(); - await expect(subMenu2).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px inset", - ); - }); - - test(`should render menu items with the expected focus styling when focusRedesignOptOut is false`, async ({ + test(`should render menu items with the expected focus styling`, async ({ mount, page, }) => { diff --git a/src/components/multi-action-button/multi-action-button.pw.tsx b/src/components/multi-action-button/multi-action-button.pw.tsx index beab48c96c..cf705d250b 100644 --- a/src/components/multi-action-button/multi-action-button.pw.tsx +++ b/src/components/multi-action-button/multi-action-button.pw.tsx @@ -21,7 +21,6 @@ import { getComponent, getDataElementByValue, } from "../../../playwright/components"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS] as const; const keysToTrigger = ["Enter", "Space", "ArrowDown"] as const; @@ -1006,7 +1005,7 @@ test.describe("Focus outline and border radius tests for MultiActionButton", () await expect(listButton1).toHaveCSS("border-radius", "8px"); }); - test(`should render with the expected styling when the focusRedesignOptOut is false`, async ({ + test(`should render with the expected focus styling`, async ({ mount, page, }) => { @@ -1019,20 +1018,4 @@ test.describe("Focus outline and border radius tests for MultiActionButton", () "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", ); }); - - test(`should render with the expected styling when the focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const actionButton = page.getByRole("button"); - await actionButton.focus(); - await expect(actionButton).toHaveCSS( - "border", - "3px solid rgb(255, 188, 25)", - ); - }); }); diff --git a/src/components/multi-action-button/multi-action-button.style.ts b/src/components/multi-action-button/multi-action-button.style.ts index 98b09fd2b0..df2ea8e034 100644 --- a/src/components/multi-action-button/multi-action-button.style.ts +++ b/src/components/multi-action-button/multi-action-button.style.ts @@ -37,11 +37,7 @@ const StyledMultiActionButton = styled.div` &:focus { background-color: var(--colorsActionMajor700); - border: 3px solid - ${({ theme }) => - !theme.focusRedesignOptOut - ? "var(--colorsActionMajor700)" - : /* istanbul ignore next */ "var(--colorsSemanticFocus500)"}; + border: 3px solid var(--colorsActionMajor700); outline: none; margin: 0 -1px; @@ -63,12 +59,6 @@ const StyledMultiActionButton = styled.div` } &:focus { - ${({ theme }) => - /* istanbul ignore next */ - theme.focusRedesignOptOut && - css` - border-color: var(--colorsSemanticFocus500); - `} margin: 0 -1px; } `} diff --git a/src/components/pager/pager.pw.tsx b/src/components/pager/pager.pw.tsx index bc7a73f57f..47f01d520e 100644 --- a/src/components/pager/pager.pw.tsx +++ b/src/components/pager/pager.pw.tsx @@ -28,7 +28,6 @@ import { selectListWrapper, inputIconToggle, } from "../../../playwright/components/pager/index"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; @@ -59,10 +58,7 @@ const recordsDiff = [ const keysToTrigger = ["Enter", "Space"] as const; test.describe("Styling tests", () => { - test(`should have the expected styling when the focusRedesignOptOut is false`, async ({ - mount, - page, - }) => { + test(`should have the expected focus styling`, async ({ mount, page }) => { await mount(); await page.keyboard.press("Tab"); @@ -78,23 +74,6 @@ test.describe("Styling tests", () => { ); }); - test(`should have the expected styling when the focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await page.keyboard.press("Tab"); - const inputParent = currentPageInput(page).locator(".."); - - await expect(inputParent).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - test(`when used inside a Form, the current page input box should have no bottom margin`, async ({ mount, page, diff --git a/src/components/pill/pill.pw.tsx b/src/components/pill/pill.pw.tsx index 1463c40689..8cb2bc9196 100644 --- a/src/components/pill/pill.pw.tsx +++ b/src/components/pill/pill.pw.tsx @@ -294,7 +294,7 @@ test.describe("should render Pill component with props", () => { test.describe("should check focus outlines and border radius", () => { ([small, medium, large, extraLarge] as PillProps["size"][]).forEach( (size) => { - test(`should have the expected styling when size is ${size} and focusRedesignOptOut is false`, async ({ + test(`should have the expected focus styling when size is ${size}`, async ({ mount, page, }) => { @@ -318,31 +318,6 @@ test.describe("should check focus outlines and border radius", () => { }, ); - ([small, medium, large, extraLarge] as PillProps["size"][]).forEach( - (size) => { - test(`should have the expected styling when size is ${size} and focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount( - {}}> - Pill - , - { - hooksConfig: { focusRedesignOptOut: true }, - }, - ); - - const elementLocator = pillCloseIcon(page); - await elementLocator.focus(); - await expect(elementLocator).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px", - ); - }); - }, - ); - ([small, medium, large, extraLarge] as PillProps["size"][]).forEach( (size) => { test(`should have the expected border radius styling when size is ${size}`, async ({ diff --git a/src/components/pill/pill.style.ts b/src/components/pill/pill.style.ts index e09f93a212..ea556951d8 100644 --- a/src/components/pill/pill.style.ts +++ b/src/components/pill/pill.style.ts @@ -168,13 +168,6 @@ const StyledPill = styled.span` line-height: 16px; &:focus { - ${theme.focusRedesignOptOut && - /* istanbul ignore next */ - css` - outline: none; - box-shadow: 0 0 0 3px var(--colorsSemanticFocus500); - `} - background-color: ${buttonFocusColor}; border-radius: var(--borderRadius000) var(--borderRadius025) var(--borderRadius025) var(--borderRadius000); diff --git a/src/components/search/search.pw.tsx b/src/components/search/search.pw.tsx index 85452a5461..904785f66a 100644 --- a/src/components/search/search.pw.tsx +++ b/src/components/search/search.pw.tsx @@ -1,6 +1,5 @@ import { expect, test } from "@playwright/experimental-ct-react17"; import React from "react"; -import { HooksConfig } from "../../../playwright"; import { getDataElementByValue, tooltipPreview, @@ -33,7 +32,7 @@ const validationTypes: [string, string][] = [ ]; test.describe("When focused", () => { - test("should have the expected styling for the input when the focusRedesignOptOut is false", async ({ + test("should have the expected styling for the input", async ({ mount, page, }) => { @@ -50,35 +49,11 @@ test.describe("When focused", () => { ); }); - test("should have the expected styling for the input when the focusRedesignOptOut is true", async ({ + test("should have the expected styling for the search icon", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - const searchDefaultInputElement = searchDefaultInput(page); - await searchDefaultInputElement.focus(); - const searchDefaultInputElementParent = - searchDefaultInputElement.locator(".."); - await expect(searchDefaultInputElementParent).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - - test("should have the expected styling for the search icon when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: false, - }, - }); + await mount(); const searchDefaultInputElement = searchDefaultInput(page); await searchDefaultInputElement.clear(); @@ -94,39 +69,11 @@ test.describe("When focused", () => { ); }); - test("should have the expected styling for the search icon when the focusRedesignOptOut is true", async ({ + test("should have the expected styling for the cross icon", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - const searchDefaultInputElement = searchDefaultInput(page); - await searchDefaultInputElement.clear(); - await searchDefaultInputElement.fill(testDataStandard); - const searchButtonElement = searchButton(page); - await searchButtonElement.click({ - force: true, - }); - - await expect(searchButtonElement).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - - test("should have the expected styling for the cross icon when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: false, - }, - }); + await mount(); const searchDefaultInputElement = searchDefaultInput(page); await searchDefaultInputElement.clear(); @@ -139,28 +86,6 @@ test.describe("When focused", () => { "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", ); }); - - test("should have the expected styling for the cross icon when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - const searchDefaultInputElement = searchDefaultInput(page); - await searchDefaultInputElement.clear(); - await searchDefaultInputElement.fill(testDataStandard); - await searchDefaultInputElement.press("Tab"); - const searchCrossIconElementParent = searchCrossIcon(page).locator(".."); - - await expect(searchCrossIconElementParent).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); }); test.describe("Prop tests for Search component", () => { diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx index ac1847eadb..1193fe6d81 100644 --- a/src/components/select/filterable-select/filterable-select.pw.tsx +++ b/src/components/select/filterable-select/filterable-select.pw.tsx @@ -47,7 +47,6 @@ import { selectOptionByText, selectResetButton, } from "../../../../playwright/components/select"; -import { HooksConfig } from "../../../../playwright"; import { assertCssValueIsApproximately, checkAccessibility, @@ -64,41 +63,22 @@ const icon = "add"; const keyToTrigger = ["ArrowDown", "ArrowUp", "Home", "End"] as const; const listOption = "Amber"; -test.describe("When focused", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - const inputElement = commonDataElementInputPreview(page); - await inputElement.focus(); - await expect(inputElement.locator("..")).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(inputElement.locator("..")).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); +test("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - const inputElement = commonDataElementInputPreview(page); - await inputElement.focus(); - await expect(inputElement.locator("..")).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); + const inputElement = commonDataElementInputPreview(page); + await inputElement.focus(); + await expect(inputElement.locator("..")).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(inputElement.locator("..")).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("FilterableSelect component", () => { diff --git a/src/components/select/multi-select/multi-select.pw.tsx b/src/components/select/multi-select/multi-select.pw.tsx index 01a6f2d5bf..7e8272cb05 100644 --- a/src/components/select/multi-select/multi-select.pw.tsx +++ b/src/components/select/multi-select/multi-select.pw.tsx @@ -50,7 +50,6 @@ import { selectOptionByText, selectResetButton, } from "../../../../playwright/components/select"; -import { HooksConfig } from "../../../../playwright"; import { assertCssValueIsApproximately, checkAccessibility, @@ -77,42 +76,22 @@ const keyToTrigger = [ "Enter", ] as const; -test.describe("When focused", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - const inputElement = commonDataElementInputPreview(page); - await inputElement.focus(); - await expect(inputElement.locator("..")).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(inputElement.locator("..")).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); +test("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); - const selectInputElement = commonDataElementInputPreview(page); - await selectInputElement.focus(); - await expect(selectInputElement.locator("..")).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); + const inputElement = commonDataElementInputPreview(page); + await inputElement.focus(); + await expect(inputElement.locator("..")).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(inputElement.locator("..")).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("MultiSelect component", () => { diff --git a/src/components/select/simple-select/simple-select.pw.tsx b/src/components/select/simple-select/simple-select.pw.tsx index c3ecc511eb..f1268dc298 100644 --- a/src/components/select/simple-select/simple-select.pw.tsx +++ b/src/components/select/simple-select/simple-select.pw.tsx @@ -48,7 +48,6 @@ import { selectOptionByText, selectText, } from "../../../../playwright/components/select"; -import { HooksConfig } from "../../../../playwright"; import { checkAccessibility, assertCssValueIsApproximately, @@ -61,41 +60,22 @@ const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const testPropValue = CHARACTERS.STANDARD; const keyToTrigger = ["ArrowDown", "ArrowUp", "Space", "Home", "End"] as const; -test.describe("When focused", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - const selectInputElement = commonDataElementInputPreview(page); - await selectInputElement.focus(); - await expect(selectInputElement.locator("..")).toHaveCSS( - "box-shadow", - "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", - ); - await expect(selectInputElement.locator("..")).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - const selectInputElement = commonDataElementInputPreview(page); - await selectInputElement.focus(); - await expect(selectInputElement.locator("..")).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); +test("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); + + const selectInputElement = commonDataElementInputPreview(page); + await selectInputElement.focus(); + await expect(selectInputElement.locator("..")).toHaveCSS( + "box-shadow", + "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px", + ); + await expect(selectInputElement.locator("..")).toHaveCSS( + "outline", + "rgba(0, 0, 0, 0) solid 3px", + ); }); test.describe("SimpleSelect component", () => { diff --git a/src/components/simple-color-picker/simple-color-picker.pw.tsx b/src/components/simple-color-picker/simple-color-picker.pw.tsx index b18933123b..88854926d8 100644 --- a/src/components/simple-color-picker/simple-color-picker.pw.tsx +++ b/src/components/simple-color-picker/simple-color-picker.pw.tsx @@ -1,6 +1,5 @@ import { expect, test } from "@playwright/experimental-ct-react17"; import React from "react"; -import { HooksConfig } from "../../../playwright"; import { commonDataElementInputPreview, getDataElementByValue, @@ -75,45 +74,20 @@ const indexes = Array.from({ length: colors.length, }).map((_, index) => index); -test.describe("When SimpleColorPicker is focused", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { - await mount(); +test("should have the expected styling when focused", async ({ + mount, + page, +}) => { + await mount(); - await simpleColorPickerInput(page, 0).focus(); + await simpleColorPickerInput(page, 0).focus(); - const focusedColor = simpleColorDiv(page, 0); - await expect(focusedColor).toHaveCSS( - "box-shadow", - "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset", - ); - await expect(focusedColor).toHaveCSS( - "outline", - "rgba(0, 0, 0, 0) solid 3px", - ); - }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - await simpleColorPickerInput(page, 0).focus(); - - const focusedColor = simpleColorDiv(page, 0); - - await expect(focusedColor).toHaveCSS( - "box-shadow", - "rgb(255, 255, 255) 0px 0px 0px 2px inset", - ); - }); + const focusedColor = simpleColorDiv(page, 0); + await expect(focusedColor).toHaveCSS( + "box-shadow", + "rgba(0, 0, 0, 0.9) 0px 0px 0px 3px inset, rgb(255, 188, 25) 0px 0px 0px 6px inset", + ); + await expect(focusedColor).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px"); }); test.describe("Check functionality for SimpleColorPicker component", () => { diff --git a/src/components/simple-color-picker/simple-color/simple-color.style.ts b/src/components/simple-color-picker/simple-color/simple-color.style.ts index 7eb18d6000..a53e7cd9a3 100644 --- a/src/components/simple-color-picker/simple-color/simple-color.style.ts +++ b/src/components/simple-color-picker/simple-color/simple-color.style.ts @@ -17,11 +17,6 @@ export const StyledSimpleColor = styled.div` } `; -const oldFocusStyling = ` - box-shadow: inset 0px 0px 0px var(--borderWidth200) var(--colorsUtilityYang100); - border: 2px solid var(--colorsSemanticFocus500); -`; - export const StyledColorSampleBox = styled.div<{ color: string }>` height: 100%; width: 100%; @@ -29,9 +24,6 @@ export const StyledColorSampleBox = styled.div<{ color: string }>` display: flex; align-items: center; justify-content: center; - ${({ theme }) => - /* istanbul ignore next */ - theme.focusRedesignOptOut && "border: 2px solid transparent;"} ${({ color }) => color !== "transparent" && @@ -65,18 +57,7 @@ export const StyledSimpleColorInput = styled(Input)` } &:focus + ${StyledColorSampleBox} { - ${({ theme }) => css` - ${theme.focusRedesignOptOut && - /* istanbul ignore next */ - ` - ${oldFocusStyling} - `} - - ${!theme.focusRedesignOptOut && - ` - ${addFocusStyling(true)} - `} - `} + ${addFocusStyling(true)} } `; diff --git a/src/components/split-button/split-button-toggle.style.ts b/src/components/split-button/split-button-toggle.style.ts index 93fefe79d2..fcde5b2cfc 100644 --- a/src/components/split-button/split-button-toggle.style.ts +++ b/src/components/split-button/split-button-toggle.style.ts @@ -19,7 +19,7 @@ type StyledSplitButtonToggleProps = { const StyledSplitButtonToggle = styled( StyledButton, )` - ${({ buttonType, disabled, displayed, size, theme }) => css` + ${({ buttonType, disabled, displayed, size }) => css` border-top-left-radius: var(--borderRadius000); border-bottom-left-radius: var(--borderRadius000); @@ -58,16 +58,6 @@ const StyledSplitButtonToggle = styled( ${StyledButton} + & { margin-left: 0; - - ${buttonType === "secondary" && - /* istanbul ignore next */ - theme.focusRedesignOptOut && - /* istanbul ignore next */ - css` - &:focus { - margin-left: -3px; - } - `} } ${StyledButton} + & ${StyledIcon} { diff --git a/src/components/split-button/split-button.pw.tsx b/src/components/split-button/split-button.pw.tsx index d28fe2814e..c237d1b3b3 100644 --- a/src/components/split-button/split-button.pw.tsx +++ b/src/components/split-button/split-button.pw.tsx @@ -29,16 +29,12 @@ import { import { accordionDefaultTitle } from "../../../playwright/components/accordion"; import { alertDialogPreview } from "../../../playwright/components/dialog"; import { CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const keyToTrigger = ["Enter", "Space", "ArrowDown", "ArrowUp"] as const; test.describe("Styling tests", () => { - test(`should render with the expected styling when the focusRedesignOptOut is false`, async ({ - mount, - page, - }) => { + test(`should render with the expected styling`, async ({ mount, page }) => { await mount(); await mainButton(page).focus(); @@ -61,26 +57,6 @@ test.describe("Styling tests", () => { ); }); - test(`should render with the expected styling when the focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await mainButton(page).focus(); - await expect(mainButton(page)).toHaveCSS( - "border", - "3px solid rgb(255, 188, 25)", - ); - await splitToggleButton(page).focus(); - await expect(splitToggleButton(page)).toHaveCSS( - "border", - "3px solid rgb(255, 188, 25)", - ); - }); - ( [ ["primary", "rgb(0, 126, 69)", "rgb(255, 255, 255)", "rgba(0, 0, 0, 0)"], diff --git a/src/components/split-button/split-button.style.ts b/src/components/split-button/split-button.style.ts index e169d3dbf0..45cc296961 100644 --- a/src/components/split-button/split-button.style.ts +++ b/src/components/split-button/split-button.style.ts @@ -1,4 +1,4 @@ -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { margin } from "styled-system"; import StyledButton from "../button/button.style"; import baseTheme from "../../style/themes/base"; @@ -16,21 +16,8 @@ const StyledSplitButton = styled.div` & > ${StyledButton} { margin: 0; &:focus { - ${({ theme }) => css` - ${theme.focusRedesignOptOut && - /* istanbul ignore next */ - ` - border: 3px solid var(--colorsSemanticFocus500); - margin: -1px; - outline: none; - `} - - ${!theme.focusRedesignOptOut && - ` - position: relative; - z-index: 1; - `} - `} + position: relative; + z-index: 1; } } `; diff --git a/src/components/switch/switch.pw.tsx b/src/components/switch/switch.pw.tsx index 429f36caf3..3a69ac376c 100644 --- a/src/components/switch/switch.pw.tsx +++ b/src/components/switch/switch.pw.tsx @@ -1,6 +1,5 @@ import React from "react"; import { test, expect } from "@playwright/experimental-ct-react17"; -import type { HooksConfig } from "../../../playwright/index"; import Box from "../box"; import Switch, { SwitchProps } from "."; import { @@ -39,13 +38,11 @@ const testData = CHARACTERS.STANDARD; test.describe("Prop tests for Switch component", () => { // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip("should have the expected styling when focused and the focusRedesignOptOut is false", async ({ + test.skip("should have the expected styling when focused", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: false }, - }); + await mount(); await switchInput(page).click(); @@ -60,23 +57,6 @@ test.describe("Prop tests for Switch component", () => { ); }); - // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 - test.skip("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await switchInput(page).click(); - - await expect(switchStyling(page)).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); - [ CHARACTERS.STANDARD, CHARACTERS.DIACRITICS, diff --git a/src/components/switch/switch.style.ts b/src/components/switch/switch.style.ts index 4d3abbe18f..e415de524a 100644 --- a/src/components/switch/switch.style.ts +++ b/src/components/switch/switch.style.ts @@ -27,10 +27,6 @@ interface StyledHintTextProps { isDarkBackground?: boolean; } -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - export const ErrorBorder = styled.span` ${({ reverse, @@ -73,13 +69,7 @@ export const StyledHintText = styled.div` `; const StyledSwitch = styled.div` - ${({ - fieldHelpInline, - labelInline, - reverse, - size, - theme, - }: StyledSwitchProps) => css` + ${({ fieldHelpInline, labelInline, reverse, size }: StyledSwitchProps) => css` ${margin} ${FieldLineStyle} { display: flex; @@ -114,9 +104,7 @@ const StyledSwitch = styled.div` ${HiddenCheckableInputStyle}:not([disabled]) { &:focus ~ ${StyledSwitchSlider} { - ${!theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling()} } } diff --git a/src/components/tabs/__internal__/tab-title/tab-title.style.ts b/src/components/tabs/__internal__/tab-title/tab-title.style.ts index ae0933b442..274564203c 100644 --- a/src/components/tabs/__internal__/tab-title/tab-title.style.ts +++ b/src/components/tabs/__internal__/tab-title/tab-title.style.ts @@ -415,11 +415,8 @@ const tabTitleStyles = css< } ` } - - ${({ theme }) => - ` &:focus { - outline: 4px solid ${!theme.focusRedesignOptOut ? "black" : /* istanbul ignore next */ "var(--colorsSemanticFocus500)"}; + outline: 4px solid black; top: -2px; z-index: 6; @@ -439,9 +436,7 @@ const tabTitleStyles = css< ` } - ${ - !theme.focusRedesignOptOut - ? `::before { + ::before { content: ""; position: absolute; top: 0; @@ -478,12 +473,10 @@ const tabTitleStyles = css< right: 1px; ` } - }` - : /* istanbul ignore next */ "" + } } } - `} - + ${ position === "left" && css` diff --git a/src/components/tabs/tabs.pw.tsx b/src/components/tabs/tabs.pw.tsx index 38023343c2..13d03a6687 100644 --- a/src/components/tabs/tabs.pw.tsx +++ b/src/components/tabs/tabs.pw.tsx @@ -35,7 +35,6 @@ import { assertCssValueIsApproximately, getStyle, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; const validationTypes = ["error", "warning", "info"] as const; @@ -685,37 +684,18 @@ test.describe("Tabs component", () => { }); }); - test.describe("focus styles", () => { - [1, 2, 3, 4, 5].forEach((id) => { - test(`should render Tab ${id} with expected styles when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await tabById(page, id).focus(); - await expect(tabById(page, id)).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 4px", - ); - }); - }); - - [1, 2, 3, 4, 5].forEach((id) => { - test(`should render Tab ${id} with expected styles when focusRedesignOptOut is false`, async ({ - mount, - page, - }) => { - await mount(); - - await tabById(page, id).focus(); - await expect(tabById(page, id)).toHaveCSS( - "outline", - "rgb(0, 0, 0) solid 4px", - ); - }); + [1, 2, 3, 4, 5].forEach((id) => { + test(`should render Tab ${id} with expected focus styling`, async ({ + mount, + page, + }) => { + await mount(); + + await tabById(page, id).focus(); + await expect(tabById(page, id)).toHaveCSS( + "outline", + "rgb(0, 0, 0) solid 4px", + ); }); }); diff --git a/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.ts b/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.ts index d27cd6adbc..64d88e1acf 100644 --- a/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.ts +++ b/src/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.ts @@ -14,23 +14,12 @@ const StyledToolbarButton = styled.button.attrs({ type: "button" })<{ border: none; cursor: pointer; - ${({ isActive, theme }) => css` + ${({ isActive }) => css` :focus, :active { z-index: 1; position: relative; - - ${theme.focusRedesignOptOut && - /* istanbul ignore next */ - css` - outline: 2px solid var(--colorsSemanticFocus500); - outline-offset: -2px; - `} - - ${!theme.focusRedesignOptOut && - css` - ${addFocusStyling()} - `} + ${addFocusStyling()} } :hover { diff --git a/src/components/text-editor/text-editor.pw.tsx b/src/components/text-editor/text-editor.pw.tsx index 3d1cd95bdb..7616e2aed7 100644 --- a/src/components/text-editor/text-editor.pw.tsx +++ b/src/components/text-editor/text-editor.pw.tsx @@ -22,13 +22,11 @@ import { visuallyHiddenCharacterCount, } from "../../../playwright/components"; import { - checkGoldenOutline, verifyRequiredAsteriskForLabel, checkAccessibility, getStyle, } from "../../../playwright/support/helper"; import { VALIDATION, CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; const textForInput = "Testing is awesome"; const linkText = "https://carbon.sage.com"; @@ -640,7 +638,7 @@ test.describe("Prop tests", () => { }); ["error", "warning", "info"].forEach((validationType) => { - test(`has correct styles when there is ${validationType} validation and the editor is focused when new validation styles are used`, async ({ + test(`has correct styles when there is ${validationType} validation and the editor is focused`, async ({ mount, page, }) => { @@ -658,33 +656,6 @@ test.describe("Prop tests", () => { }); }); - [ - ["error", "2px"], - ["warning", "1px"], - ["info", "1px"], - ].forEach(([validationType, outlineOffset]) => { - test(`has correct styles when there is ${validationType} validation and the editor is focused when focusRedesignOptOut flag is true`, async ({ - mount, - page, - }) => { - await mount( - - - , - ); - await textEditorInput(page).focus(); - - await expect(textEditorContainer(page).locator("..")).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - await expect(textEditorContainer(page).locator("..")).toHaveCSS( - "outline-offset", - outlineOffset, - ); - }); - }); - [ [2, 42], [4, 84], @@ -770,34 +741,7 @@ test.describe("Styling tests", () => { ); }); - test(`should render with the expected styling when focusRedesignOptOut is true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await textEditorInput(page).focus(); - await expect(textEditorContainer(page).locator("..")).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - - await textEditorToolbar(page, "bold").focus(); - await checkGoldenOutline(textEditorToolbar(page, "bold"), "2px"); - - await textEditorToolbar(page, "italic").focus(); - await checkGoldenOutline(textEditorToolbar(page, "italic"), "2px"); - - await textEditorToolbar(page, "bullet-list").focus(); - await checkGoldenOutline(textEditorToolbar(page, "bullet-list"), "2px"); - - await textEditorToolbar(page, "number-list").focus(); - await checkGoldenOutline(textEditorToolbar(page, "number-list"), "2px"); - }); - - test(`should render with the expected styling when focusRedesignOptOut is false`, async ({ + test(`should render with the expected focus styling`, async ({ mount, page, }) => { diff --git a/src/components/text-editor/text-editor.style.ts b/src/components/text-editor/text-editor.style.ts index 86c3f311e3..ef305f549d 100644 --- a/src/components/text-editor/text-editor.style.ts +++ b/src/components/text-editor/text-editor.style.ts @@ -68,18 +68,13 @@ const StyledEditorOutline = styled.div<{ isFocused?: boolean; hasError?: boolean; }>` - ${({ isFocused, hasError, theme }) => css` + ${({ isFocused, hasError }) => css` border-radius: var(--borderRadius050); outline: none; ${isFocused && css` - ${!theme.focusRedesignOptOut - ? addFocusStyling() - : ` - outline: 3px solid var(--colorsSemanticFocus500); - outline-offset: ${hasError ? "2px" : "1px"}; - `} + ${addFocusStyling()} `} `} `; diff --git a/src/components/text-editor/text-editor.test.tsx b/src/components/text-editor/text-editor.test.tsx index 5240665db3..2efc0d583c 100644 --- a/src/components/text-editor/text-editor.test.tsx +++ b/src/components/text-editor/text-editor.test.tsx @@ -529,57 +529,6 @@ test.each(["error", "warning", "info"])( }, ); -// coverage only - focus styles, both with and without the optout flag, are tested in Playwright -test("has correct styles when focused and `focusRedesignOptOut` is true", () => { - render( - - {}} - /> - , - ); - - act(() => { - screen.getByRole("textbox", { name: "Text Editor Label" }).focus(); - }); - - expect(screen.getByTestId("editor-outline")).toHaveStyleRule( - "outline", - "3px solid var(--colorsSemanticFocus500)", - ); - expect(screen.getByTestId("editor-outline")).toHaveStyle({ - "outline-offset": "1px", - }); -}); - -// coverage only - focus styles with error are tested in Playwright -test("has correct styles when focused and `focusRedesignOptOut` is true when there is an error", () => { - render( - - {}} - error="error" - /> - , - ); - - act(() => { - screen.getByRole("textbox", { name: "Text Editor Label" }).focus(); - }); - - expect(screen.getByTestId("editor-outline")).toHaveStyleRule( - "outline", - "3px solid var(--colorsSemanticFocus500)", - ); - expect(screen.getByTestId("editor-outline")).toHaveStyle({ - "outline-offset": "2px", - }); -}); - // for coverage only - this behaviour doesn't work properly in jsdom (note incorrect order of text being entered - the style // is also absent so we don't assert it). This behaviour is tested properly in Playwright test("can enter text after using the keyboard shortcut for bold styling", async () => { diff --git a/src/components/textarea/textarea.pw.tsx b/src/components/textarea/textarea.pw.tsx index 44aef93142..a9a7cd037f 100644 --- a/src/components/textarea/textarea.pw.tsx +++ b/src/components/textarea/textarea.pw.tsx @@ -2,7 +2,6 @@ import { expect, test } from "@playwright/experimental-ct-react17"; import { TextareaProps } from "components/textarea"; import React from "react"; -import { HooksConfig } from "../../../playwright"; import { characterCount, fieldHelpPreview, @@ -23,7 +22,6 @@ import { CHARACTERS, VALIDATION } from "../../../playwright/support/constants"; import { assertCssValueIsApproximately, checkAccessibility, - checkGoldenOutline, verifyRequiredAsteriskForLabel, waitForAnimationEnd, } from "../../../playwright/support/helper"; @@ -403,15 +401,11 @@ test.describe("Props tests for Textarea component", () => { }); }); - test("should render with autoFocus prop and correct styling when focusRedesignOptOut is false", async ({ + test("should render with autoFocus prop and correct styling", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: false, - }, - }); + await mount(); const textareaChildrenElement = textareaChildren(page); await expect(textareaChildrenElement).toBeFocused(); @@ -422,20 +416,6 @@ test.describe("Props tests for Textarea component", () => { ); }); - test("should render with autoFocus prop and correct styling when focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - await expect(textareaChildren(page)).toBeFocused(); - await checkGoldenOutline(textarea(page)); - }); - test("should render with readOnly prop", async ({ mount, page }) => { await mount(); diff --git a/src/components/textbox/textbox.pw.tsx b/src/components/textbox/textbox.pw.tsx index a56bd78212..b844000010 100644 --- a/src/components/textbox/textbox.pw.tsx +++ b/src/components/textbox/textbox.pw.tsx @@ -1,11 +1,9 @@ import { expect, test } from "@playwright/experimental-ct-react17"; import { TextboxProps } from "components/textbox"; import React from "react"; -import { HooksConfig } from "../../../playwright"; import { getDesignTokensByCssProperty, checkAccessibility, - checkGoldenOutline, verifyRequiredAsteriskForLabel, getStyle, assertCssValueIsApproximately, @@ -426,13 +424,11 @@ test.describe("Prop checks for Textbox component", () => { }); }); - test("should render with autoFocus prop and correct styling when focusRedesignOpt out is false", async ({ + test("should render with autoFocus prop and correct focus styling", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: false }, - }); + await mount(); await expect(textboxInput(page)).toBeFocused(); await expect(textbox(page)).toHaveCSS( @@ -445,18 +441,6 @@ test.describe("Prop checks for Textbox component", () => { ); }); - test("should render with autoFocus prop and correct styling when focusRedesignOpt out is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await expect(textboxInput(page)).toBeFocused(); - await checkGoldenOutline(textbox(page)); - }); - test("should render with readOnly prop", async ({ mount, page }) => { await mount(); diff --git a/src/components/tile-select/tile-select.pw.tsx b/src/components/tile-select/tile-select.pw.tsx index ccfbe9e2d1..f8794a3487 100644 --- a/src/components/tile-select/tile-select.pw.tsx +++ b/src/components/tile-select/tile-select.pw.tsx @@ -10,7 +10,6 @@ import { checkAccessibility, containsClass, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; import { TileSelectComponent, MultiTileSelectGroupComponent, @@ -39,10 +38,7 @@ import { CHARACTERS } from "../../../playwright/support/constants"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; test.describe("check Focus Outline & Border Radius", () => { - test("should have the expected styling when the focusRedesignOptOut is false", async ({ - mount, - page, - }) => { + test("should have the expected focus styling", async ({ mount, page }) => { await mount(); const styleElement = inputElement(page); @@ -58,26 +54,6 @@ test.describe("check Focus Outline & Border Radius", () => { "rgba(0, 0, 0, 0) solid 3px", ); }); - - test("should have the expected styling when the focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { - focusRedesignOptOut: true, - }, - }); - - const styleElement = inputElement(page); - await styleElement.focus(); - const focusedElement = inputElement(page).locator(".."); - - await expect(focusedElement).toHaveCSS( - "outline", - "rgb(255, 188, 25) solid 3px", - ); - }); }); test.describe("check props for TileSelect component", () => { diff --git a/src/components/tile-select/tile-select.style.ts b/src/components/tile-select/tile-select.style.ts index 17f62670dd..1254e3182d 100644 --- a/src/components/tile-select/tile-select.style.ts +++ b/src/components/tile-select/tile-select.style.ts @@ -64,15 +64,11 @@ const StyledTileSelect = styled.div<{ `} `; -const oldFocusStyling = ` - outline: solid 3px var(--colorsSemanticFocus500); -`; - const StyledFocusWrapper = styled.div<{ checked?: boolean; hasFocus: boolean; }>` - ${({ checked, hasFocus, theme }) => css` + ${({ checked, hasFocus }) => css` position: relative; border: 1px solid var(--colorsActionMinor250); border-radius: var(--borderRadius100); @@ -86,9 +82,7 @@ const StyledFocusWrapper = styled.div<{ ${hasFocus && css` - ${!theme.focusRedesignOptOut - ? addFocusStyling() - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling()} z-index: 15; `} `} diff --git a/src/components/toast/toast.pw.tsx b/src/components/toast/toast.pw.tsx index a079945b3a..b35087d795 100644 --- a/src/components/toast/toast.pw.tsx +++ b/src/components/toast/toast.pw.tsx @@ -15,7 +15,6 @@ import { import { alertDialogPreview } from "../../../playwright/components/dialog"; import { TOAST_COLORS } from "./toast.config"; -import { HooksConfig } from "../../../playwright"; import { getDataComponentByValue, button, @@ -164,14 +163,11 @@ test.describe("Toast component", () => { await expect(toastComponent(page)).toHaveCSS("max-width", "250px"); }); - test("should render with focused close icon and correct style when focusRedesignOptOut is false", async ({ + test("should render with focused close icon and correct style", async ({ mount, page, }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: false }, - }); - + await mount(); const icon = closeIconButton(page); await icon.focus(); @@ -182,20 +178,6 @@ test.describe("Toast component", () => { await expect(icon).toHaveCSS("outline", "rgba(0, 0, 0, 0) solid 3px"); }); - test("should render with focused close icon and correct style when focusRedesignOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - const icon = closeIconButton(page); - await icon.focus(); - - await expect(icon).toHaveCSS("outline", "rgb(255, 188, 25) solid 3px"); - }); - (["left", "center", "right"] as const).forEach((align) => { test(`should render with align prop set to ${align}`, async ({ mount, diff --git a/src/components/vertical-menu/vertical-menu.pw.tsx b/src/components/vertical-menu/vertical-menu.pw.tsx index 0fcfe3ae58..1839f21be0 100644 --- a/src/components/vertical-menu/vertical-menu.pw.tsx +++ b/src/components/vertical-menu/vertical-menu.pw.tsx @@ -17,7 +17,6 @@ import { } from "./components.test-pw"; import VerticalMenuTrigger from "./vertical-menu-trigger/vertical-menu-trigger.component"; import { - checkGoldenOutline, assertCssValueIsApproximately, checkAccessibility, waitForAnimationEnd, @@ -30,7 +29,6 @@ import { } from "../../../playwright/components/vertical-menu"; import { closeIconButton } from "../../../playwright/components/index"; import { CHARACTERS } from "../../../playwright/support/constants"; -import { HooksConfig } from "../../../playwright"; const specialCharacters = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const testData = CHARACTERS.STANDARD; @@ -532,23 +530,7 @@ test.describe("with beforeEach for VerticalMenuFullScreen", () => { ).toBeFocused(); }); - test(`should check the focus styling, focusRedesignOptOut true`, async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { focusRedesignOptOut: true }, - }); - - await verticalMenuItem(page).first().focus(); - await page.keyboard.press("Tab"); - await checkGoldenOutline(verticalMenuItem(page).nth(1)); - }); - - test(`should check the focus styling, focusRedesignOptOut false`, async ({ - mount, - page, - }) => { + test(`should check the focus styling`, async ({ mount, page }) => { await mount(); await verticalMenuItem(page).first().focus(); diff --git a/src/components/vertical-menu/vertical-menu.style.ts b/src/components/vertical-menu/vertical-menu.style.ts index d08f1a29e4..122b5f9d74 100644 --- a/src/components/vertical-menu/vertical-menu.style.ts +++ b/src/components/vertical-menu/vertical-menu.style.ts @@ -18,11 +18,6 @@ interface StyledVerticalMenuProps extends PaddingProps { height: string; } -const oldFocusStyling = ` - outline: 3px solid var(--colorsSemanticFocus500); - outline-offset: -3px; -`; - export const StyledVerticalMenuItem = styled.div` min-height: ${({ height }) => height}; width: 100%; @@ -45,10 +40,7 @@ export const StyledVerticalMenuItem = styled.div` } &:focus { - ${({ theme }) => - !theme.focusRedesignOptOut - ? addFocusStyling(true) - : /* istanbul ignore next */ oldFocusStyling} + ${addFocusStyling(true)} } ${({ active }) =>