fix(ui): layout batch (PageShell wrap, AlertDialog merge, skip link, toaster test)

packages/i18n/src/generated-resources.ts

@@ -889,6 +889,7 @@ export default {
     'ui.sidebar.back': '',
     'ui.sidebar.close': '',
     'ui.sidebar.open': '',
+    'ui.sidebar.skip_to_content': '',
     'ui.switcher.label': '',
     'ui.switcher.single_locale': '',
     'ui.topbar.log_out': '',

packages/i18n/src/keys.generated.ts

@@ -1134,6 +1134,7 @@ export const keys = {
       back: 'ui.sidebar.back',
       close: 'ui.sidebar.close',
       open: 'ui.sidebar.open',
+      skip_to_content: 'ui.sidebar.skip_to_content',
     },
     switcher: {
       label: 'ui.switcher.label',

packages/ui/locales/en.json

@@ -55,7 +55,8 @@
   "sidebar": {
     "open": "Open sidebar",
     "close": "Close sidebar",
-    "back": "Back"
+    "back": "Back",
+    "skip_to_content": "Skip to content"
   },
   "public_nav": {
     "docs": "Docs",

packages/ui/locales/es.json

@@ -55,7 +55,8 @@
   "sidebar": {
     "open": "Abrir barra lateral",
     "close": "Cerrar barra lateral",
-    "back": "Volver"
+    "back": "Volver",
+    "skip_to_content": "Saltar al contenido"
   },
   "public_nav": {
     "docs": "Documentación",

packages/ui/src/components/PageShell.test.tsx

@@ -186,6 +186,22 @@ function LegacyPage() {
   return null;
 }
 
+describe('PageShell actions', () => {
+  it('lets the actions wrap and shrink instead of overflowing', () => {
+    render(
+      <PageHeadingProvider>
+        <PageShell title="Records" actions={<button type="button">New</button>}>
+          body
+        </PageShell>
+      </PageHeadingProvider>,
+    );
+    const slot = screen.getByRole('button', { name: 'New' }).parentElement as HTMLElement;
+    expect(slot.className).toContain('flex-wrap');
+    expect(slot.className).toContain('min-w-0');
+    expect(slot.className).not.toContain('flex-shrink-0');
+  });
+});
+
 describe('useReportPageHeading positional overload', () => {
   it('still reports title and section', () => {
     render(

packages/ui/src/components/PageShell.tsx

@@ -97,7 +97,7 @@ export function PageShell({
           // control in the phone bar; repeating it here is a duplicate button.
           <div
             className={cn(
-              'flex flex-shrink-0 items-center gap-2',
+              'flex min-w-0 flex-wrap items-center justify-end gap-2',
               mobileAction && 'hidden sm:flex',
             )}
           >

packages/ui/src/components/ui/alert-dialog.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import type React from 'react';
+import { describe, expect, it } from 'vitest';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from './alert-dialog';
+
+function open(action: React.ReactNode, cancel?: React.ReactNode) {
+  render(
+    <AlertDialog open>
+      <AlertDialogContent>
+        <AlertDialogTitle>Delete</AlertDialogTitle>
+        <AlertDialogDescription>Sure?</AlertDialogDescription>
+        {cancel}
+        {action}
+      </AlertDialogContent>
+    </AlertDialog>,
+  );
+}
+
+describe('AlertDialogAction', () => {
+  it('lets a caller colour class win over the variant via tailwind-merge', () => {
+    open(<AlertDialogAction className="bg-destructive">Go</AlertDialogAction>);
+    const btn = screen.getByRole('button', { name: 'Go' });
+    expect(btn.className).toContain('bg-destructive');
+    expect(btn.className.split(/\s+/)).not.toContain('bg-primary');
+    expect(btn.getAttribute('data-slot')).toBe('alert-dialog-action');
+  });
+
+  it('honours the variant prop', () => {
+    open(<AlertDialogAction variant="destructive">Go</AlertDialogAction>);
+    expect(screen.getByRole('button', { name: 'Go' }).className).toContain('bg-destructive');
+  });
+});
+
+describe('AlertDialogCancel', () => {
+  it('lets a caller class win over the outline variant', () => {
+    open(<span />, <AlertDialogCancel className="bg-red-500">No</AlertDialogCancel>);
+    const btn = screen.getByRole('button', { name: 'No' });
+    expect(btn.className).toContain('bg-red-500');
+    expect(btn.className).not.toContain('bg-background');
+  });
+});

packages/ui/src/components/ui/alert-dialog.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Button } from '@simple-module-py/ui/components/ui/button';
+import { buttonVariants } from '@simple-module-py/ui/components/ui/button';
 import { cn } from '@simple-module-py/ui/lib/utils';
+import type { VariantProps } from 'class-variance-authority';
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import type * as React from 'react';
 
@@ -131,16 +132,13 @@ function AlertDialogAction({
   variant = 'default',
   size = 'default',
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & VariantProps<typeof buttonVariants>) {
   return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
+    <AlertDialogPrimitive.Action
+      data-slot="alert-dialog-action"
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
   );
 }
 
@@ -149,16 +147,13 @@ function AlertDialogCancel({
   variant = 'outline',
   size = 'default',
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & VariantProps<typeof buttonVariants>) {
   return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
+    <AlertDialogPrimitive.Cancel
+      data-slot="alert-dialog-cancel"
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
   );
 }
 

packages/ui/src/layouts/SidebarLayout.toast.test.tsx

@@ -35,6 +35,7 @@ vi.mock('./SidebarUserMenu', () => ({ SidebarUserMenu: () => null }));
 
 import { toast } from 'sonner';
 import { AdminLayout } from './AdminLayout';
+import { AuthenticatedLayout } from './AuthenticatedLayout';
 
 describe('AdminLayout toasts', () => {
   it('renders a toast fired from an admin page', async () => {
@@ -49,4 +50,35 @@ describe('AdminLayout toasts', () => {
     expect(await screen.findByText('Managed key refused')).toBeTruthy();
     expect(document.querySelectorAll('[data-sonner-toaster]').length).toBe(1);
   });
+
+  it('mounts exactly one toaster in the app layout too', async () => {
+    render(
+      <AuthenticatedLayout>
+        <p>page</p>
+      </AuthenticatedLayout>,
+    );
+    await act(async () => {
+      toast.success('Saved from the app layout');
+    });
+    expect(await screen.findByText('Saved from the app layout')).toBeTruthy();
+    expect(document.querySelectorAll('[data-sonner-toaster]').length).toBe(1);
+  });
+});
+
+describe('SidebarLayout skip link', () => {
+  it('renders a skip link as the first focusable element targeting #main', () => {
+    render(
+      <AdminLayout>
+        <p>page</p>
+      </AdminLayout>,
+    );
+    const link = document.querySelector('a[href="#main"]') as HTMLElement;
+    expect(link.getAttribute('href')).toBe('#main');
+    expect(link.className).toContain('sr-only');
+    expect(link.className).toContain('focus:not-sr-only');
+    expect(document.querySelector('a[href], button, [tabindex="0"]')).toBe(link);
+    const main = document.getElementById('main');
+    expect(main?.getAttribute('tabindex')).toBe('-1');
+    expect(main?.textContent).toContain('page');
+  });
 });

packages/ui/src/layouts/SidebarLayout.tsx

@@ -120,6 +120,12 @@ function SidebarShell({ children, menuKey, theme, headerSlot, footerNavSlot }: S
       <BrandingHead />
       <BrandingBanner />
       <DemoBanner />
+      <a
+        href="#main"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-lg focus:ring-2 focus:ring-ring focus:outline-none"
+      >
+        {t(keys.ui.sidebar.skip_to_content)}
+      </a>
       {/* --app-chrome-h names the height of the bar above the content — the
           topbar on lg, the mobile bar below it, both mutually exclusive.
           Both bars size themselves off this one variable (h-[var(--app-chrome-h)])
@@ -259,7 +265,9 @@ function SidebarShell({ children, menuKey, theme, headerSlot, footerNavSlot }: S
             currentUrl={currentUrl}
             activeMenuItem={active}
           />
-          <div className="flex-1">{children}</div>
+          <div id="main" tabIndex={-1} className="flex-1 outline-none">
+            {children}
+          </div>
           <BrandingFooter
             appName={appName}
             logoUrl={logoUrl}