@xenide-io/the-old-ui-theme 0.5.3 → 0.5.4

package/src/components/ui/CommandPalette.test.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { CommandPalette } from "@/components/ui/CommandPalette";
+
+describe("command palette", () => {
+  it("behaves as a modal dialog and restores focus when dismissed", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    function Fixture() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open commands
+          </button>
+          <CommandPalette
+            isOpen={open}
+            onClose={() => setOpen(false)}
+            items={[
+              { id: "reports", label: "Open reports", onSelect },
+            ]}
+          />
+        </>
+      );
+    }
+
+    render(<Fixture />);
+    const trigger = screen.getByRole("button", { name: "Open commands" });
+    await user.click(trigger);
+
+    expect(screen.getByRole("dialog", { name: "Command palette" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Search commands" })).toHaveFocus();
+
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+});

package/src/components/ui/CommandPalette.tsx

@@ -18,6 +18,10 @@ interface CommandPaletteProps {
   onClose: () => void;
   placeholder?: string;
   className?: string;
+  id?: string;
+  dataTest?: string;
+  inputId?: string;
+  inputDataTest?: string;
 }
 
 export function CommandPalette({
@@ -26,21 +30,32 @@ export function CommandPalette({
   onClose,
   placeholder = "Type a command or search...",
   className,
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
 }: CommandPaletteProps) {
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
 
   const filtered = items.filter((item) =>
-    item.label.toLowerCase().includes(query.toLowerCase())
+    item.label.toLowerCase().includes(query.toLowerCase()),
   );
 
   useEffect(() => {
-    if (isOpen) {
-      setQuery("");
-      setSelectedIndex(0);
-      inputRef.current?.focus();
-    }
+    if (!isOpen) return;
+    previousFocusRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    setQuery("");
+    setSelectedIndex(0);
+    inputRef.current?.focus();
+
+    return () => previousFocusRef.current?.focus();
   }, [isOpen]);
 
   useEffect(() => {
@@ -49,10 +64,12 @@ export function CommandPalette({
 
       switch (e.key) {
         case "ArrowDown":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i + 1) % filtered.length);
           break;
         case "ArrowUp":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
           break;
@@ -64,6 +81,22 @@ export function CommandPalette({
         case "Escape":
           onClose();
           break;
+        case "Tab": {
+          const focusable = panelRef.current?.querySelectorAll<HTMLElement>(
+            'input, button, [href], [tabindex]:not([tabindex="-1"])',
+          );
+          if (!focusable?.length) break;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+          break;
+        }
       }
     };
 
@@ -74,18 +107,32 @@ export function CommandPalette({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm">
+    <div
+      id={id}
+      data-test={dataTest}
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
       <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
         className={cn(
           "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-          className
+          className,
         )}
       >
         <div className="flex items-center gap-3 border-b border-ph-border px-4 py-3">
           <IconSearch className="h-5 w-5 text-ph-mutedtext" />
           <input
             ref={inputRef}
+            id={inputId}
+            data-test={inputDataTest}
             type="text"
+            aria-label="Search commands"
             value={query}
             onChange={(e) => {
               setQuery(e.target.value);
@@ -108,6 +155,8 @@ export function CommandPalette({
               <button
                 key={item.id}
                 type="button"
+                id={`command-${item.id}`}
+                data-test={`command-${item.id}`}
                 onClick={() => {
                   item.onSelect();
                   onClose();
@@ -117,7 +166,7 @@ export function CommandPalette({
                   "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
                   index === selectedIndex
                     ? "bg-ph-muted text-ph-ink"
-                    : "text-ph-subtle"
+                    : "text-ph-subtle",
                 )}
               >
                 {item.icon && <span className="h-5 w-5">{item.icon}</span>}

package/src/components/ui/DropdownMenu.tsx

@@ -35,11 +35,14 @@ interface DropdownOpenProps {
 }
 
 export interface DropdownMenuProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "children">,
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "children">,
     DropdownPlacementProps,
     DropdownOpenProps {
   /** Custom non-interactive trigger node, such as an avatar or icon chip. */
   trigger: ReactNode;
+  triggerId?: string;
+  triggerDataTest?: string;
   /** Accessible name when the trigger has no visible text. */
   "aria-label": string;
   children: ReactNode;
@@ -47,7 +50,8 @@ export interface DropdownMenuProps
 }
 
 export interface DropdownButtonProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "children">,
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "children">,
     DropdownPlacementProps,
     DropdownOpenProps {
   /** Visible button label. */
@@ -67,8 +71,12 @@ export interface DropdownButtonProps
 }
 
 export type DropdownItemProps = ButtonHTMLAttributes<HTMLButtonElement>;
-export type DropdownRadioGroupProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioGroup>;
-export type DropdownRadioItemProps = ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioItem>;
+export type DropdownRadioGroupProps = ComponentPropsWithoutRef<
+  typeof DropdownPrimitive.RadioGroup
+>;
+export type DropdownRadioItemProps = ComponentPropsWithoutRef<
+  typeof DropdownPrimitive.RadioItem
+>;
 
 const sizeClass: Record<ButtonSize, string> = {
   xs: "ph-btn-xs",
@@ -106,7 +114,11 @@ function DropdownContent({
         sticky="partial"
       >
         {children}
-        <DropdownPrimitive.Arrow className="ph-dropdown-arrow" width={12} height={6} />
+        <DropdownPrimitive.Arrow
+          className="ph-dropdown-arrow"
+          width={12}
+          height={6}
+        />
       </DropdownPrimitive.Content>
     </DropdownPrimitive.Portal>
   );
@@ -115,6 +127,8 @@ function DropdownContent({
 /** Collision-aware menu that flips sides and shifts its alignment to remain visible. */
 export function DropdownMenu({
   trigger,
+  triggerId,
+  triggerDataTest,
   children,
   align,
   side,
@@ -141,7 +155,13 @@ export function DropdownMenu({
         modal={modal}
       >
         <DropdownPrimitive.Trigger asChild disabled={disabled}>
-          <button type="button" className="ph-dropdown-trigger" aria-label={ariaLabel}>
+          <button
+            type="button"
+            id={triggerId}
+            data-test={triggerDataTest}
+            className="ph-dropdown-trigger"
+            aria-label={ariaLabel}
+          >
             {trigger}
           </button>
         </DropdownPrimitive.Trigger>
@@ -187,7 +207,9 @@ export function DropdownButton({
   disabled,
   ...props
 }: DropdownButtonProps) {
-  const trailing = sideIcon ?? <IconChevronDown className="h-4 w-4" aria-hidden />;
+  const trailing = sideIcon ?? (
+    <IconChevronDown className="h-4 w-4" aria-hidden />
+  );
 
   return (
     <div className={cn("ph-dropdown", className)} {...props}>
@@ -210,7 +232,12 @@ export function DropdownButton({
             )}
             aria-label={ariaLabel}
           >
-            <ButtonChrome label={label} icon={icon} sideIcon={trailing} split={split} />
+            <ButtonChrome
+              label={label}
+              icon={icon}
+              sideIcon={trailing}
+              split={split}
+            />
           </button>
         </DropdownPrimitive.Trigger>
         <DropdownContent
@@ -229,7 +256,12 @@ export function DropdownButton({
   );
 }
 
-export function DropdownItem({ className, children, disabled, ...props }: DropdownItemProps) {
+export function DropdownItem({
+  className,
+  children,
+  disabled,
+  ...props
+}: DropdownItemProps) {
   return (
     <DropdownPrimitive.Item asChild disabled={disabled}>
       <button
@@ -248,9 +280,16 @@ export function DropdownRadioGroup(props: DropdownRadioGroupProps) {
   return <DropdownPrimitive.RadioGroup {...props} />;
 }
 
-export function DropdownRadioItem({ className, children, ...props }: DropdownRadioItemProps) {
+export function DropdownRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownRadioItemProps) {
   return (
-    <DropdownPrimitive.RadioItem className={cn("ph-dropdown-item ph-dropdown-radio-item", className)} {...props}>
+    <DropdownPrimitive.RadioItem
+      className={cn("ph-dropdown-item ph-dropdown-radio-item", className)}
+      {...props}
+    >
       <span className="ph-dropdown-item-indicator" aria-hidden>
         <DropdownPrimitive.ItemIndicator>
           <IconCheck className="h-3.5 w-3.5" />

package/src/components/ui/SegmentedControl.tsx

@@ -27,9 +27,10 @@ export function SegmentedControl({ options, value, onChange, className }: Segmen
         <button
           key={option.value}
           type="button"
+          aria-pressed={value === option.value}
           onClick={() => onChange(option.value)}
           className={cn(
-            "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
+            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
             value === option.value
               ? "bg-ph-surface text-ph-ink shadow-ph"
               : "text-ph-subtle hover:text-ph-ink"

package/src/components/ui/SettingsLayout.tsx

@@ -20,7 +20,10 @@ export interface SettingsNavProps extends ComponentPropsWithoutRef<"div"> {
   groups: readonly SettingsNavGroup[];
 }
 
-export interface SettingsLayoutProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+export interface SettingsLayoutProps extends Omit<
+  ComponentPropsWithoutRef<"section">,
+  "title"
+> {
   title: ReactNode;
   description?: ReactNode;
   actions?: ReactNode;
@@ -40,12 +43,21 @@ export function SettingsNav({ groups, className, ...props }: SettingsNavProps) {
               <a
                 key={item.id}
                 href={item.href}
-                className={cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active")}
+                id={`settings-nav-${item.id}`}
+                data-test={`settings-nav-${item.id}`}
+                className={cn(
+                  "ph-settings-nav__item",
+                  item.active && "ph-settings-nav__item--active",
+                )}
                 aria-current={item.active ? "page" : undefined}
               >
-                {item.icon ? <span className="ph-settings-nav__icon">{item.icon}</span> : null}
+                {item.icon ? (
+                  <span className="ph-settings-nav__icon">{item.icon}</span>
+                ) : null}
                 <span>{item.label}</span>
-                {item.badge ? <span className="ph-settings-nav__badge">{item.badge}</span> : null}
+                {item.badge ? (
+                  <span className="ph-settings-nav__badge">{item.badge}</span>
+                ) : null}
               </a>
             ))}
           </div>
@@ -72,7 +84,9 @@ export function SettingsLayout({
           <h2>{title}</h2>
           {description ? <p>{description}</p> : null}
         </div>
-        {actions ? <div className="ph-settings-layout__actions">{actions}</div> : null}
+        {actions ? (
+          <div className="ph-settings-layout__actions">{actions}</div>
+        ) : null}
       </header>
 
       <details className="ph-settings-layout__mobile-nav">

package/src/components/ui/interaction-primitives.test.tsx

@@ -5,6 +5,8 @@ import { describe, expect, it, vi } from "vitest";
 import { DropdownButton, DropdownItem } from "@/components/ui/DropdownMenu";
 import { FilterMenu } from "@/components/ui/FilterBar";
 import { FilterChips } from "@/components/ui/FilterChips";
+import { SegmentedControl } from "@/components/ui/SegmentedControl";
+import { Chip } from "@/components/ui/Chip";
 
 describe("adaptive dropdown", () => {
   it("supports keyboard navigation, selection, closing, and focus restoration", async () => {
@@ -75,3 +77,53 @@ describe("filter chips", () => {
     expect(onToggle).not.toHaveBeenCalled();
   });
 });
+
+describe("chip", () => {
+  it("keeps selection and removal as separate keyboard controls", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const onRemove = vi.fn();
+
+    render(
+      <Chip onClick={onClick} onRemove={onRemove}>
+        React
+      </Chip>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Remove React" }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("segmented control", () => {
+  it("exposes and updates the selected option as a pressed button", async () => {
+    const user = userEvent.setup();
+
+    function Fixture() {
+      const [value, setValue] = useState("board");
+      return (
+        <SegmentedControl
+          value={value}
+          onChange={setValue}
+          options={[
+            { value: "board", label: "Board" },
+            { value: "list", label: "List" },
+          ]}
+        />
+      );
+    }
+
+    render(<Fixture />);
+    expect(screen.getByRole("button", { name: "Board" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await user.click(screen.getByRole("button", { name: "List" }));
+    expect(screen.getByRole("button", { name: "List" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+  });
+});

package/src/styles/suite-skin.css

@@ -78,41 +78,7 @@ body {
 
 .suite-app-layout__main {
   background: color-mix(in oklab, var(--ph-canvas) 94%, transparent);
-}
-
-/* The demo intentionally renders a large component catalogue. Let the
-   browser skip layout and paint for sections outside the viewport while
-   preserving their anchors for sidebar navigation. */
-.suite-app-layout__main > div > div > * {
-  content-visibility: auto;
-  contain-intrinsic-size: 0 560px;
-}
-
-@media print {
-  .suite-app-layout__main > div > div > * {
-    content-visibility: visible;
-  }
-}
-
-.suite-app-layout aside [data-test="nav-link"] {
-  position: relative;
-  transition:
-    color 160ms ease,
-    background-color 160ms ease,
-    box-shadow 160ms ease;
-}
-
-.suite-app-layout aside [data-test="nav-link"][aria-current="page"] {
-  background: linear-gradient(
-    90deg,
-    color-mix(in oklab, var(--ph-accent) 14%, var(--ph-muted)),
-    color-mix(in oklab, var(--ph-muted) 60%, transparent)
-  );
-  box-shadow: inset 2px 0 0 var(--ph-accent);
-}
-
-.suite-app-layout aside [data-test="nav-link"][aria-current="page"] svg {
-  color: var(--ph-accent);
+  scrollbar-gutter: stable;
 }
 
 @supports not (background: color-mix(in oklab, white, transparent)) {
@@ -531,6 +497,7 @@ button:hover > .ph-card {
   background: color-mix(in oklab, var(--ph-canvas) 86%, transparent);
   -webkit-backdrop-filter: blur(12px) saturate(1.4);
   backdrop-filter: blur(12px) saturate(1.4);
+  padding-bottom: env(safe-area-inset-bottom);
   box-shadow: 0 -1px 0 var(--ph-border-subtle);
 }
 @supports not (backdrop-filter: blur(1px)) {
@@ -545,6 +512,21 @@ button:hover > .ph-card {
   -webkit-overflow-scrolling: touch;
 }
 
+/* Compact desktop controls keep their density; coarse pointers get a reliable
+   44px hit area without app-specific overrides. */
+@media (pointer: coarse) {
+  .ph-btn.ph-btn-raised:not(.ph-btn-lg) {
+    --ph-btn-control-size: 2.75rem;
+  }
+  .ph-btn:not(.ph-btn-raised) {
+    min-height: 2.75rem;
+  }
+  .ph-btn-circle,
+  .ph-btn-square {
+    min-width: 2.75rem;
+  }
+}
+
 /* ── Ask AI answer content ───────────────────────────────────────────── */
 .suite-ai-blocknote .bn-editor {
   min-height: 0;

package/src/suite/components/app-switcher.tsx

@@ -1,32 +1,32 @@
-'use client';
+"use client";
 
-import Image from 'next/image';
-import { useState, type ReactNode } from 'react';
-import { Check, NavArrowDown as ChevronDown } from 'iconoir-react';
+import Image from "next/image";
+import { useState, type ReactNode } from "react";
+import { Check, NavArrowDown as ChevronDown } from "iconoir-react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 import type {
   SuiteDropdownItemComponent,
   SuiteDropdownMenuComponent,
-} from '../lib/injected';
+} from "../lib/injected";
 
 export function appSwitcherTriggerClass(open: boolean, collapsed = false) {
   return cn(
-    'group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200',
-    collapsed ? 'h-11 w-11 justify-center px-0 py-0' : 'w-full',
+    "group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200",
+    collapsed ? "h-11 w-11 justify-center px-0 py-0" : "w-full",
     open
-      ? 'border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15'
-      : 'border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm',
+      ? "border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15"
+      : "border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm",
   );
 }
 
 export function appSwitcherMarkClass() {
-  return 'h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]';
+  return "h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]";
 }
 
 /** No sticky Radix highlight while waiting for cross-app redirect. */
 export function appSwitcherMenuItemClass() {
-  return 'rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80';
+  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80";
 }
 
 export function AppSwitcherMark({
@@ -39,8 +39,8 @@ export function AppSwitcherMark({
   return (
     <span
       className={cn(
-        'relative shrink-0',
-        collapsed && 'group-hover:scale-[1.02]',
+        "relative shrink-0",
+        collapsed && "group-hover:scale-[1.02]",
       )}
     >
       {children}
@@ -59,15 +59,15 @@ export function AppSwitcherChevron({
     return (
       <span
         className={cn(
-          'absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors',
-          open && 'border-ph-brand/40 bg-ph-brand/10',
+          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors",
+          open && "border-ph-brand/40 bg-ph-brand/10",
         )}
         aria-hidden
       >
         <ChevronDown
           className={cn(
-            'h-2 w-2 text-ph-mutedtext transition-transform duration-200',
-            open && 'rotate-180 text-ph-brand',
+            "h-2 w-2 text-ph-mutedtext transition-transform duration-200",
+            open && "rotate-180 text-ph-brand",
           )}
         />
       </span>
@@ -77,17 +77,17 @@ export function AppSwitcherChevron({
   return (
     <span
       className={cn(
-        'border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200',
+        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200",
         open
-          ? 'border-ph-brand/35 bg-ph-brand/10 text-ph-brand'
-          : 'text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface',
+          ? "border-ph-brand/35 bg-ph-brand/10 text-ph-brand"
+          : "text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface",
       )}
       aria-hidden
     >
       <ChevronDown
         className={cn(
-          'h-3 w-3 transition-transform duration-200',
-          open && 'rotate-180',
+          "h-3 w-3 transition-transform duration-200",
+          open && "rotate-180",
         )}
       />
     </span>
@@ -115,6 +115,8 @@ export function AppSwitcher({
   collapsed = false,
   dropdownMenu: DropdownMenu,
   dropdownItem: DropdownItem,
+  triggerId,
+  triggerDataTest,
 }: {
   apps: SuiteAppEntry[];
   currentApp: string;
@@ -124,13 +126,17 @@ export function AppSwitcher({
   collapsed?: boolean;
   dropdownMenu: SuiteDropdownMenuComponent;
   dropdownItem: SuiteDropdownItemComponent;
+  triggerId?: string;
+  triggerDataTest?: string;
 }) {
   const [open, setOpen] = useState(false);
 
   return (
     <DropdownMenu
       aria-label="Switch application"
-      className={collapsed ? 'w-11 shrink-0' : 'min-w-0 flex-1'}
+      triggerId={triggerId ?? "app-switcher-trigger"}
+      triggerDataTest={triggerDataTest ?? "app-switcher-trigger"}
+      className={collapsed ? "w-11 shrink-0" : "min-w-0 flex-1"}
       panelClassName="w-64"
       align="start"
       open={open}
@@ -150,13 +156,14 @@ export function AppSwitcher({
         </span>
       }
     >
-      <div className="p-1" data-test="app-switcher-menu">
+      <div id="app-switcher-menu" className="p-1" data-test="app-switcher-menu">
         <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
           Switch application
         </p>
         {apps.map((app) => (
           <DropdownItem
             key={app.slug}
+            id={`switch-app-${app.slug}`}
             data-test={`switch-app-${app.slug}`}
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => {