@classic-homes/theme-svelte 1.7.0 → 1.7.2

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

@@ -0,0 +1,90 @@
+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() {
+    return render(PublicLayout, {
+        props: { navigation, footerLinks, children: textSnippet('Page content') },
+    });
+}
+/**
+ * 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 inset = 44px, with no layout shift
+            expect(link.className).toContain('relative');
+            expect(link.className).toContain('after:absolute');
+            expect(link.className).toContain('after:-inset-3');
+        }
+    });
+    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 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

@@ -178,7 +178,7 @@
   <div class={cn('h-16', strongBorder ? 'border-b-2 border-black' : 'border-b border-black')}>
     <div
       class={cn(
-        'flex h-full items-center justify-between px-2 sm:px-4 lg:px-4',
+        'flex h-full items-center justify-between gap-4 sm:gap-6 px-2 sm:px-4 lg:px-4',
         maxWidth !== 'none' && 'mx-auto',
         maxWidthClasses[maxWidth]
       )}
@@ -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

@@ -77,7 +77,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 +102,15 @@
         <a
           href={item.href}
           class={cn(
-            'text-sm font-bold uppercase hover:text-primary',
+            'relative text-sm font-bold uppercase hover:text-primary',
+            // Touch target expansion (invisible, extends clickable area to 44x44px).
+            // -inset-3 exactly fills the nav's gap-6, so the space between links is
+            // no longer dead: adjacent expansions meet without overlapping.
+            "after:absolute after:-inset-3 after:content-['']",
+            // 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}
@@ -122,7 +135,7 @@
             <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'

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -190,8 +190,11 @@
     class={cn(
       'flex items-center justify-center p-1 rounded shrink-0',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-      // Show on hover for regular items, always show in pinned section
-      isUnpin ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+      // Show on hover for regular items, always show in pinned section.
+      // Touch devices never fire hover (hoverOnlyWhenSupported), so keep it visible there.
+      isUnpin
+        ? 'opacity-100'
+        : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-60',
       // Light variant: white text when row is hovered (teal bg), red/primary text when active
       isLight && !item.active && 'text-muted-foreground group-hover:text-white hover:bg-white/20',
       isLight && item.active && 'text-primary hover:bg-primary/20',

package/package.json

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