Merge branch 'master' into FE-6666

Sage · Oct 29, 2024 · 97f1744 · 97f1744
2 parents 8e180b9 + 02a8c60
commit 97f1744
Show file tree

Hide file tree

Showing 11 changed files with 1,829 additions and 1,725 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### [144.2.1](https://github.com/Sage/carbon/compare/v144.2.0...v144.2.1) (2024-10-28)
+
+
+### Bug Fixes
+
+* **multi-action-button, split-button:** ensure child button are accessible ([a3e2302](https://github.com/Sage/carbon/commit/a3e2302def7e97e32d1f28053706d79a2a14d5d9)), closes [#7005](https://github.com/Sage/carbon/issues/7005)
+
 ## [144.2.0](https://github.com/Sage/carbon/compare/v144.1.1...v144.2.0) (2024-10-25)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.2.0",
+  "version": "144.2.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

diff --git a/src/components/multi-action-button/multi-action-button.component.tsx b/src/components/multi-action-button/multi-action-button.component.tsx
@@ -58,6 +58,8 @@ export const MultiActionButton = ({
   const handleClick = (
     ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
   ) => {
+    // ensure button is focused when clicked (Safari)
+    buttonRef.current?.focus();
     showButtons();
     handleInsideClick();
     if (onClick) {

diff --git a/src/components/multi-action-button/multi-action-button.pw.tsx b/src/components/multi-action-button/multi-action-button.pw.tsx
@@ -15,7 +15,6 @@ import {
 import {
   assertCssValueIsApproximately,
   checkAccessibility,
-  continuePressingTAB,
 } from "../../../playwright/support/helper";
 import { SIZE, CHARACTERS } from "../../../playwright/support/constants";
 import {
@@ -265,7 +264,6 @@ test.describe("Functional tests", () => {
     const listButton1 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(0);
-    await continuePressingTAB(page, 2);
     await page.keyboard.press("ArrowUp");
     await expect(listButton1).toBeFocused();
     await page.keyboard.press("ArrowUp");
@@ -290,8 +288,8 @@ test.describe("Functional tests", () => {
     const listButton2 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(1);
-    await continuePressingTAB(page, 2);
-    await expect(listButton2).toBeFocused();
+
+    await listButton2.focus();
     await page.keyboard.press("Shift+Tab");
     await expect(listButton1).toBeFocused();
     await page.keyboard.press("Shift+Tab");
@@ -313,8 +311,8 @@ test.describe("Functional tests", () => {
     const listButton3 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(2);
-    await continuePressingTAB(page, 3);
-    await expect(listButton3).toBeFocused();
+
+    await listButton3.focus();
     await page.keyboard.press("ArrowDown");
     await expect(listButton3).toBeFocused();
   });
@@ -325,7 +323,10 @@ test.describe("Functional tests", () => {
   }) => {
     await mount(<MultiActionTwoButtons />);
 
-    await page.keyboard.press("Tab");
+    const actionButton = getComponent(page, "multi-action-button")
+      .first()
+      .locator("button");
+    await actionButton.click();
     const listButton1 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(0);
@@ -335,7 +336,8 @@ test.describe("Functional tests", () => {
     const listButton3 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(2);
-    await page.keyboard.press("Space");
+
+    await page.keyboard.press("Tab");
     await expect(listButton1).toBeFocused();
     await page.keyboard.press("Tab");
     await expect(listButton2).toBeFocused();
@@ -363,8 +365,8 @@ test.describe("Functional tests", () => {
     const listButton3 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(2);
-    await continuePressingTAB(page, 3);
-    await expect(listButton3).toBeFocused();
+
+    await listButton3.focus();
     await page.keyboard.down("Meta");
     await page.keyboard.press("ArrowUp");
     await page.keyboard.up("Meta");
@@ -387,8 +389,8 @@ test.describe("Functional tests", () => {
     const listButton3 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(2);
-    await continuePressingTAB(page, 3);
-    await expect(listButton3).toBeFocused();
+
+    await listButton3.focus();
     await page.keyboard.down("Control");
     await page.keyboard.press("ArrowUp");
     await page.keyboard.up("Control");
@@ -411,8 +413,8 @@ test.describe("Functional tests", () => {
     const listButton3 = getDataElementByValue(page, "additional-buttons")
       .getByRole("button")
       .nth(2);
-    await continuePressingTAB(page, 3);
-    await expect(listButton3).toBeFocused();
+
+    await listButton3.focus();
     await page.keyboard.press("Home");
     await expect(listButton1).toBeFocused();
   });
@@ -545,7 +547,7 @@ test.describe(
       const listButton1 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(0);
-      await continuePressingTAB(page, 2);
+
       await page.keyboard.press("ArrowUp");
       await expect(listButton1).toBeFocused();
       await page.keyboard.press("ArrowUp");
@@ -570,8 +572,8 @@ test.describe(
       const listButton2 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(1);
-      await continuePressingTAB(page, 2);
-      await expect(listButton2).toBeFocused();
+
+      await listButton2.focus();
       await page.keyboard.press("Shift+Tab");
       await expect(listButton1).toBeFocused();
       await page.keyboard.press("Shift+Tab");
@@ -593,8 +595,8 @@ test.describe(
       const listButton3 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(2);
-      await continuePressingTAB(page, 3);
-      await expect(listButton3).toBeFocused();
+
+      await listButton3.focus();
       await page.keyboard.press("ArrowDown");
       await expect(listButton3).toBeFocused();
     });
@@ -605,7 +607,10 @@ test.describe(
     }) => {
       await mount(<WithWrapperTwoButtons />);
 
-      await page.keyboard.press("Tab");
+      const actionButton = getComponent(page, "multi-action-button")
+        .first()
+        .locator("button");
+      await actionButton.click();
       const listButton1 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(0);
@@ -615,7 +620,8 @@ test.describe(
       const listButton3 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(2);
-      await page.keyboard.press("Space");
+
+      await page.keyboard.press("Tab");
       await expect(listButton1).toBeFocused();
       await page.keyboard.press("Tab");
       await expect(listButton2).toBeFocused();
@@ -643,8 +649,8 @@ test.describe(
       const listButton3 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(2);
-      await continuePressingTAB(page, 3);
-      await expect(listButton3).toBeFocused();
+
+      await listButton3.focus();
       await page.keyboard.down("Meta");
       await page.keyboard.press("ArrowUp");
       await page.keyboard.up("Meta");
@@ -667,8 +673,8 @@ test.describe(
       const listButton3 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(2);
-      await continuePressingTAB(page, 3);
-      await expect(listButton3).toBeFocused();
+
+      await listButton3.focus();
       await page.keyboard.down("Control");
       await page.keyboard.press("ArrowUp");
       await page.keyboard.up("Control");
@@ -691,8 +697,8 @@ test.describe(
       const listButton3 = getDataElementByValue(page, "additional-buttons")
         .getByRole("button")
         .nth(2);
-      await continuePressingTAB(page, 3);
-      await expect(listButton3).toBeFocused();
+
+      await listButton3.focus();
       await page.keyboard.press("Home");
       await expect(listButton1).toBeFocused();
     });

diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -203,6 +203,7 @@ export const FilterableSelect = React.forwardRef<
         newValue: string | Record<string, unknown>,
         selectionConfirmed: boolean
       ) => {
+        /* istanbul ignore else */
         if (onChange) {
           onChange(createCustomEvent(newValue, selectionConfirmed));
         }
@@ -280,7 +281,12 @@ export const FilterableSelect = React.forwardRef<
 
         if (!matchingOption || matchingOption.props.text === undefined) {
           setTextValue(filterText || "");
-        } else if (
+
+          return;
+        }
+
+        /* istanbul ignore else */
+        if (
           isClosing ||
           matchingOption.props.text
             ?.toLowerCase()
@@ -432,7 +438,9 @@ export const FilterableSelect = React.forwardRef<
     const onFilterChange = useStableCallback(
       onFilterChangeProp as (filterTextArg: unknown) => void
     );
+
     const isFirstRender = useRef(true);
+
     useEffect(() => {
       if (onFilterChange && !isFirstRender.current) {
         onFilterChange(filterText);
@@ -537,6 +545,14 @@ export const FilterableSelect = React.forwardRef<
       });
     }
 
+    useEffect(() => {
+      return () => {
+        if (focusTimer.current) {
+          clearTimeout(focusTimer.current);
+        }
+      };
+    }, []);
+
     function handleTextboxFocus(event: React.FocusEvent<HTMLInputElement>) {
       const triggerFocus = () => onFocus?.(event);
 

diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx
@@ -102,6 +102,39 @@ test.describe("When focused", () => {
 });
 
 test.describe("FilterableSelect component", () => {
+  test("should not select an option when the user types non-matching filter text in the input and then presses the Enter key", async ({
+    page,
+    mount,
+  }) => {
+    await mount(<FilterableSelectComponent />);
+
+    await selectInput(page).fill("f");
+    await selectInput(page).press("Enter");
+    await expect(getDataElementByValue(page, "input")).toHaveValue("");
+  });
+
+  test("should not select an option when the user types non-matching filter text and then presses ArrowDown key", async ({
+    page,
+    mount,
+  }) => {
+    await mount(<FilterableSelectComponent />);
+
+    await selectInput(page).fill("f");
+    await selectInput(page).press("ArrowDown");
+    await expect(getDataElementByValue(page, "input")).toHaveValue("f");
+  });
+
+  test("should not select an option when the user types non-matching filter text and then presses ArrowUp key", async ({
+    page,
+    mount,
+  }) => {
+    await mount(<FilterableSelectComponent />);
+
+    await selectInput(page).fill("f");
+    await selectInput(page).press("ArrowUp");
+    await expect(getDataElementByValue(page, "input")).toHaveValue("f");
+  });
+
   testData.forEach((labelValue) => {
     test(`should render label using ${labelValue} special characters`, async ({
       mount,