fix(frontend): a11y, docs, and test coverage across 4 components

frontend/src/components/Features.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Features } from "./Features";
+
+describe("Features", () => {
+  it("renders all expected feature titles", () => {
+    render(<Features />);
+
+    expect(screen.getByText("Per-Second Streaming")).toBeInTheDocument();
+    expect(screen.getByText("Zero Overhead")).toBeInTheDocument();
+    expect(screen.getByText("Institutional Grade")).toBeInTheDocument();
+  });
+
+  it("renders exactly three feature cards", () => {
+    render(<Features />);
+
+    const heading = screen.getByRole("heading", { level: 3, name: "Per-Second Streaming" });
+    const cardGrid = heading.closest("div.grid");
+    expect(cardGrid).not.toBeNull();
+
+    const headings = screen.getAllByRole("heading", { level: 3 });
+    expect(headings).toHaveLength(3);
+  });
+});

frontend/src/components/MobileMockup.tsx

@@ -13,9 +13,13 @@ export const MobileMockup = () => {
     }, []);
 
     return (
-        <div className="relative mx-auto w-[280px] h-[580px] md:w-[320px] md:h-[640px] animate-float">
+        <div
+            role="img"
+            aria-label="Mobile app mockup showing an available balance of $42,910.45 with a live per-second payment stream and a withdraw balance button"
+            className="relative mx-auto w-[280px] h-[580px] md:w-[320px] md:h-[640px] animate-float"
+        >
             {/* Phone Case/Outer Frame */}
-            <div className="absolute inset-0 rounded-[3rem] border-[8px] border-slate-800 bg-black shadow-2xl overflow-hidden ring-1 ring-white/10">
+            <div aria-hidden="true" className="absolute inset-0 rounded-[3rem] border-[8px] border-slate-800 bg-black shadow-2xl overflow-hidden ring-1 ring-white/10">
                 {/* Screen Content */}
                 <div className="relative h-full w-full bg-[#050510] flex flex-col pt-12 px-6">
                     {/* Status Bar / Notch */}
@@ -83,7 +87,7 @@ export const MobileMockup = () => {
             </div>
 
             {/* External decorative glow */}
-            <div className="absolute -inset-10 bg-accent opacity-20 blur-[80px] -z-10 rounded-full animate-pulse-slow"></div>
+            <div aria-hidden="true" className="absolute -inset-10 bg-accent opacity-20 blur-[80px] -z-10 rounded-full animate-pulse-slow"></div>
         </div>
     );
 };

frontend/src/components/Navbar.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useWallet } from "@/context/wallet-context";
 import { ModeToggle } from "./ModeToggle";
 import { WalletButton } from "./wallet/WalletButton";
+import { useModalDialog } from "@/hooks/useModalDialog";
 
 const NAV_LINKS = [
   { href: "/", label: "Home" },
@@ -69,23 +70,32 @@ export const Navbar = () => {
       </div>
 
       {isMobileMenuOpen && (
-        <div
-          data-testid="mobile-menu"
-          className="flex flex-col gap-4 px-6 pb-4 text-sm font-semibold text-slate-400 md:hidden"
-        >
-          {NAV_LINKS.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className="transition-colors hover:text-accent"
-              onClick={() => setIsMobileMenuOpen(false)}
-            >
-              {link.label}
-            </Link>
-          ))}
-          <ModeToggle />
-        </div>
+        <MobileMenu onClose={() => setIsMobileMenuOpen(false)} />
       )}
     </nav>
   );
 };
+
+const MobileMenu = ({ onClose }: { onClose: () => void }) => {
+  const dialogRef = useModalDialog({ onClose });
+
+  return (
+    <div
+      ref={dialogRef}
+      data-testid="mobile-menu"
+      className="flex flex-col gap-4 px-6 pb-4 text-sm font-semibold text-slate-400 md:hidden"
+    >
+      {NAV_LINKS.map((link) => (
+        <Link
+          key={link.href}
+          href={link.href}
+          className="transition-colors hover:text-accent"
+          onClick={onClose}
+        >
+          {link.label}
+        </Link>
+      ))}
+      <ModeToggle />
+    </div>
+  );
+};

frontend/src/components/ui/UI_COMPONENTS.md

@@ -116,6 +116,12 @@ A glass-morphism card container with optional hover and glow effects.
 | `glow` | `boolean` | `false` | Adds a glowing shadow effect |
 | `hover` | `boolean` | `true` | Enables hover lift effect |
 
+### Behavior Notes
+
+- **glow**: Applies the `glow-card` class for an accent-colored ambient glow around the card
+- **hover** (default `true`): Lifts the card 1px on hover and adds an accent-tinted border/shadow; set `hover={false}` for static cards
+- `children` is required — `Card` renders only the passed content inside the glass container
+
 ### Usage Examples
 
 ```tsx