sts-sponsors team mailing list archive

[Peter Makowski <mp+441338@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:sidenav-collapse-on-route-change-MAASENG-1576 into maas-site-manager:main.

Commit message:
sidenav collapse on route change MAASENG-1576

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/441338

QA Steps:
Make sure the navigation is collapsed and you're viewing the page using desktop viewport size
Click a navigation link
Move the mouse away from the navigation
Navigation should automatically collapse
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:sidenav-collapse-on-route-change-MAASENG-1576 into maas-site-manager:main.

diff --git a/frontend/src/components/Navigation/Navigation.test.tsx b/frontend/src/components/Navigation/Navigation.test.tsx
index e0609fc..79ce384 100644
--- a/frontend/src/components/Navigation/Navigation.test.tsx
+++ b/frontend/src/components/Navigation/Navigation.test.tsx
@@ -2,7 +2,7 @@ import { MemoryRouter } from "react-router-dom";
 
 import Navigation, { navItems, navBottomItems } from "./Navigation";
 
-import { render, screen, userEvent } from "@/test-utils";
+import { render, screen, userEvent, waitFor } from "@/test-utils";
 
 describe("Navigation", () => {
   it("displays navigation", () => {
@@ -89,4 +89,17 @@ describe("Navigation", () => {
 
     expect(primaryNavigation).toHaveClass("is-pinned");
   });
+
+  it("removes focus from the current element after clicking the link", async () => {
+    render(
+      <MemoryRouter initialEntries={[{ pathname: "/", key: "testKey" }]}>
+        <Navigation />
+      </MemoryRouter>,
+    );
+    const navigationLinks = screen.getAllByRole("link");
+    for (const link of navigationLinks) {
+      await userEvent.click(link);
+      expect(link).not.toHaveFocus();
+    }
+  });
 });
diff --git a/frontend/src/components/Navigation/NavigationBanner/NavigationBanner.tsx b/frontend/src/components/Navigation/NavigationBanner/NavigationBanner.tsx
index 49b4420..61e9607 100644
--- a/frontend/src/components/Navigation/NavigationBanner/NavigationBanner.tsx
+++ b/frontend/src/components/Navigation/NavigationBanner/NavigationBanner.tsx
@@ -11,6 +11,11 @@ const NavigationBanner = ({ children }: { children?: React.ReactNode }): JSX.Ele
         aria-current={isSelected(location.pathname, homepageLink)}
         aria-label={homepageLink.label}
         className="p-panel__logo"
+        onClick={(event) => {
+          // removing the focus from the link element after click
+          // this allows the side navigation to collapse on mouseleave
+          event.currentTarget.blur();
+        }}
         to={homepageLink.url}
       >
         <div className="p-navigation__tagged-logo">
diff --git a/frontend/src/components/Navigation/NavigationItem/NavigationItem.tsx b/frontend/src/components/Navigation/NavigationItem/NavigationItem.tsx
index 0bc3eb4..364545b 100644
--- a/frontend/src/components/Navigation/NavigationItem/NavigationItem.tsx
+++ b/frontend/src/components/Navigation/NavigationItem/NavigationItem.tsx
@@ -22,6 +22,11 @@ const NavigationItem = ({ navLink, path }: Props): JSX.Element => {
         aria-current={isSelected(path, navLink) ? "page" : undefined}
         className="p-side-navigation__link"
         id={`${navLink.label}-${id}`}
+        onClick={(event) => {
+          // removing the focus from the link element after click
+          // this allows the side navigation to collapse on mouseleave
+          event.currentTarget.blur();
+        }}
         to={navLink.url}
       >
         {navLink.icon ? (