Repository: Sage/carbon (ts)

Issue:
MenuSegmentTitle
### Current behaviour

`MenuSegmentTitle` applies rounding to the last child, which is not correct when the `MenuSegmentTitle` component is not the last item in the menu.

### Expected behaviour

No rounding to occur where other elements follow below `MenuSegmentTitle`.

### CodeSandbox or Storybook URL

https://codesandbox.io/p/sandbox/menusegmenttitle-border-radius-4tqhzp

### JIRA Ticket (Sage Only)

_No response_

### Suggested Solution

_No response_

### Carbon Version

124.3.0

### Design Tokens Version

_No response_

### What browsers are you seeing the problem on?

Chrome

### What Operating System are you seeing the problem on?

MacOS

### Anything else we should know?

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(submenu): ensure last child in segment title has correct styling - FE-6308
The last child in the segment title should not have rounded corners.

fixes #6488

### Proposed behaviour

![Screenshot 2024-03-08 at 11 01 57](https://github.com/Sage/carbon/assets/56251247/852ad598-3e00-44b4-bd7c-fa8abf86750c)

![Screenshot 2024-03-08 at 11 03 47](https://github.com/Sage/carbon/assets/56251247/32966f83-57da-4fab-b7b8-49b9def2575e)

### Current behaviour

border-radius is applied to all last children of the segment title. 

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [x] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

I have opted to do the styling test in Playwright alone instead of doubling up with unit and automation. The reason for this is we already have a humongous amount of unit tests for `Menu` and it's associated components. Doing the tests in Playwright is also much simpler and easier to maintain. With a component as complex as `Menu`, I felt this way benefited future development work but I am happy to add unit tests if we feel strongly that they should be included. 

### Testing instructions

- No visual regressions in the other menu examples
- New test story `MenuWithTwoSegments` should have the correct styling applied to the last menu items in the submenus. 

Patch:
diff --git a/src/components/menu/__internal__/submenu/submenu.component.tsx b/src/components/menu/__internal__/submenu/submenu.component.tsx
index 8912736e6..e71f02ed5 100644
--- a/src/components/menu/__internal__/submenu/submenu.component.tsx
+++ b/src/components/menu/__internal__/submenu/submenu.component.tsx
@@ -98,7 +98,9 @@ const Submenu = React.forwardRef<
     }: SubmenuProps,
     ref
   ) => {
-    const submenuRef = useRef<HTMLUListElement & HTMLDivElement>(null);
+    const [submenuRef, setSubmenuRef] = useState<
+      HTMLUListElement | HTMLDivElement | null
+    >(null);
     const submenuId = useRef(guid());
     const menuContext = useContext(MenuContext);
     const {
@@ -111,8 +113,10 @@ const Submenu = React.forwardRef<
     const [submenuFocusId, setSubmenuFocusId] = useState<string | null>(null);
     const [submenuItemIds, setSubmenuItemIds] = useState<(string | null)[]>([]);
     const [characterString, setCharacterString] = useState("");
+    const [applyFocusRadius, setApplyFocusRadius] = useState<boolean>(false);
     const shiftTabPressed = useRef(false);
     const focusFirstMenuItemOnOpen = useRef(false);
+
     const numberOfChildren = submenuItemIds.length;
 
     const { submenuMaxHeight } = useContext(FixedNavigationBarContext);
@@ -120,12 +124,12 @@ const Submenu = React.forwardRef<
     const onSubmenuOpen = useStableCallback(onSubmenuOpenProp);
 
     const blockIndex = useMemo(() => {
-      const items = submenuRef.current?.querySelectorAll(BLOCK_INDEX_SELECTOR);
+      const items = submenuRef?.querySelectorAll(BLOCK_INDEX_SELECTOR);
 
       if (items && submenuOpen && numberOfChildren) {
         const childrenArray = Array.from(items);
 
-        const scrollableBlock = submenuRef.current?.querySelector(
+        const scrollableBlock = submenuRef?.querySelector(
           `[data-component='${SCROLLABLE_BLOCK}']`
         );
 
@@ -141,7 +145,7 @@ const Submenu = React.forwardRef<
       }
 
       return -1;
-    }, [submenuOpen, numberOfChildren]);
+    }, [submenuOpen, numberOfChildren, submenuRef]);
 
     const characterTimer = useRef<NodeJS.Timeout | null>(null);
 
@@ -164,6 +168,51 @@ const Submenu = React.forwardRef<
       setOpenSubmenuId(submenuId.current);
     }, [setOpenSubmenuId]);
 
+    const lastMenuItemElement = useRef<Element | undefined>();
+
+    useEffect(() => {
+      const handleBorderRadiusStyling = () => {
+        // Finds all ul elements that are not submenus
+        const ulElements = Array.from(
+          submenuRef?.querySelectorAll("ul:not([data-component='submenu'])") ||
+            /* istanbul ignore next */ []
+        );
+
+        // Terminate early if there are no ul elements as we have nothing we need to apply styles to.
+        if (ulElements.length === 0) return;
+
+        // Get the last menu item in the submenu
+        const lastMenuItem = Array.from(
+          submenuRef?.querySelectorAll("[data-component='menu-item']") ||
+            /* istanbul ignore next */ []
+        ).pop();
+
+        lastMenuItemElement.current = lastMenuItem;
+
+        // Get the last segment block
+        const lastSegmentBlock = ulElements.pop();
+
+        // Get all the menu items from the last segment block
+        const segmentBlockMenuItems = Array.from(
+          lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") ||
+            /* istanbul ignore next */ []
+        );
+
+        // Get the last menu item in the last segment block
+        const lastMenuItemInSegmentBlock = segmentBlockMenuItems.pop();
+        // Check if the last item in the segment block is the same as the last MenuItem in the submenu
+        const menuItemsMatch =
+          !!lastMenuItemInSegmentBlock &&
+          lastMenuItemInSegmentBlock === lastMenuItem;
+
+        setApplyFocusRadius(menuItemsMatch);
+      };
+
+      if (submenuOpen && submenuRef) {
+        handleBorderRadiusStyling();
+      }
+    }, [submenuOpen, submenuRef]);
+
     useEffect(() => {
       if (submenuOpen && onSubmenuOpen) {
         onSubmenuOpen();
@@ -258,6 +307,7 @@ const Submenu = React.forwardRef<
           if (Events.isUpKey(event)) {
             event.preventDefault();
             shiftTabPressed.current = false;
+            setApplyFocusRadius(false);
 
             if (nextIndex > 0) {
               nextIndex -= 1;
@@ -340,10 +390,8 @@ const Submenu = React.forwardRef<
 
     useEffect(() => {
       /* istanbul ignore else */
-      if (submenuRef.current && children) {
-        const items = submenuRef.current?.querySelectorAll(
-          ALL_CHILDREN_SELECTOR
-        );
+      if (submenuRef && children) {
+        const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
 
         /* istanbul ignore else */
         if (items) {
@@ -352,7 +400,7 @@ const Submenu = React.forwardRef<
           );
         }
       }
-    }, [children, submenuOpen]);
+    }, [children, submenuOpen, submenuRef]);
 
     useEffect(() => {
       if (
@@ -382,7 +430,7 @@ const Submenu = React.forwardRef<
     };
 
     useEffect(() => {
-      const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
+      const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
       if (items && characterString !== "") {
         const submenuChildren = Array.from(items);
         const nextItem = characterNavigation(characterString, submenuChildren);
@@ -391,7 +439,7 @@ const Submenu = React.forwardRef<
           setSubmenuFocusId(nextItem.id);
         }
       }
-    }, [characterString, submenuItemIds]);
+    }, [submenuRef, characterString, submenuItemIds]);
 
     if (inFullscreenView) {
       return (
@@ -420,7 +468,8 @@ const Submenu = React.forwardRef<
             variant={variant}
             menuType={menuType}
             inFullscreenView={inFullscreenView}
-            ref={submenuRef}
+            ref={setSubmenuRef}
+            applyFocusRadiusStyling={false}
           >
             <SubmenuContext.Provider
               value={{
@@ -443,7 +492,7 @@ const Submenu = React.forwardRef<
         onMouseLeave={() => closeSubmenu()}
         isSubmenuOpen={submenuOpen}
         onClick={handleClickInside}
-        ref={submenuRef}
+        ref={setSubmenuRef}
       >
         <StyledMenuItemWrapper
           {...rest}
@@ -474,6 +523,7 @@ const Submenu = React.forwardRef<
             menuType={menuType}
             role={blockIndex === 0 ? "presentation" : "list"}
             maxHeight={submenuMaxHeight}
+            applyFocusRadiusStyling={applyFocusRadius}
           >
             <SubmenuContext.Provider
               value={{
diff --git a/src/components/menu/__internal__/submenu/submenu.spec.tsx b/src/components/menu/__internal__/submenu/submenu.spec.tsx
index c7b50f6cc..e27e1981e 100644
--- a/src/components/menu/__internal__/submenu/submenu.spec.tsx
+++ b/src/components/menu/__internal__/submenu/submenu.spec.tsx
@@ -2,8 +2,10 @@ import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import { act } from "react-dom/test-utils";
 import { ThemeProvider } from "styled-components";
+import { render as rtlRender, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-import { MenuItem } from "../..";
+import { Menu, MenuItem, MenuSegmentTitle } from "../..";
 import MenuContext, { MenuContextProps, MenuType } from "../../menu.context";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 import { StyledSubmenu } from "./submenu.style";
@@ -100,13 +102,163 @@ const menuContextValues = (menuType: MenuType): MenuContextProps => ({
   inMenu: true,
 });
 
+// These tests use RTL. They have to be at the top of this file due the use of jest.useFakeTimers() causing the RTL tests to time out.
+// Once we migrate, these tests can be moved back in to the main test block below.
+describe("Border Radius", () => {
+  it("should render the last menu item in the submenu with the correct styles", async () => {
+    rtlRender(
+      <Menu menuType="black">
+        <MenuItem submenu="Menu Item" clickToOpen>
+          <MenuItem href="#" minWidth="200px">
+            Submenu
+          </MenuItem>
+          <MenuSegmentTitle text="segment title 1" variant="alternate">
+            <MenuItem href="#" variant="alternate">
+              Menu Item 1
+            </MenuItem>
+          </MenuSegmentTitle>
+          <MenuSegmentTitle text="segment title 2" variant="alternate">
+            <MenuItem href="#" variant="alternate">
+              Menu Item 2
+            </MenuItem>
+            <MenuItem href="#" variant="alternate">
+              Menu Item 3
+            </MenuItem>
+          </MenuSegmentTitle>
+          <MenuItem href="#">Menu Item 4</MenuItem>
+        </MenuItem>
+      </Menu>
+    );
+
+    const menuItem = screen.getByRole("button", { name: "Menu Item" });
+
+    expect(menuItem).toBeInTheDocument();
+
+    await userEvent.click(menuItem);
+    const menuItemFour = screen.getByRole("link", { name: "Menu Item 4" });
+
+    expect(menuItemFour).toBeInTheDocument();
+
+    await userEvent.click(menuItemFour);
+
+    expect(menuItemFour).toBeInTheDocument();
+    expect(menuItemFour).toHaveStyle({
+      borderBottomRightRadius: "var(--borderRadius100)",
+      borderBottomLeftRadius: "var(--borderRadius100)",
+    });
+  });
+
+  it("should render the scrollable block with the correct styles on the last menu item", async () => {
+    rtlRender(
+      <Menu menuType="black">
+        <MenuItem onClick={() => {}}>Menu Item One</MenuItem>
+        <MenuItem href="#">Menu Item Two</MenuItem>
+        <MenuItem submenu="Menu Item Three">
+          <ScrollableBlock height="200px">
+            <MenuItem href="#">Item Submenu One</MenuItem>
+            <MenuItem href="#">Item Submenu Two</MenuItem>
+            <MenuItem href="#">Item Submenu Three</MenuItem>
+            <MenuItem href="#">Item Submenu Four</MenuItem>
+            <MenuItem href="#">Item Submenu Five</MenuItem>
+            <MenuItem href="#">Item Submenu Six</MenuItem>
+            <MenuItem href="#">Item Submenu Seven</MenuItem>
+            <MenuItem href="#">Item Submenu Eight</MenuItem>
+            <MenuItem href="#">Item Submenu Nine</MenuItem>
+            <MenuItem href="#">Item Submenu Ten</MenuItem>
+            <MenuItem href="#">Item Submenu Eleven</MenuItem>
+            <MenuItem href="#">Item Submenu Twelve</MenuItem>
+          </ScrollableBlock>
+        </MenuItem>
+      </Menu>
+    );
+
+    const menuItem = screen.getByRole("button", { name: "Menu Item Three" });
+
+    expect(menuItem).toBeInTheDocument();
+
+    await userEvent.click(menuItem);
+    const itemSubmenuTwelve = screen.getByRole("link", {
+      name: "Item Submenu Twelve",
+    });
+
+    expect(itemSubmenuTwelve).toBeInTheDocument();
+
+    await userEvent.click(itemSubmenuTwelve);
+
+    expect(itemSubmenuTwelve).toBeInTheDocument();
+    expect(itemSubmenuTwelve).toHaveStyle({
+      borderBottomRightRadius: "var(--borderRadius000)",
+      borderBottomLeftRadius: "var(--borderRadius100)",
+    });
+  });
+
+  it("should render the scrollable block with the correct styles on the last menu item outside the block", async () => {
+    rtlRender(
+      <Menu menuType="black">
+        <MenuItem onClick={() => {}}>Menu Item One</MenuItem>
+        <MenuItem href="#">Menu Item Two</MenuItem>
+        <MenuItem submenu="Menu Item Three">
+          <ScrollableBlock height="200px">
+            <MenuItem href="#">Item Submenu One</MenuItem>
+            <MenuItem href="#">Item Submenu Two</MenuItem>
+            <MenuItem href="#">Item Submenu Three</MenuItem>
+            <MenuItem href="#">Item Submenu Four</MenuItem>
+            <MenuItem href="#">Item Submenu Five</MenuItem>
+            <MenuItem href="#">Item Submenu Six</MenuItem>
+            <MenuItem href="#">Item Submenu Seven</MenuItem>
+            <MenuItem href="#">Item Submenu Eight</MenuItem>
+            <MenuItem href="#">Item Submenu Nine</MenuItem>
+            <MenuItem href="#">Item Submenu Ten</MenuItem>
+            <MenuItem href="#">Item Submenu Eleven</MenuItem>
+            <MenuItem href="#">Item Submenu Twelve</MenuItem>
+          </ScrollableBlock>
+          <MenuItem href="#">Menu Item Last</MenuItem>
+        </MenuItem>
+      </Menu>
+    );
+
+    const menuItem = screen.getByRole("button", { name: "Menu Item Three" });
+
+    expect(menuItem).toBeInTheDocument();
+
+    await userEvent.click(menuItem);
+    const itemSubmenuTwelve = screen.getByRole("link", {
+      name: "Item Submenu Twelve",
+    });
+
+    expect(itemSubmenuTwelve).toBeInTheDocument();
+    await userEvent.click(itemSubmenuTwelve);
+
+    expect(itemSubmenuTwelve).toBeInTheDocument();
+    expect(itemSubmenuTwelve).toHaveStyle({
+      borderBottomRightRadius: "var(--borderRadius000)",
+      borderBottomLeftRadius: "var(--borderRadius000)",
+    });
+
+    const menuItemLast = screen.getByRole("link", { name: "Menu Item Last" });
+
+    expect(menuItemLast).toBeInTheDocument();
+
+    await userEvent.click(menuItemLast);
+
+    expect(menuItemLast).toBeInTheDocument();
+    expect(menuItemLast).toHaveStyle({
+      borderBottomRightRadius: "var(--borderRadius100)",
+      borderBottomLeftRadius: "var(--borderRadius100)",
+    });
+  });
+});
+
 describe("Submenu component", () => {
   const element = document.createElement("div");
   const htmlElement = document.body.appendChild(element);
   const tabKey = new KeyboardEvent("keydown", events.tab);
   let wrapper: ReactWrapper;
 
-  const render = (menuType: MenuType, props: Partial<SubmenuProps> = {}) => {
+  const enzymeRender = (
+    menuType: MenuType,
+    props: Partial<SubmenuProps> = {}
+  ) => {
     return mount(
       <MenuContext.Provider value={menuContextValues(menuType)}>
         <Submenu title="title" {...props}>
@@ -137,20 +289,20 @@ describe("Submenu component", () => {
   });
 
   it("should render the top-level menu item as a button, not a link", () => {
-    wrapper = render("light");
+    wrapper = enzymeRender("light");
     expect(wrapper.find("a").exists()).toEqual(false);
     expect(wrapper.find("button").exists()).toEqual(true);
   });
 
   describe("when closed", () => {
     it("should not render the submenu", () => {
-      wrapper = render("light");
+      wrapper = enzymeRender("light");
       expect(wrapper.find(StyledSubmenu).exists()).toEqual(false);
     });
 
     describe("on mouse over", () => {
       it("should open the submenu but not focus the first item", () => {
-        wrapper = render("light");
+        wrapper = enzymeRender("light");
         expect(wrapper.find(StyledSubmenu).exists()).toEqual(false);
         const submenuItem = wrapper
           .find('[data-component="submenu-wrapper"]')
@@ -173,7 +325,7 @@ describe("Submenu component", () => {
 
     describe("on mouse out", () => {
       it("should close the submenu", () => {
-        wrapper = render("light");
+        wrapper = enzymeRender("light");
         openSubmenu(wrapper);
         expect(wrapper.find(StyledSubmenu).exists()).toEqual(true);
         const submenuItem = wrapper
@@ -192,7 +344,7 @@ describe("Submenu component", () => {
 
     describe("when clicked", () => {
       it("should open the submenu", () => {
-        wrapper = render("light");
+        wrapper = enzymeRender("light");
         wrapper.find("button").getDOMNode<HTMLButtonElement>().click();
         wrapper.update();
 
@@ -201,7 +353,7 @@ describe("Submenu component", () => {
 
       it("should execute the onClick callback", () => {
         const mockCallback = jest.fn();
-        wrapper = render("light", { onClick: mockCallback });
+        wrapper = enzymeRender("light", { onClick: mockCallback });
         wrapper.find("button").getDOMNode<HTMLButtonElement>().click();
         wrapper.update();
 
@@ -214,7 +366,10 @@ describe("Submenu component", () => {
 
       beforeEach(() => {
         mockCallback = jest.fn();
-        wrapper = render("light", { clickToOpen: true, onClick: mockCallback });
+        wrapper = enzymeRender("light", {
+          clickToOpen: true,
+          onClick: mockCallback,
+        });
       });
 
       afterEach(() => {
@@ -255,7 +410,7 @@ describe("Submenu component", () => {
       beforeEach(() => {
         mockCallback = jest.fn();
 
-        wrapper = render("light", { onSubmenuOpen: mockCallback });
+        wrapper = enzymeRender("light", { onSubmenuOpen: mockCallback });
       });
 
       afterEach(() => {
@@ -277,7 +432,7 @@ describe("Submenu component", () => {
       beforeEach(() => {
         mockCallback = jest.fn();
 
-        wrapper = render("light", { onSubmenuClose: mockCallback });
+        wrapper = enzymeRender("light", { onSubmenuClose: mockCallback });
       });
 
       afterEach(() => {
@@ -305,7 +460,7 @@ describe("Submenu component", () => {
 
     describe("when href prop set", () => {
       beforeEach(() => {
-        wrapper = render("light", { href: "/path" });
+        wrapper = enzymeRender("light", { href: "/path" });
       });
 
       it("should render the top-level menu item as a link instead of a button", () => {
@@ -421,7 +576,7 @@ describe("Submenu component", () => {
   describe("when open", () => {
     let submenuItem;
     beforeEach(() => {
-      wrapper = render("light");
+      wrapper = enzymeRender("light");
 
       submenuItem = wrapper
         .find('[data-component="submenu-wrapper"]')
@@ -489,6 +644,7 @@ describe("Submenu component", () => {
             submenuDirection="left"
             menuType="light"
             variant="default"
+            applyFocusRadiusStyling={false}
           >
             <MenuItem>Apple</MenuItem>
             <MenuItem>Banana</MenuItem>
@@ -536,12 +692,37 @@ describe("Submenu component", () => {
     );
   });
 
+  describe("Border Radius", () => {
+    it("should have the expected border-radius styling", () => {
+      wrapper = enzymeRender("light");
+
+      act(() => {
+        wrapper.find(StyledMenuItemWrapper).last().at(0).simulate("mouseover");
+      });
+
+      wrapper.update();
+
+      act(() => {
+        wrapper.find(StyledMenuItemWrapper).last().at(0).simulate("click");
+      });
+
+      assertStyleMatch(
+        {
+          borderBottomRightRadius: "var(--borderRadius100)",
+          borderBottomLeftRadius: "var(--borderRadius100)",
+        },
+        wrapper.find(StyledSubmenu),
+        { modifier: `${StyledMenuItem}:last-child button` }
+      );
+    });
+  });
+
   describe("keyboard navigation", () => {
     describe("when closed", () => {
       let submenuItem: ReactWrapper;
 
       beforeEach(() => {
-        wrapper = render("light");
+        wrapper = enzymeRender("light");
         submenuItem = wrapper
           .find('[data-component="submenu-wrapper"]')
           .find("button");
@@ -686,7 +867,7 @@ describe("Submenu component", () => {
 
       describe("when multiple character keys pressed slowly", () => {
         it("should reset the search string and focus the correct item", () => {
-          jest.useFakeTimers();
+          jest.useFakeTimers("legacy");
 
           openSubmenu(wrapper);
 
@@ -732,7 +913,7 @@ describe("Submenu component", () => {
       const onKeyDownFn = jest.fn();
 
       beforeEach(() => {
-        wrapper = render("light", { onKeyDown: onKeyDownFn });
+        wrapper = enzymeRender("light", { onKeyDown: onKeyDownFn });
         submenuItem = wrapper
           .find('[data-component="submenu-wrapper"]')
           .find("button");
@@ -1205,7 +1386,7 @@ describe("Submenu component", () => {
 
       describe("when enter key pressed", () => {
         it("should navigate to href and close submenu", () => {
-          jest.useFakeTimers();
+          jest.useFakeTimers("legacy");
           document.dispatchEvent(tabKey);
           wrapper.update();
 
@@ -1244,8 +1425,8 @@ describe("Submenu component", () => {
     (menuType) => {
       let submenuItem;
 
-      const renderWrapper = (variant: VariantType) => {
-        wrapper = render(menuType, { variant });
+      const enzymeRenderWrapper = (variant: VariantType) => {
+        wrapper = enzymeRender(menuType, { variant });
         submenuItem = wrapper
           .find('[data-component="submenu-wrapper"]')
           .find("button");
@@ -1263,7 +1444,7 @@ describe("Submenu component", () => {
       };
 
       it("should set the correct background color by default", () => {
-        renderWrapper("default");
+        enzymeRenderWrapper("default");
         assertStyleMatch(
           {
             backgroundColor: menuConfigVariants[menuType].submenuItemBackground,
@@ -1273,7 +1454,7 @@ describe("Submenu component", () => {
       });
 
       it("should set the correct background colour for alternate variant", () => {
-        renderWrapper("alternate");
+        enzymeRenderWrapper("alternate");
         assertStyleMatch(
           {
             backgroundColor: menuConfigVariants[menuType].background,
@@ -1286,7 +1467,7 @@ describe("Submenu component", () => {
         ["button", "focus"],
         ["a", "focus"],
       ])("applies the expected styling for %p on %s", (el, pseudo) => {
-        renderWrapper("default");
+        enzymeRenderWrapper("default");
         assertStyleMatch(
           {
             backgroundColor: menuConfigVariants[menuType].submenuItemBackground,
@@ -1301,7 +1482,7 @@ describe("Submenu component", () => {
         ["a", "hover"],
       ])("applies the expected styling for %p on %s", (el, pseudo) => {
         it("renders correct background and color", () => {
-          renderWrapper("default");
+          enzymeRenderWrapper("default");
           assertStyleMatch(
             {
               backgroundColor: "transparent",
@@ -1313,7 +1494,7 @@ describe("Submenu component", () => {
         });
 
         it("renders correct icon color", () => {
-          renderWrapper("default");
+          enzymeRenderWrapper("default");
           assertStyleMatch(
             {
               color: "var(--colorsComponentsMenuYang100)",
@@ -1329,7 +1510,7 @@ describe("Submenu component", () => {
   );
 
   describe("when it has a ScrollableBlock as a child", () => {
-    const renderScrollableBlock = (
+    const enzymeRenderScrollableBlock = (
       menuType: MenuType,
       props = {},
       parent?: React.ReactElement
@@ -1350,7 +1531,7 @@ describe("Submenu component", () => {
     };
 
     it("should render all of the underlying menu items", () => {
-      wrapper = renderScrollableBlock("light");
+      wrapper = enzymeRenderScrollableBlock("light");
       openSubmenu(wrapper);
 
       expect(wrapper.find(MenuItem).length).toEqual(4);
@@ -1358,7 +1539,7 @@ describe("Submenu component", () => {
 
     describe("when the scrollable block has a parent item", () => {
       it("should render all of the underlying menu items", () => {
-        wrapper = renderScrollableBlock(
+        wrapper = enzymeRenderScrollableBlock(
           "light",
           {},
           <Search value="" onChange={() => {}} />
@@ -1370,7 +1551,7 @@ describe("Submenu component", () => {
 
       describe("when shift + tab key pressed", () => {
         it("should focus the previous item", () => {
-          wrapper = renderScrollableBlock(
+          wrapper = enzymeRenderScrollableBlock(
             "light",
             {},
             <Search value="" onChange={() => {}} />
@@ -1428,7 +1609,7 @@ describe("Submenu component", () => {
   });
 
   describe("when it has Search as a child", () => {
-    const renderWithSearch = (menuType: MenuType, props = {}) => {
+    const enzymeRenderWithSearch = (menuType: MenuType, props = {}) => {
       return mount(
         <ThemeProvider theme={sageTheme}>
           <MenuContext.Provider value={menuContextValues(menuType)}>
@@ -1452,7 +1633,10 @@ describe("Submenu component", () => {
 
     const mockSubmenuhandleKeyDown = jest.fn();
 
-    const renderWithSearchDefaultValue = (menuType: MenuType, props = {}) => {
+    const enzymeRenderWithSearchDefaultValue = (
+      menuType: MenuType,
+      props = {}
+    ) => {
       return mount(
         <ThemeProvider theme={sageTheme}>
           <MenuContext.Provider value={menuContextValues(menuType)}>
@@ -1475,7 +1659,7 @@ describe("Submenu component", () => {
     };
 
     it("should not lose focus when enter key pressed", () => {
-      wrapper = renderWithSearch("dark");
+      wrapper = enzymeRenderWithSearch("dark");
       openSubmenu(wrapper);
 
       const searchInput = wrapper.find(StyledSearch).find("input");
@@ -1494,7 +1678,7 @@ describe("Submenu component", () => {
     });
 
     it("should be focusable by using down arrow key", () => {
-      wrapper = renderWithSearch("dark");
+      wrapper = enzymeRenderWithSearch("dark");
       openSubmenu(wrapper);
       const searchInput = wrapper.find(StyledSearch).find("input");
 
@@ -1511,7 +1695,7 @@ describe("Submenu component", () => {
     });
 
     it("should update when Search is clicked so the expected item is focused when arrow down pressed", () => {
-      wrapper = renderWithSearch("dark");
+      wrapper = enzymeRenderWithSearch("dark");
       openSubmenu(wrapper);
       const searchInput = wrapper.find(StyledSearch).find("input");
 
@@ -1534,7 +1718,7 @@ describe("Submenu component", () => {
     });
 
     it("should update when Search is clicked so the expected item is focused when up arrow pressed", () => {
-      wrapper = renderWithSearch("dark");
+      wrapper = enzymeRenderWithSearch("dark");
       openSubmenu(wrapper);
       const searchInput = wrapper.find(StyledSearch).find("input");
 
@@ -1559,7 +1743,9 @@ describe("Submenu component", () => {
     /* This test is purely to achieve coverage for the else of the `handleKeyDown`
     callback function in the menu-item component. */
     it("should not call SubmenuContext.handleKeyDown if Search has a value and is currently focused", () => {
-      wrapper = renderWithSearchDefaultValue("dark", { clickToOpen: true });
+      wrapper = enzymeRenderWithSearchDefaultValue("dark", {
+        clickToOpen: true,
+      });
       openSubmenu(wrapper);
 
       act(() => {
@@ -1588,7 +1774,9 @@ describe("Submenu component", () => {
     });
 
     it("should not close the submenu when enter is pressed", () => {
-      wrapper = renderWithSearchDefaultValue("dark", { clickToOpen: true });
+      wrapper = enzymeRenderWithSearchDefaultValue("dark", {
+        clickToOpen: true,
+      });
       openSubmenu(wrapper);
 
       wrapper.update();
diff --git a/src/components/menu/__internal__/submenu/submenu.style.ts b/src/components/menu/__internal__/submenu/submenu.style.ts
index 696d75f01..859c7bf02 100644
--- a/src/components/menu/__internal__/submenu/submenu.style.ts
+++ b/src/components/menu/__internal__/submenu/submenu.style.ts
@@ -1,12 +1,15 @@
 import styled, { css } from "styled-components";
+import StyledScrollableBlock from "../../../menu/scrollable-block/scrollable-block.style";
 import { baseTheme } from "../../../../style/themes";
 import { StyledLink } from "../../../link/link.style";
 import { StyledMenuItem } from "../../menu.style";
+import StyledBox from "../../../box/box.style";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 import StyledIcon from "../../../icon/icon.style";
 import menuConfigVariants from "../../menu.config";
 import { SubmenuProps } from "./submenu.component";
 import { MenuType } from "../../menu.context";
+import { StyledSegmentChildren } from "../../menu-segment-title/menu-segment-title.style";
 
 interface SharedStyleProps {
   inFullscreenView?: boolean;
@@ -23,6 +26,7 @@ interface StyledSubmenuProps
     Pick<SubmenuProps, "variant"> {
   submenuDirection?: string;
   maxHeight?: string;
+  applyFocusRadiusStyling: boolean;
 }
 
 const StyledSubmenuWrapper = styled.div<StyledSubmenuWrapperProps>`
@@ -59,6 +63,7 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
     variant,
     inFullscreenView,
     maxHeight,
+    applyFocusRadiusStyling,
   }) => css`
     ${!inFullscreenView &&
     menuType &&
@@ -97,6 +102,40 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
         border-bottom-left-radius: var(--borderRadius100);
         border-bottom-right-radius: var(--borderRadius100);
       }
+
+      & ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type a,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type button,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > span,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > div {
+        border-bottom-right-radius: var(--borderRadius000);
+        border-bottom-left-radius: var(--borderRadius000);
+
+        :focus {
+          border-bottom-right-radius: ${applyFocusRadiusStyling
+            ? "var(--borderRadius100)"
+            : "var(--borderRadius000)"};
+          border-bottom-left-radius: ${applyFocusRadiusStyling
+            ? "var(--borderRadius100)"
+            : "var(--borderRadius000)"};
+        }
+      }
+
+      &&&& ${StyledScrollableBlock} {
+        ${StyledBox} {
+          border-bottom-right-radius: var(--borderRadius000);
+          border-bottom-left-radius: ${applyFocusRadiusStyling
+            ? "var(--borderRadius100)"
+            : "var(--borderRadius000)"};
+
+          ${StyledMenuItem}:last-child ${StyledLink}, ${StyledMenuItem}:last-child a,
+          ${StyledMenuItem}:last-child button {
+            border-bottom-right-radius: var(--borderRadius000);
+            border-bottom-left-radius: ${applyFocusRadiusStyling
+              ? "var(--borderRadius100)"
+              : "var(--borderRadius000)"};
+          }
+        }
+      }
     `}
 
     display: block;
diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx
index 1123c0c2d..0181bbf1e 100644
--- a/src/components/menu/menu.pw.tsx
+++ b/src/components/menu/menu.pw.tsx
@@ -64,6 +64,7 @@ import {
   MenuDividerComponent,
   InGlobalHeaderStory,
   SubMenuWithVeryLongLabel,
+  MenuSegmentTitleComponentWithAdditionalMenuItem,
 } from "./component.test-pw";
 import { NavigationBarWithSubmenuAndChangingHeight } from "../navigation-bar/navigation-bar-test.stories";
 import { HooksConfig } from "../../../playwright";
@@ -2329,6 +2330,38 @@ test.describe(
       await expect(subMenu2).toHaveCSS("border-radius", "0px 0px 8px 8px");
     });
 
+    test(`should render with the expected border radius styling on the last MenuItem in a segment block`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuSegmentTitleComponent />);
+
+      const subMenu = submenu(page).nth(1);
+      await subMenu.hover();
+      const lastMenuItem = submenu(page).locator("a").last();
+      await lastMenuItem.focus();
+      await expect(lastMenuItem).toHaveCSS("border-radius", "0px 0px 8px 8px");
+    });
+
+    test(`should render with the expected border radius styling on the last MenuItem in a segment block when it is not the last menu item in the whole submenu`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<MenuSegmentTitleComponentWithAdditionalMenuItem />);
+
+      const subMenu = submenu(page).nth(1);
+      await subMenu.hover();
+      const lastMenuItemInLastSegment = page.getByRole("link", {
+        name: "Last Segment Child",
+      });
+      await lastMenuItemInLastSegment.focus();
+      await expect(lastMenuItemInLastSegment).toHaveCSS("border-radius", "0px");
+
+      const lastMenuItem = submenu(page).locator("a").last();
+      await lastMenuItem.focus();
+      await expect(lastMenuItem).toHaveCSS("border-radius", "0px 0px 8px 8px");
+    });
+
     test(`should render with the expected border radius styling on the Submenu Scrollable Block`, async ({
       mount,
       page,


Test patch:
diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx
index 5d84cf90a..47ab92380 100644
--- a/src/components/menu/component.test-pw.tsx
+++ b/src/components/menu/component.test-pw.tsx
@@ -490,6 +490,41 @@ export const MenuSegmentTitleComponent = (props: Partial<MenuTitleProps>) => {
   );
 };
 
+export const MenuSegmentTitleComponentWithAdditionalMenuItem = (
+  props: Partial<MenuTitleProps>
+) => {
+  return (
+    <Box mb={150}>
+      {menuTypes.map((menuType) => (
+        <div key={menuType}>
+          <Typography variant="h4" textTransform="capitalize" my={2}>
+            {menuType}
+          </Typography>
+          <Menu menuType={menuType} display="flex">
+            <MenuItem href="#">Menu Item One</MenuItem>
+            <MenuItem href="#">Menu Item Two</MenuItem>
+            <MenuItem submenu="Menu Item Three">
+              <MenuItem href="#">Item Submenu One</MenuItem>
+              <MenuItem href="#">Item Submenu Two</MenuItem>
+              <MenuItem icon="settings" href="#">
+                Item Submenu Three
+              </MenuItem>
+              <MenuItem href="#">Item Submenu Four</MenuItem>
+            </MenuItem>
+            <MenuItem submenu="Menu Item Four" onClick={() => {}}>
+              <MenuItem onClick={() => {}}>Item Submenu One</MenuItem>
+              <MenuSegmentTitle {...props} text="segment title">
+                <MenuItem href="#">Last Segment Child</MenuItem>
+              </MenuSegmentTitle>
+              <MenuItem href="#">Menu Item Five</MenuItem>
+            </MenuItem>
+          </Menu>
+        </div>
+      ))}
+    </Box>
+  );
+};
+
 export const ClosedMenuFullScreenWithButtons = () => {
   return (
     <>
diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx
index a51e3d30c..b630d068c 100644
--- a/src/components/menu/menu-test.stories.tsx
+++ b/src/components/menu/menu-test.stories.tsx
@@ -3,7 +3,14 @@ import { Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { allModes } from "../../../.storybook/modes";
 import isChromatic from "../../../.storybook/isChromatic";
-import { Menu, MenuItem, MenuFullscreen, MenuFullscreenProps } from ".";
+import {
+  Menu,
+  MenuItem,
+  MenuFullscreen,
+  MenuFullscreenProps,
+  MenuSegmentTitle,
+  ScrollableBlock,
+} from ".";
 import { MenuType } from "./menu.context";
 import Search from "../search";
 import Box from "../box";
@@ -20,6 +27,7 @@ const meta: Meta<typeof Menu> = {
     "InGlobalHeaderStory",
     "InNavigationBarStory",
     "MenuFullScreenKeysTest",
+    "MenuWithTwoSegments",
   ],
   parameters: {
     info: { disable: true },
@@ -285,3 +293,68 @@ export const MenuFullScreenKeysTest = () => {
     </MenuFullscreen>
   );
 };
+
+export const MenuWithTwoSegments = () => {
+  return (
+    <Box margin="0 25px" display="flex" flexDirection="row">
+      <Menu menuType="black">
+        <MenuItem submenu="Menu Item">
+          <MenuItem href="#" minWidth="200px">
+            Submenu
+          </MenuItem>
+          <MenuSegmentTitle text="segment title 1" variant="alternate">
+            <MenuItem href="#" variant="alternate">
+              Menu Item 1
+            </MenuItem>
+          </MenuSegmentTitle>
+          <MenuSegmentTitle text="segment title 2" variant="alternate">
+            <MenuItem href="#" variant="alternate">
+              Menu Item 2
+            </MenuItem>
+            <MenuItem href="#" variant="alternate">
+              Menu Item 3
+            </MenuItem>
+          </MenuSegmentTitle>
+          <MenuItem href="#">Menu Item 4</MenuItem>
+        </MenuItem>
+      </Menu>
+      <Menu menuType="light">
+        <MenuItem onClick={() => {}}>Menu Item One</MenuItem>
+        <MenuItem href="#">Menu Item Two</MenuItem>
+        <MenuItem submenu="Menu Item Three">
+          <ScrollableBlock height="200px">
+            <MenuItem href="#">Item Submenu One</MenuItem>
+            <MenuItem href="#">Item Submenu Two</MenuItem>
+            <MenuItem href="#">Item Submenu Three</MenuItem>
+            <MenuItem href="#">Item Submenu Four</MenuItem>
+            <MenuItem href="#">Item Submenu Five</MenuItem>
+            <MenuItem href="#">Item Submenu Six</MenuItem>
+            <MenuItem href="#">Item Submenu Seven</MenuItem>
+            <MenuItem href="#">Item Submenu Eight</MenuItem>
+            <MenuItem href="#">Item Submenu Nine</MenuItem>
+            <MenuItem href="#">Item Submenu Ten</MenuItem>
+            <MenuItem href="#">Item Submenu Eleven</MenuItem>
+            <MenuItem href="#">Item Submenu Twelve</MenuItem>
+          </ScrollableBlock>
+        </MenuItem>
+        <MenuItem submenu="Menu Item Four">
+          <MenuItem href="#">Item Submenu One</MenuItem>
+          <MenuItem href="#">Item Submenu Two</MenuItem>
+          <ScrollableBlock variant="alternate" height="200px">
+            <MenuItem href="#">Item Submenu Three</MenuItem>
+            <MenuItem href="#">Item Submenu Four</MenuItem>
+            <MenuItem href="#">Item Submenu Five</MenuItem>
+            <MenuItem href="#">Item Submenu Six</MenuItem>
+            <MenuItem href="#">Item Submenu Seven</MenuItem>
+            <MenuItem href="#">Item Submenu Eight</MenuItem>
+            <MenuItem href="#">Item Submenu Nine</MenuItem>
+            <MenuItem href="#">Item Submenu Ten</MenuItem>
+            <MenuItem href="#">Item Submenu Eleven</MenuItem>
+            <MenuItem href="#">Item Submenu Twelve</MenuItem>
+          </ScrollableBlock>
+          <MenuItem href="#">Item Submenu FFS</MenuItem>
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+};