@classic-homes/theme-svelte 1.2.0 → 1.2.1

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

@@ -2,6 +2,7 @@ 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 Tabs from '../../lib/components/Tabs.svelte';
 describe('Tabs accessibility', () => {
     const defaultTabs = [
@@ -85,13 +86,31 @@ describe('Tabs accessibility', () => {
         await user.click(tabs[1]);
         expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
     });
-    it('should have aria-controls linking tab to panel', () => {
+    it('should omit aria-controls when no panel exists', () => {
+        // Without children there is no panel in the DOM; an aria-controls pointing
+        // at a missing element is an ARIA validity failure (axe: aria-valid-attr-value)
         render(Tabs, {
             props: { tabs: defaultTabs, label: 'Test tabs' },
         });
+        for (const tab of screen.getAllByRole('tab')) {
+            expect(tab).not.toHaveAttribute('aria-controls');
+        }
+    });
+    it('should have aria-controls referencing a real panel when children exist', () => {
+        const children = createRawSnippet(() => ({
+            render: () => '<div id="test-tabs-panel-tab1" role="tabpanel">Panel 1</div>',
+        }));
+        render(Tabs, {
+            props: { tabs: defaultTabs, value: 'tab1', id: 'test-tabs', label: 'Test tabs', children },
+        });
         const tabs = screen.getAllByRole('tab');
-        // Selected tab should have aria-controls
         const selectedTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true');
-        expect(selectedTab).toHaveAttribute('aria-controls');
+        expect(selectedTab).toHaveAttribute('aria-controls', 'test-tabs-panel-tab1');
+        // The reference must resolve to an element that exists
+        expect(document.getElementById('test-tabs-panel-tab1')).not.toBeNull();
+        // Unselected tabs have no panel mounted, so no aria-controls
+        for (const tab of tabs.filter((t) => t !== selectedTab)) {
+            expect(tab).not.toHaveAttribute('aria-controls');
+        }
     });
 });

package/dist/lib/components/Button.svelte

@@ -4,7 +4,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',

package/dist/lib/components/LogoMain.svelte

@@ -54,7 +54,7 @@
     dark: {
       logo: '#C50F22', // Brand red
       title: '#000000', // Black for light backgrounds
-      subtitle: '#7a7a7a', // Gray
+      subtitle: '#666666', // Gray - #7a7a7a was 4.29:1 on white (WCAG 1.4.3 fail)
     },
     light: {
       logo: '#ffffff',
@@ -64,7 +64,7 @@
     'mono-dark': {
       logo: '#002e3f', // Navy
       title: '#002e3f',
-      subtitle: '#7a7a7a',
+      subtitle: '#666666', // see dark variant note
     },
     'mono-light': {
       logo: '#ffffff',

package/dist/lib/components/Switch.svelte

@@ -31,6 +31,19 @@
     ...restProps
   }: Props = $props();
 
+  // Dev-mode a11y warning, matching Input/Select/Button: a Switch with no
+  // aria-label, aria-labelledby, or id (for an external <label for>) announces
+  // as a bare "switch" with no name.
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+    $effect(() => {
+      if (!ariaLabel && !ariaLabelledby && !id) {
+        console.warn(
+          'Switch: provide aria-label, aria-labelledby, or an id paired with a <label for> so the switch has an accessible name.'
+        );
+      }
+    });
+  }
+
   // Handle checked state changes from user interaction
   // The primitive handles the actual state management via bind:checked
   function handleCheckedChange(newChecked: boolean) {

package/dist/lib/components/Tabs.svelte

@@ -19,7 +19,16 @@
     label: string;
     /** Additional classes for container */
     class?: string;
-    /** Tab panel content */
+    /**
+     * Tab panel content - compose with `TabPanel` so each panel gets the
+     * matching `role="tabpanel"` / id / aria-labelledby wiring.
+     *
+     * aria-controls is only emitted while a panel actually exists in the DOM
+     * (children provided + tab active): a reference to a missing element is an
+     * ARIA validity failure (axe: aria-valid-attr-value). Consumers rendering
+     * panels OUTSIDE this component should give them
+     * `id="{id}-panel-{tabId}"` + `aria-labelledby="{id}-tab-{tabId}"`.
+     */
     children?: Snippet;
     /** Callback when active tab changes */
     onValueChange?: (value: string) => void;
@@ -111,7 +120,7 @@
         role="tab"
         type="button"
         aria-selected={value === tab.id}
-        aria-controls={`${id}-panel-${tab.id}`}
+        aria-controls={children && value === tab.id ? `${id}-panel-${tab.id}` : undefined}
         tabindex={value === tab.id ? 0 : -1}
         disabled={tab.disabled}
         class={cn(

package/dist/lib/components/Tabs.svelte.d.ts

@@ -15,7 +15,16 @@ interface Props {
     label: string;
     /** Additional classes for container */
     class?: string;
-    /** Tab panel content */
+    /**
+     * Tab panel content - compose with `TabPanel` so each panel gets the
+     * matching `role="tabpanel"` / id / aria-labelledby wiring.
+     *
+     * aria-controls is only emitted while a panel actually exists in the DOM
+     * (children provided + tab active): a reference to a missing element is an
+     * ARIA validity failure (axe: aria-valid-attr-value). Consumers rendering
+     * panels OUTSIDE this component should give them
+     * `id="{id}-panel-{tabId}"` + `aria-labelledby="{id}-tab-{tabId}"`.
+     */
     children?: Snippet;
     /** Callback when active tab changes */
     onValueChange?: (value: string) => void;

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

@@ -85,8 +85,8 @@
       className
     )}
   >
-    <!-- Logo -->
-    <div class="mb-6 flex flex-col items-center">
+    <!-- Logo. <header> so it isn't content outside every landmark (axe: region) -->
+    <header class="mb-6 flex flex-col items-center">
       {#if logo}
         {@render logo()}
       {:else}
@@ -98,7 +98,7 @@
           environment={logoEnvironment}
         />
       {/if}
-    </div>
+    </header>
 
     <!-- Main Content Card -->
     <main

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

@@ -52,6 +52,14 @@
     footer?: Snippet;
     /** Additional classes for the container */
     class?: string;
+    /**
+     * Whether this layout owns the whole page (default). Set false when
+     * rendering inside an app layout that already provides the page chrome -
+     * e.g. a SvelteKit +error.svelte inside a layout with its own
+     * <main id="main-content"> - so AppShell and the main landmark aren't
+     * duplicated (axe: landmark-no-duplicate-main / landmark-main-is-top-level).
+     */
+    standalone?: boolean;
     /** Main content (custom error content, replaces default display) */
     children?: Snippet;
   }
@@ -72,6 +80,7 @@
     actions,
     footer,
     class: className,
+    standalone = true,
     children,
   }: Props = $props();
 
@@ -128,16 +137,19 @@
   }
 </script>
 
-<AppShell>
+{#snippet layoutBody()}
   <div
     class={cn(
-      'flex h-screen flex-col items-center justify-center overflow-auto bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
+      'flex flex-col items-center justify-center overflow-auto bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
+      standalone ? 'h-screen' : 'min-h-[60vh]',
       className
     )}
   >
-    <!-- Logo -->
+    <!-- Logo. <header> so the logo isn't content outside every landmark
+         (axe: region); nested under a host <main> it simply loses the banner
+         role, which is correct. -->
     {#if showLogo}
-      <div class="mb-6">
+      <header class="mb-6">
         {#if logo}
           {@render logo()}
         {:else}
@@ -145,11 +157,16 @@
             <LogoMain variant="horizontal" color="dark" size="md" />
           </a>
         {/if}
-      </div>
+      </header>
     {/if}
 
-    <!-- Main Content -->
-    <main id="main-content" class="w-full max-w-md text-center">
+    <!-- Main Content. A second main landmark is invalid when the host layout
+         already renders one, so embedded mode uses a plain div. -->
+    <svelte:element
+      this={standalone ? 'main' : 'div'}
+      id={standalone ? 'main-content' : undefined}
+      class="w-full max-w-md text-center"
+    >
       {#if children}
         {@render children()}
       {:else}
@@ -197,7 +214,7 @@
           </div>
         {/if}
       {/if}
-    </main>
+    </svelte:element>
 
     <!-- Footer -->
     {#if footer}
@@ -206,4 +223,12 @@
       </footer>
     {/if}
   </div>
-</AppShell>
+{/snippet}
+
+{#if standalone}
+  <AppShell>
+    {@render layoutBody()}
+  </AppShell>
+{:else}
+  {@render layoutBody()}
+{/if}

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

@@ -46,6 +46,14 @@ interface Props {
     footer?: Snippet;
     /** Additional classes for the container */
     class?: string;
+    /**
+     * Whether this layout owns the whole page (default). Set false when
+     * rendering inside an app layout that already provides the page chrome -
+     * e.g. a SvelteKit +error.svelte inside a layout with its own
+     * <main id="main-content"> - so AppShell and the main landmark aren't
+     * duplicated (axe: landmark-no-duplicate-main / landmark-main-is-top-level).
+     */
+    standalone?: boolean;
     /** Main content (custom error content, replaces default display) */
     children?: Snippet;
 }

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

@@ -65,9 +65,11 @@
           {#each links as section}
             <div>
               {#if section.title}
-                <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
+                <!-- h2, not h3: most pages reach the footer with only an h1 in
+                     scope, so h3 skipped a level (axe: heading-order) -->
+                <h2 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
                   {section.title}
-                </h3>
+                </h2>
               {/if}
               <ul class="mt-4 space-y-2">
                 {#each section.items as item}
@@ -127,7 +129,8 @@
         <LogoMain variant="horizontal" color={isDark ? 'light' : 'dark'} size="sm" />
       {/if}
 
-      <p class={cn('text-center text-sm', isDark ? 'text-gray-400' : 'text-muted-foreground')}>
+      <!-- gray-300, not gray-400: #9ca3af is 3.22:1 on the gray-600 footer -->
+      <p class={cn('text-center text-sm', isDark ? 'text-gray-300' : 'text-muted-foreground')}>
         {displayCopyright}
       </p>
     </div>

package/package.json

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