@classic-homes/theme-svelte 1.7.1 → 1.8.1

package/dist/__tests__/a11y/PublicLayout.a11y.test.js

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'vitest-axe';
+import { createRawSnippet } from 'svelte';
+import PublicLayout from '../../lib/components/layout/PublicLayout.svelte';
+function textSnippet(text) {
+    return createRawSnippet(() => ({
+        render: () => `<span>${text}</span>`,
+    }));
+}
+const navigation = [
+    { name: 'Orientation', href: '/orientation' },
+    { name: 'Home Info', href: '/home-information-sheet' },
+    { name: 'Warranty Transfer', href: '/warranty-transfer', active: true },
+];
+const footerLinks = [
+    {
+        title: 'Resources',
+        items: [
+            { name: 'Documentation', href: '/docs' },
+            { name: 'GitHub', href: 'https://github.com', external: true },
+        ],
+    },
+];
+function renderLayout(extra = {}) {
+    return render(PublicLayout, {
+        props: { navigation, footerLinks, children: textSnippet('Page content'), ...extra },
+    });
+}
+/** A drawer CTA that calls the `close` argument PublicLayout hands to mobileNavEnd. */
+function ctaSnippet(label) {
+    return createRawSnippet((args) => ({
+        render: () => `<button type="button">${label}</button>`,
+        setup: (el) => {
+            el.addEventListener('click', () => args().close());
+        },
+    }));
+}
+/**
+ * jsdom has no layout engine, so getBoundingClientRect() returns zeros and target
+ * size cannot be measured here. These assert the classes that produce a 44x44px
+ * target (WCAG 2.5.5); the geometry itself is verified in a real browser.
+ */
+describe('PublicLayout accessibility', () => {
+    it('should have no axe violations', async () => {
+        const { container } = renderLayout();
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('should expand desktop nav links to a 44px touch target', () => {
+        renderLayout();
+        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
+        const links = [...nav.querySelectorAll(':scope > a')];
+        expect(links).toHaveLength(navigation.length);
+        for (const link of links) {
+            // 20px text line box + 2 x 12px padding = 44px border box; -m-3 cancels
+            // it in layout. A real box, not an ::after overlay: iPadOS trackpad
+            // hit-testing missed the pseudo-element but honours padding.
+            expect(link.className).toContain('p-3');
+            expect(link.className).toContain('-m-3');
+            expect(link.className).not.toContain('after:');
+        }
+    });
+    it('should give the logo link a 44px-tall touch target', () => {
+        renderLayout();
+        const logo = screen.getByRole('banner').querySelector('a[href="/"]');
+        expect(logo?.className).toContain('relative');
+        expect(logo?.className).toContain('after:h-11');
+    });
+    it('should give mobile drawer links a 44px touch target', async () => {
+        renderLayout();
+        // The drawer is only in the DOM while the menu is open.
+        await userEvent.click(screen.getByRole('button', { name: 'Open menu' }));
+        const drawerNav = screen.getByRole('navigation', { name: 'Mobile navigation' });
+        for (const link of drawerNav.querySelectorAll('a')) {
+            expect(link.className).toContain('py-3');
+        }
+    });
+    it('should give footer links a 44px-tall full-width touch target', () => {
+        renderLayout();
+        const footerNav = screen.getByRole('navigation', { name: 'Footer navigation' });
+        for (const link of footerNav.querySelectorAll('a')) {
+            // block + py-3 = 12 + 20 + 12; the list carries no space-y, so rows never overlap
+            expect(link.className).toContain('block');
+            expect(link.className).toContain('py-3');
+        }
+    });
+    it('should render headerEnd unwrapped when there is no mobileNavEnd', () => {
+        renderLayout({ headerEnd: textSnippet('Service Request') });
+        const cta = screen.getByText('Service Request');
+        expect(cta.parentElement?.className).not.toContain('hidden');
+    });
+    it('should hide headerEnd below the mobile breakpoint when mobileNavEnd is given', () => {
+        renderLayout({
+            headerEnd: textSnippet('Service Request'),
+            mobileNavEnd: ctaSnippet('Drawer CTA'),
+        });
+        const cta = screen.getByText('Service Request');
+        expect(cta.parentElement?.className).toContain('hidden');
+        expect(cta.parentElement?.className).toContain('md:contents');
+    });
+    it('should render mobileNavEnd in the drawer and close it via the close argument', async () => {
+        renderLayout({
+            headerEnd: textSnippet('Service Request'),
+            mobileNavEnd: ctaSnippet('Drawer CTA'),
+        });
+        expect(screen.queryByRole('button', { name: 'Drawer CTA' })).toBeNull();
+        await userEvent.click(screen.getByRole('button', { name: 'Open menu' }));
+        const drawerNav = screen.getByRole('navigation', { name: 'Mobile navigation' });
+        const cta = screen.getByRole('button', { name: 'Drawer CTA' });
+        expect(drawerNav.contains(cta)).toBe(true);
+        await userEvent.click(cta);
+        expect(screen.queryByRole('navigation', { name: 'Mobile navigation' })).toBeNull();
+    });
+    it('should cue hover for a trackpad pointer that reports hover: none', () => {
+        renderLayout();
+        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
+        const footerNav = screen.getByRole('navigation', { name: 'Footer navigation' });
+        // hoverOnlyWhenSupported gates hover: behind (hover: hover) and (pointer: fine),
+        // which iPadOS never matches even with a trackpad attached.
+        for (const link of [
+            ...nav.querySelectorAll(':scope > a'),
+            ...footerNav.querySelectorAll('a'),
+        ]) {
+            expect(link.className).toContain('[@media(any-pointer:fine)]:[&:hover]:');
+        }
+    });
+});

package/dist/lib/components/layout/Footer.svelte

@@ -71,16 +71,21 @@
                   {section.title}
                 </h2>
               {/if}
-              <ul class="mt-4 space-y-2">
+              <ul class="mt-4">
                 {#each section.items as item}
                   <li>
                     <a
                       href={item.href}
                       class={cn(
-                        'text-sm',
+                        // block + py-3 gives a full-width 44px-tall target (WCAG 2.5.5);
+                        // the list has no space-y so rows sit flush and never overlap.
+                        'block py-3 text-sm',
+                        // iPadOS reports hover:none even with a trackpad attached, so the
+                        // preset's hoverOnlyWhenSupported gating means hover: never fires
+                        // there. any-pointer:fine matches when a precise pointer exists.
                         isDark
-                          ? 'text-white hover:text-primary'
-                          : 'text-muted-foreground hover:text-foreground'
+                          ? 'text-white hover:text-primary [@media(any-pointer:fine)]:[&:hover]:text-primary'
+                          : 'text-muted-foreground hover:text-foreground [@media(any-pointer:fine)]:[&:hover]:text-foreground'
                       )}
                       target={item.external ? '_blank' : undefined}
                       rel={item.external ? 'noopener noreferrer' : undefined}

package/dist/lib/components/layout/Header.svelte

@@ -188,7 +188,9 @@
         {#if showMenuButton}
           <button
             class={cn(
-              'shrink-0 rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              'relative shrink-0 rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              // Touch target expansion (invisible, extends clickable area to 44x44px)
+              "after:absolute after:-inset-0.5 after:content-['']",
               bp.menuButtonHide
             )}
             data-sidebar-trigger
@@ -222,7 +224,9 @@
         {#if showCollapseButton}
           <button
             class={cn(
-              'rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              'relative rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              // Touch target expansion (invisible, extends clickable area to 44x44px)
+              "after:absolute after:-inset-1 after:content-['']",
               bp.collapseButtonShow
             )}
             onclick={() => onCollapseClick?.()}

package/dist/lib/components/layout/PublicLayout.svelte

@@ -34,6 +34,13 @@
     logoEnvironment?: 'local' | 'dev' | 'demo';
     /** Custom header end content */
     headerEnd?: Snippet;
+    /**
+     * Content rendered at the bottom of the mobile drawer (e.g. a CTA button).
+     * When provided, `headerEnd` is hidden below the mobile breakpoint so a
+     * wide button no longer competes with the logo on phone widths. Receives
+     * `close` so the drawer can be dismissed after navigation.
+     */
+    mobileNavEnd?: Snippet<[{ close: () => void }]>;
     /** Use strong accent border on footer (10px top border) */
     strongFooterBorder?: boolean;
     /** Use dark footer variant */
@@ -55,6 +62,7 @@
     logoSubtitle,
     logoEnvironment,
     headerEnd,
+    mobileNavEnd,
     strongFooterBorder = false,
     darkFooter = false,
     headerSearch,
@@ -77,7 +85,12 @@
     search={headerSearch}
   >
     {#snippet start()}
-      <a href={logoHref} class="flex items-center">
+      <!-- Touch target expansion (invisible, guarantees a 44px-tall clickable area) -->
+      <a
+        href={logoHref}
+        class="relative flex items-center after:absolute after:inset-x-0 after:top-1/2 after:h-11
+          after:-translate-y-1/2 after:content-['']"
+      >
         {#if logo}
           {@render logo()}
         {:else}
@@ -97,7 +110,16 @@
         <a
           href={item.href}
           class={cn(
-            'text-sm font-bold uppercase hover:text-primary',
+            // Touch target: p-3 around the 20px line box makes the anchor's own
+            // border box 44px tall, and -m-3 cancels it in layout so the nav's
+            // gap-6 is unchanged (adjacent boxes meet without overlapping). A real
+            // box rather than an ::after overlay: iPadOS trackpad hit-testing
+            // landed below the text with the pseudo-element, but honours padding.
+            '-m-3 flex items-center p-3 text-sm font-bold uppercase hover:text-primary',
+            // iPadOS reports hover:none even with a trackpad attached, so the preset's
+            // hoverOnlyWhenSupported gating means hover: never fires there. any-pointer:fine
+            // matches when any attached pointer is precise, giving trackpad users a cue.
+            '[@media(any-pointer:fine)]:[&:hover]:text-primary',
             item.active ? 'text-primary' : 'text-muted-foreground'
           )}
           target={item.external ? '_blank' : undefined}
@@ -110,19 +132,24 @@
     {/snippet}
 
     {#snippet end()}
-      {#if headerEnd}
+      {#if headerEnd && mobileNavEnd}
+        <!-- Desktop only: the mobile drawer carries mobileNavEnd instead -->
+        <div class="hidden md:contents">
+          {@render headerEnd()}
+        </div>
+      {:else if headerEnd}
         {@render headerEnd()}
       {/if}
     {/snippet}
 
     {#snippet mobileNav()}
-      <ul class="space-y-2 border-b border-black px-4 py-4">
+      <ul class={cn('space-y-2 px-4 py-4', !mobileNavEnd && 'border-b border-black')}>
         {#each navigation as item}
           <li>
             <a
               href={item.href}
               class={cn(
-                'block rounded-md px-3 py-2 text-sm font-bold uppercase',
+                'block rounded-md px-3 py-3 text-sm font-bold uppercase',
                 item.active
                   ? 'bg-primary/10 text-primary'
                   : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
@@ -137,6 +164,11 @@
           </li>
         {/each}
       </ul>
+      {#if mobileNavEnd}
+        <div class="border-b border-black px-4 pb-4">
+          {@render mobileNavEnd({ close: () => (mobileMenuOpen = false) })}
+        </div>
+      {/if}
     {/snippet}
   </Header>
 

package/dist/lib/components/layout/PublicLayout.svelte.d.ts

@@ -27,6 +27,15 @@ interface Props {
     logoEnvironment?: 'local' | 'dev' | 'demo';
     /** Custom header end content */
     headerEnd?: Snippet;
+    /**
+     * Content rendered at the bottom of the mobile drawer (e.g. a CTA button).
+     * When provided, `headerEnd` is hidden below the mobile breakpoint so a
+     * wide button no longer competes with the logo on phone widths. Receives
+     * `close` so the drawer can be dismissed after navigation.
+     */
+    mobileNavEnd?: Snippet<[{
+        close: () => void;
+    }]>;
     /** Use strong accent border on footer (10px top border) */
     strongFooterBorder?: boolean;
     /** Use dark footer variant */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",