MNTOR-5062 - Prevent bento items from opening a second redirect as a pop (#6205)

* replace programmatic link triggers with real <a> clicks

* add unit tests

* fix keyboard navigation for links in menu

* Use react-aria-prescribed method for link-menuitems (#6212)

See https://react-spectrum.adobe.com/react-aria/useMenu.html#links

---------

Co-authored-by: Vincent <[email protected]>

Author: codemist

src/app/components/client/toolbar/AppPicker.module.scss

@@ -74,7 +74,7 @@
     }
   }
 
-  ul {
+  .menuWrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: tokens.$spacing-md;
@@ -83,6 +83,8 @@
   }
 
   .menuItemWrapper {
+    text-decoration: none;
+
     &[data-key="mozilla"] {
       grid-column: 1 / 4;
     }

src/app/components/client/toolbar/AppPicker.test.tsx

@@ -8,8 +8,14 @@ import { userEvent } from "@testing-library/user-event";
 import { composeStory } from "@storybook/react";
 import Meta, { AppPickerDefault } from "./AppPicker.stories";
 import { axe } from "jest-axe";
+import { gaEvent } from "../../../functions/client/gaEvent";
+
 jest.mock("../../../hooks/useTelemetry");
 
+jest.mock("../../../functions/client/gaEvent", () => ({
+  gaEvent: jest.fn(),
+}));
+
 it("passes the axe accessibility test suite", async () => {
   const ComposedAppPicker = composeStory(AppPickerDefault, Meta);
   const { container } = render(<ComposedAppPicker />);
@@ -38,3 +44,83 @@ it("opens and closes the app picker", async () => {
     screen.queryByRole("menu", { name: "⁨Mozilla⁩ apps and services" }),
   ).not.toBeInTheDocument();
 });
+
+it("fires a GA event when an app link is clicked", async () => {
+  const user = userEvent.setup();
+  const ComposedAppPicker = composeStory(AppPickerDefault, Meta);
+  render(<ComposedAppPicker />);
+
+  const trigger = screen.getByRole("button", {
+    name: "⁨Mozilla⁩ apps and services",
+  });
+  await user.click(trigger);
+
+  const vpnLink = screen.getByRole("menuitem", { name: /vpn/i });
+  await user.click(vpnLink);
+
+  expect(gaEvent).toHaveBeenCalledWith({
+    category: "bento",
+    action: "bento-app-link-click",
+    label: "vpn",
+  });
+});
+
+it("fires a GA event when the 'By Mozilla' link is clicked", async () => {
+  const user = userEvent.setup();
+  const ComposedAppPicker = composeStory(AppPickerDefault, Meta);
+  render(<ComposedAppPicker />);
+
+  const trigger = screen.getByRole("button", {
+    name: "⁨Mozilla⁩ apps and services",
+  });
+  await user.click(trigger);
+
+  const mozillaLink = screen.getByRole("menuitem", {
+    name: "Made by ⁨Mozilla⁩",
+  });
+  await user.click(mozillaLink);
+
+  expect(gaEvent).toHaveBeenCalledWith({
+    category: "bento",
+    action: "bento-app-link-click",
+    label: "Mozilla",
+  });
+});
+
+it("activates a link with Enter or Space via keyboard navigation", async () => {
+  const user = userEvent.setup();
+  const ComposedAppPicker = composeStory(AppPickerDefault, Meta);
+  render(<ComposedAppPicker />);
+
+  const trigger = screen.getByRole("button", {
+    name: "⁨Mozilla⁩ apps and services",
+  });
+  await user.click(trigger);
+
+  // Navigate to the VPN item using the keyboard
+  await user.keyboard("{ArrowDown}");
+
+  const vpnLink = screen.getByRole("menuitem", { name: /vpn/i });
+  expect(vpnLink).toHaveFocus();
+
+  // press Enter
+  await user.keyboard("{Enter}");
+  expect(gaEvent).toHaveBeenCalledWith({
+    category: "bento",
+    action: "bento-app-link-click",
+    label: "vpn",
+  });
+
+  await user.click(trigger);
+
+  // Navigate to VPN item again
+  await user.keyboard("{ArrowDown}");
+
+  // press Space
+  await user.keyboard(" ");
+  expect(gaEvent).toHaveBeenCalledWith({
+    category: "bento",
+    action: "bento-app-link-click",
+    label: "vpn",
+  });
+});