From 83e0abdefbbde4ddf019adfa88b4fac9c792ba95 Mon Sep 17 00:00:00 2001 From: "tom.davies" Date: Thu, 7 Nov 2024 12:58:13 +0000 Subject: [PATCH 1/2] test(advanced-color-picker, simple-color-picker, tile-select): use toBeChecked assertion --- .../advanced-color-picker.pw.tsx | 15 +++-------- .../simple-color-picker.pw.tsx | 26 +++++-------------- src/components/tile-select/tile-select.pw.tsx | 24 +++++------------ 3 files changed, 16 insertions(+), 49 deletions(-) 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 9f80807784..6ae175cb2d 100644 --- a/src/components/advanced-color-picker/advanced-color-picker.pw.tsx +++ b/src/components/advanced-color-picker/advanced-color-picker.pw.tsx @@ -70,10 +70,7 @@ test.describe("should render AdvancedColorPicker component and check functionali const picker = simpleColorPickerInput(page, 7); await picker.press(key); - await expect(simpleColorPickerInput(page, index)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, index)).toBeChecked(); }); }); @@ -87,10 +84,7 @@ test.describe("should render AdvancedColorPicker component and check functionali await picker.press("ArrowUp"); const newPicker = simpleColorPickerInput(page, 2); await newPicker.press("ArrowDown"); - await expect(simpleColorPickerInput(page, 7)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, 7)).toBeChecked(); }); test("should regain focus on color after second tab", async ({ @@ -130,10 +124,7 @@ test.describe("should render AdvancedColorPicker component and check functionali const input = simpleColorPickerInput(page, index); await input.click(); - await expect(simpleColorPickerInput(page, index)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, index)).toBeChecked(); }); }); }); 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 be7611bd03..b18933123b 100644 --- a/src/components/simple-color-picker/simple-color-picker.pw.tsx +++ b/src/components/simple-color-picker/simple-color-picker.pw.tsx @@ -167,7 +167,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await lastInput.press("ArrowRight"); const firstInput = simpleColorPickerInput(page, 0); - await expect(firstInput).toHaveAttribute("aria-checked", "true"); + await expect(firstInput).toBeChecked(); }); test("should move selection to the next color when right arrow is pressed", async ({ @@ -177,10 +177,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await mount(); await simpleColorPickerInput(page, 3).press("ArrowRight"); - await expect(simpleColorPickerInput(page, 4)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, 4)).toBeChecked(); }); test("should move selection to the last color when left arrow is pressed from the first color", async ({ @@ -193,7 +190,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await firstInput.press("ArrowLeft"); const lastInput = simpleColorPickerInput(page, 9); - await expect(lastInput).toHaveAttribute("aria-checked", "true"); + await expect(lastInput).toBeChecked(); }); test("should move selection to the previous color when left arrow is pressed", async ({ @@ -203,10 +200,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await mount(); await simpleColorPickerInput(page, 3).press("ArrowLeft"); - await expect(simpleColorPickerInput(page, 2)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, 2)).toBeChecked(); }); test("should move selection to the color immediately below when down arrow is pressed", async ({ @@ -216,10 +210,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await mount(); await simpleColorPickerInput(page, 3).press("ArrowDown"); - await expect(simpleColorPickerInput(page, 8)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, 8)).toBeChecked(); }); test("should move selection to the color immediately above when up arrow is pressed", async ({ @@ -229,10 +220,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await mount(); await simpleColorPickerInput(page, 8).press("ArrowUp"); - await expect(simpleColorPickerInput(page, 3)).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(simpleColorPickerInput(page, 3)).toBeChecked(); }); [1, 2, 3].forEach((cellIndex) => { @@ -244,7 +232,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { const selectedColor = simpleColorPickerInput(page, cellIndex); await selectedColor.click(); - await expect(selectedColor).toHaveAttribute("aria-checked", "true"); + await expect(selectedColor).toBeChecked(); }); }); diff --git a/src/components/tile-select/tile-select.pw.tsx b/src/components/tile-select/tile-select.pw.tsx index 7f80ee9594..ccfbe9e2d1 100644 --- a/src/components/tile-select/tile-select.pw.tsx +++ b/src/components/tile-select/tile-select.pw.tsx @@ -202,13 +202,13 @@ test.describe("check props for TileSelect component", () => { test("should check when tile is selected", async ({ mount, page }) => { await mount(); - await expect(inputElement(page)).toHaveAttribute("aria-checked", "true"); + await expect(inputElement(page)).toBeChecked(); }); test("should check when tile is not selected", async ({ mount, page }) => { await mount(); - await expect(inputElement(page)).toHaveAttribute("aria-checked", "false"); + await expect(inputElement(page)).not.toBeChecked(); }); test("should render TileSelect component with className", async ({ @@ -320,29 +320,17 @@ test.describe("check props for MultiTileSelect component", () => { const multiSelectInputElement0 = inputElement(page).nth(0); await multiSelectInputElement0.click(); - await expect(multiSelectInputElement0).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(multiSelectInputElement0).toBeChecked(); const multiSelectInputElement1 = inputElement(page).nth(1); await multiSelectInputElement1.click(); - await expect(multiSelectInputElement1).toHaveAttribute( - "aria-checked", - "true", - ); + await expect(multiSelectInputElement1).toBeChecked(); const multiSelectInputElement2 = inputElement(page).nth(2); - await expect(multiSelectInputElement2).toHaveAttribute( - "aria-checked", - "false", - ); + await expect(multiSelectInputElement2).not.toBeChecked(); const multiSelectInputElement3 = inputElement(page).nth(3); - await expect(multiSelectInputElement3).toHaveAttribute( - "aria-checked", - "false", - ); + await expect(multiSelectInputElement3).not.toBeChecked(); }); test("should render with the expected border radius styling", async ({ From d397fe7d3de9bbe5b4a19e9442f2316e864ab9ad Mon Sep 17 00:00:00 2001 From: "tom.davies" Date: Thu, 7 Nov 2024 13:02:42 +0000 Subject: [PATCH 2/2] fix: remove aria-checked from checkbox/radio inputs fix #7047 --- .../checkable-input/hidden-checkable-input.component.tsx | 1 - .../simple-color-picker/simple-color/simple-color.component.tsx | 1 - src/components/tile-select/tile-select.component.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/src/__internal__/checkable-input/hidden-checkable-input.component.tsx b/src/__internal__/checkable-input/hidden-checkable-input.component.tsx index 57693b660d..8be81f7465 100644 --- a/src/__internal__/checkable-input/hidden-checkable-input.component.tsx +++ b/src/__internal__/checkable-input/hidden-checkable-input.component.tsx @@ -120,7 +120,6 @@ const HiddenCheckableInput = React.forwardRef( aria-labelledby={ariaLabelledBy} autoFocus={autoFocus} data-has-autofocus={autoFocus ? true : undefined} - aria-checked={checked} checked={checked} name={name} role={role || type} diff --git a/src/components/simple-color-picker/simple-color/simple-color.component.tsx b/src/components/simple-color-picker/simple-color/simple-color.component.tsx index 49fd323e10..f0ade8c113 100644 --- a/src/components/simple-color-picker/simple-color/simple-color.component.tsx +++ b/src/components/simple-color-picker/simple-color/simple-color.component.tsx @@ -63,7 +63,6 @@ export const SimpleColor = React.forwardRef( type="radio" role="radio" value={value} - aria-checked={checked} ref={ref} id={inputId} defaultChecked={defaultChecked} diff --git a/src/components/tile-select/tile-select.component.tsx b/src/components/tile-select/tile-select.component.tsx index 059f3d3f11..0e63a75fb7 100644 --- a/src/components/tile-select/tile-select.component.tsx +++ b/src/components/tile-select/tile-select.component.tsx @@ -184,7 +184,6 @@ const TileSelect = React.forwardRef( type={type} value={value} disabled={disabled} - aria-checked={checked} id={id} ref={ref} {...rest}