handleFocusGuard("next", ev)}
+ />
+ >
);
return (
diff --git a/src/components/popover-container/popover-container.pw.tsx b/src/components/popover-container/popover-container.pw.tsx
index 1b939d41fb..1021f0e5ce 100644
--- a/src/components/popover-container/popover-container.pw.tsx
+++ b/src/components/popover-container/popover-container.pw.tsx
@@ -34,6 +34,7 @@ import {
WithRenderCloseButtonComponent,
PopoverContainerComponentCoverButton,
PopoverContainerFocusOrder,
+ WithRadioButtons,
} from "../popover-container/components.test-pw";
import Portrait from "../portrait";
@@ -624,6 +625,25 @@ test.describe("Check props of Popover Container component", () => {
await expect(third).toBeFocused();
});
+ test("should focus the next focusable element outside of the container once finished keyboard navigating through the container's content", async ({
+ mount,
+ page,
+ }) => {
+ await mount(
);
+
+ const openButton = page.getByRole("button", { name: "open" });
+ const container = popoverContainerContent(page);
+ const additionalButton = page.getByRole("button", { name: "foo" });
+
+ await openButton.click();
+ await page.keyboard.press("Tab"); // focus on first radio button
+ await page.keyboard.press("Tab"); // focus on close icon
+ await page.keyboard.press("Tab"); // focus outside of container and on to additional button
+
+ await expect(container).not.toBeVisible();
+ await expect(additionalButton).toBeFocused();
+ });
+
test.describe("Accessibility tests", () => {
test("should check accessibility for Default example", async ({
mount,
diff --git a/src/components/popover-container/popover-container.test.tsx b/src/components/popover-container/popover-container.test.tsx
index e5efb70905..60b8eff0db 100644
--- a/src/components/popover-container/popover-container.test.tsx
+++ b/src/components/popover-container/popover-container.test.tsx
@@ -12,6 +12,8 @@ import { testStyledSystemPadding } from "../../__spec_helper__/__internal__/test
import PopoverContainer from "./popover-container.component";
import { Select, Option } from "../select";
import useMediaQuery from "../../hooks/useMediaQuery";
+import Button from "../button";
+import RadioButton, { RadioButtonGroup } from "../radio-button";
jest.mock("../../hooks/useMediaQuery");
@@ -531,6 +533,89 @@ describe("closing the popup", () => {
});
});
+test("when content is navigated via keyboard, the next focusable item should be focused and popup closed", async () => {
+ const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+ render(
+ <>
+
(
+
+ )}
+ >
+
+
+
+
+
+
+ >,
+ );
+
+ const openButton = screen.getByRole("button", { name: "open button" });
+ await user.click(openButton);
+ await user.tab(); // tab to close icon
+ await user.tab(); // tab to RadioButtonGroup
+ await user.tab(); // tab to Example Button (outside of popup)
+
+ const popup = await screen.findByRole("dialog");
+ await waitFor(() => expect(popup).not.toBeVisible());
+
+ const exampleButton = screen.getByRole("button", { name: "Example Button" });
+ expect(exampleButton).toHaveFocus();
+});
+
+test("when the popover is opened and shift tab key is pressed, the open button should be focused and popup closed", async () => {
+ const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+ render(
+ <>
+
(
+
+ )}
+ >
+
+
+
+
+
+
+ >,
+ );
+
+ const openButton = screen.getByRole("button", { name: "open button" });
+ await user.click(openButton);
+ await user.tab(); // tab to close icon
+ await user.tab(); // tab to content
+ await user.tab({ shift: true }); // shift tab back to close icon
+ await user.tab({ shift: true }); // shift tab back to the opening trigger element
+
+ const popup = await screen.findByRole("dialog");
+ await waitFor(() => expect(popup).not.toBeVisible());
+ expect(openButton).toHaveFocus();
+});
+
+test("if only the open trigger is the only focusable element on screen, when the popover is opened and tab key is used to navigate content, it should navigate back to the opening trigger", async () => {
+ const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+ render(
+ <>
+
+ >,
+ );
+
+ const openButton = screen.getByRole("button", { name: "My popup" });
+ await user.click(openButton);
+ await user.tab(); // tab to close icon
+ await user.tab(); // tab back out of content to the opening trigger element
+
+ expect(openButton).toHaveFocus();
+});
+
testStyledSystemPadding(
(props) => (