fix: remove aria-checked from checkbox/radio inputs

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}

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();
     });
   });
 });

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(<SimpleColorPickerCustom />);
 
     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(<SimpleColorPickerCustom />);
 
     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(<SimpleColorPickerCustom />);
 
     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(<SimpleColorPickerCustom />);
 
     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();
     });
   });
 

src/components/simple-color-picker/simple-color/simple-color.component.tsx

@@ -63,7 +63,6 @@ export const SimpleColor = React.forwardRef<HTMLInputElement, SimpleColorProps>(
           type="radio"
           role="radio"
           value={value}
-          aria-checked={checked}
           ref={ref}
           id={inputId}
           defaultChecked={defaultChecked}

src/components/tile-select/tile-select.component.tsx

@@ -184,7 +184,6 @@ const TileSelect = React.forwardRef<HTMLInputElement, TileSelectProps>(
             type={type}
             value={value}
             disabled={disabled}
-            aria-checked={checked}
             id={id}
             ref={ref}
             {...rest}

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(<TileSelect checked />);
 
-    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(<TileSelect checked={false} />);
 
-    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 ({