@classic-homes/theme-svelte 1.21.0 → 1.22.1

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

@@ -1,145 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-import Audio from '../../lib/components/media/Audio.svelte';
-import Image from '../../lib/components/media/Image.svelte';
-import Lightbox from '../../lib/components/media/Lightbox.svelte';
-import MediaCarousel from '../../lib/components/media/MediaCarousel.svelte';
-import MediaEmbed from '../../lib/components/media/MediaEmbed.svelte';
-import MediaGrid from '../../lib/components/media/MediaGrid.svelte';
-import Video from '../../lib/components/media/Video.svelte';
-const items = [
-    { id: '1', kind: 'image', src: '/one.jpg', alt: 'A harbour at dawn', caption: 'Dawn' },
-    { id: '2', kind: 'image', src: '/two.jpg', alt: 'A field of wheat' },
-    { id: '3', kind: 'video', src: '/clip.mp4', poster: '/clip.jpg', title: 'Walkthrough' },
-];
-const captions = [{ src: '/clip.en.vtt', srclang: 'en', label: 'English', default: true }];
-beforeEach(() => {
-    // Video warns when captions are missing; those cases are covered elsewhere.
-    vi.spyOn(console, 'warn').mockImplementation(() => { });
-});
-describe('Image accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(Image, { props: { src: '/photo.jpg', alt: 'A landscape' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('has no violations with a decorative empty alt', async () => {
-        const { container } = render(Image, { props: { src: '/divider.png', alt: '' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('exposes the alt text as the image name', () => {
-        render(Image, { props: { src: '/photo.jpg', alt: 'A landscape' } });
-        expect(screen.getByRole('img', { name: 'A landscape' })).toBeInTheDocument();
-    });
-});
-describe('Video accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(Video, {
-            props: { src: '/clip.mp4', label: 'Product tour', tracks: captions },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('names the region and every transport control', () => {
-        render(Video, { props: { src: '/clip.mp4', label: 'Product tour', tracks: captions } });
-        expect(screen.getByRole('region')).toHaveAccessibleName('Product tour');
-        expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument();
-        expect(screen.getByRole('slider', { name: 'Seek' })).toBeInTheDocument();
-        expect(screen.getByRole('slider', { name: 'Volume' })).toBeInTheDocument();
-    });
-    it('announces the seek position as a spoken timestamp, not raw seconds', () => {
-        render(Video, { props: { src: '/clip.mp4', tracks: captions } });
-        expect(screen.getByRole('slider', { name: 'Seek' })).toHaveAttribute('aria-valuetext', '0 seconds of 0 seconds');
-    });
-});
-describe('Audio accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(Audio, {
-            props: { src: '/episode.mp3', title: 'Episode 12', artist: 'Design Notes' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('MediaEmbed accessibility', () => {
-    it('has no axe violations in its facade state', async () => {
-        const { container } = render(MediaEmbed, {
-            props: { url: 'https://youtu.be/dQw4w9WgXcQ', title: 'A song' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('names the facade with the provider and title', () => {
-        render(MediaEmbed, { props: { url: 'https://youtu.be/dQw4w9WgXcQ', title: 'A song' } });
-        expect(screen.getByRole('button')).toHaveAccessibleName('Play A song on YouTube');
-    });
-    it('has no axe violations for a Matterport tour facade', async () => {
-        const { container } = render(MediaEmbed, {
-            props: { provider: 'matterport', modelId: 'SxQL3iGyoDo', title: 'Show home' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('says a tour opens rather than plays', () => {
-        render(MediaEmbed, {
-            props: { provider: 'matterport', modelId: 'SxQL3iGyoDo', title: 'Show home' },
-        });
-        expect(screen.getByRole('button')).toHaveAccessibleName('Open Show home as a 3D tour on Matterport');
-    });
-});
-describe('MediaGrid accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(MediaGrid, { props: { items, label: 'Project photos' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('names the list and every tile', () => {
-        render(MediaGrid, { props: { items, label: 'Project photos' } });
-        expect(screen.getByRole('list')).toHaveAccessibleName('Project photos');
-        expect(screen.getByRole('button', { name: 'A harbour at dawn' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Walkthrough' })).toBeInTheDocument();
-    });
-    it('has no violations in the masonry variant', async () => {
-        const { container } = render(MediaGrid, { props: { items, variant: 'masonry' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('MediaCarousel accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(MediaCarousel, {
-            props: { items, label: 'Project gallery' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('carries the carousel and slide role descriptions', () => {
-        render(MediaCarousel, { props: { items, label: 'Project gallery' } });
-        const carousel = screen.getByRole('region', { name: 'Project gallery' });
-        expect(carousel).toHaveAttribute('aria-roledescription', 'carousel');
-        const slides = screen.getAllByRole('group');
-        expect(slides[0]).toHaveAttribute('aria-roledescription', 'slide');
-        expect(slides[0]).toHaveAccessibleName('1 of 3');
-    });
-    it('offers a pause control whenever autoplay is enabled (WCAG 2.2.2)', () => {
-        render(MediaCarousel, { props: { items, autoplay: true } });
-        expect(screen.getByRole('button', { name: 'Stop automatic slideshow' })).toBeInTheDocument();
-    });
-    it('has no violations with the thumbnail strip shown', async () => {
-        const { container } = render(MediaCarousel, { props: { items, showThumbnails: true } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('Lightbox accessibility', () => {
-    it('has no axe violations when open', async () => {
-        render(Lightbox, { props: { items, open: true } });
-        await screen.findByRole('dialog');
-        // The dialog is portalled to the body, so axe has to run against it.
-        expect(await axe(document.body)).toHaveNoViolations();
-    });
-    it('is a modal dialog with an accessible name and description', async () => {
-        render(Lightbox, { props: { items, open: true } });
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toHaveAttribute('aria-modal', 'true');
-        expect(dialog).toHaveAccessibleName('A harbour at dawn');
-        expect(dialog).toHaveAccessibleDescription('Dawn');
-    });
-    it('has no violations with the thumbnail strip shown', async () => {
-        render(Lightbox, { props: { items, open: true, showThumbnails: true } });
-        await screen.findByRole('dialog');
-        expect(await axe(document.body)).toHaveNoViolations();
-    });
-});

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

@@ -1,139 +0,0 @@
-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 so the nav's gap-6 spacing is unchanged.
-            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 switch the header to the drawer at the given mobileBreakpoint', () => {
-        renderLayout({
-            mobileBreakpoint: 'lg',
-            headerEnd: textSnippet('Service Request'),
-            mobileNavEnd: ctaSnippet('Drawer CTA'),
-        });
-        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
-        expect(nav.className).toContain('lg:flex');
-        expect(nav.className).not.toContain('md:flex');
-        expect(screen.getByRole('button', { name: 'Open menu' }).className).toContain('lg:hidden');
-        expect(screen.getByText('Service Request').parentElement?.className).toContain('lg: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/__tests__/a11y/SegmentedControl.a11y.test.js

@@ -1,50 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import SegmentedControl from '../../lib/components/SegmentedControl.svelte';
-const options = [
-    { value: 'community', label: 'Community' },
-    { value: 'collection', label: 'Collection' },
-    { value: 'floor-plan', label: 'Floor Plan', disabled: true },
-];
-describe('SegmentedControl accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(SegmentedControl, {
-            props: { options, label: 'Group homes by' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('is a labelled radiogroup of radios', () => {
-        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
-        const group = screen.getByRole('radiogroup', { name: 'Group homes by' });
-        expect(group).toBeInTheDocument();
-        expect(screen.getAllByRole('radio')).toHaveLength(3);
-    });
-    it('selects the first enabled option by default', () => {
-        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
-        expect(screen.getByRole('radio', { name: 'Community' })).toHaveAttribute('aria-checked', 'true');
-        expect(screen.getByRole('radio', { name: 'Floor Plan' })).toBeDisabled();
-    });
-    it('moves selection with arrow keys and skips disabled options', async () => {
-        const user = userEvent.setup();
-        const onValueChange = vi.fn();
-        render(SegmentedControl, { props: { options, label: 'Group homes by', onValueChange } });
-        const community = screen.getByRole('radio', { name: 'Community' });
-        const collection = screen.getByRole('radio', { name: 'Collection' });
-        community.focus();
-        await user.keyboard('{ArrowRight}');
-        expect(collection).toHaveAttribute('aria-checked', 'true');
-        expect(onValueChange).toHaveBeenLastCalledWith('collection');
-        // Floor Plan is disabled, so the next step loops back to Community
-        await user.keyboard('{ArrowRight}');
-        expect(community).toHaveAttribute('aria-checked', 'true');
-    });
-    it('never deselects: clicking the selected option keeps it checked', async () => {
-        const user = userEvent.setup();
-        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
-        const community = screen.getByRole('radio', { name: 'Community' });
-        await user.click(community);
-        expect(community).toHaveAttribute('aria-checked', 'true');
-    });
-});

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

@@ -1,95 +0,0 @@
-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 Switch from '../../lib/components/Switch.svelte';
-describe('Switch accessibility', () => {
-    it('should have no axe violations with aria-label', async () => {
-        const { container } = render(Switch, {
-            props: { 'aria-label': 'Enable notifications' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with aria-labelledby', async () => {
-        const { container } = render(Switch, {
-            props: { 'aria-labelledby': 'switch-label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'switch-label';
-        labelSpan.textContent = 'Enable notifications';
-        container.insertBefore(labelSpan, container.firstChild);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations when checked', async () => {
-        const { container } = render(Switch, {
-            props: { 'aria-label': 'Enable feature', checked: true },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch' },
-        });
-        const switchElement = screen.getByRole('switch');
-        await userEvent.tab();
-        expect(switchElement).toHaveFocus();
-    });
-    it('should be togglable with keyboard (Space)', async () => {
-        let checked = false;
-        render(Switch, {
-            props: {
-                'aria-label': 'Test switch',
-                onchange: (value) => {
-                    checked = value;
-                },
-            },
-        });
-        await userEvent.tab();
-        await userEvent.keyboard(' ');
-        expect(checked).toBe(true);
-    });
-    it('should not be focusable when disabled', async () => {
-        render(Switch, {
-            props: { 'aria-label': 'Disabled switch', disabled: true },
-        });
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toBeDisabled();
-    });
-    it('should have correct aria-checked state when unchecked', () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch', checked: false },
-        });
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toHaveAttribute('aria-checked', 'false');
-    });
-    it('should have correct aria-checked state when checked', () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch', checked: true },
-        });
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toHaveAttribute('aria-checked', 'true');
-    });
-    it('should support aria-labelledby', () => {
-        const { container } = render(Switch, {
-            props: { 'aria-labelledby': 'label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'label';
-        labelSpan.textContent = 'Custom Label';
-        container.insertBefore(labelSpan, container.firstChild);
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toHaveAttribute('aria-labelledby', 'label');
-    });
-    it('should have visible focus indicator', async () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch' },
-        });
-        const switchElement = screen.getByRole('switch');
-        await userEvent.tab();
-        expect(switchElement).toHaveFocus();
-        // Focus styles are applied via focus-visible classes
-    });
-});

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

@@ -1,116 +0,0 @@
-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 = [
-        { id: 'tab1', label: 'Tab 1' },
-        { id: 'tab2', label: 'Tab 2' },
-        { id: 'tab3', label: 'Tab 3' },
-    ];
-    it('should have no axe violations', async () => {
-        const { container } = render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs', id: 'test-tabs' },
-        });
-        // Add tab panels so aria-controls references are valid
-        defaultTabs.forEach((tab, i) => {
-            const panel = document.createElement('div');
-            panel.id = `test-tabs-panel-${tab.id}`;
-            panel.setAttribute('role', 'tabpanel');
-            panel.setAttribute('aria-labelledby', `test-tabs-tab-${tab.id}`);
-            panel.textContent = `Panel ${i + 1}`;
-            if (i > 0)
-                panel.hidden = true;
-            container.appendChild(panel);
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have proper tablist role', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        const tablist = screen.getByRole('tablist');
-        expect(tablist).toBeInTheDocument();
-    });
-    it('should have proper tab roles', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs).toHaveLength(3);
-    });
-    it('should have accessible label on tablist', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Account settings' },
-        });
-        const tablist = screen.getByRole('tablist');
-        expect(tablist).toHaveAttribute('aria-label', 'Account settings');
-    });
-    it('should indicate selected tab with aria-selected', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, value: 'tab1', label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
-        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
-    });
-    it('should navigate with arrow keys', async () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        // Focus first tab
-        tabs[0].focus();
-        expect(tabs[0]).toHaveFocus();
-        // Navigate right
-        await userEvent.keyboard('{ArrowRight}');
-        expect(tabs[1]).toHaveFocus();
-        // Navigate right again
-        await userEvent.keyboard('{ArrowRight}');
-        expect(tabs[2]).toHaveFocus();
-        // Navigate left
-        await userEvent.keyboard('{ArrowLeft}');
-        expect(tabs[1]).toHaveFocus();
-    });
-    it('should activate tab with click', async () => {
-        const user = userEvent.setup();
-        render(Tabs, {
-            props: { tabs: defaultTabs, value: 'tab1', label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        // Click second tab
-        await user.click(tabs[1]);
-        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-    });
-    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');
-        const selectedTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true');
-        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/__tests__/a11y/Textarea.a11y.test.js

@@ -1,111 +0,0 @@
-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 Textarea from '../../lib/components/Textarea.svelte';
-describe('Textarea accessibility', () => {
-    it('should have no axe violations with aria-label', async () => {
-        const { container } = render(Textarea, {
-            props: { 'aria-label': 'Description' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with aria-invalid', async () => {
-        const { container } = render(Textarea, {
-            props: {
-                'aria-label': 'Description',
-                'aria-invalid': true,
-                'aria-describedby': 'error',
-            },
-        });
-        const errorSpan = document.createElement('span');
-        errorSpan.id = 'error';
-        errorSpan.textContent = 'Description is required';
-        container.appendChild(errorSpan);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Test textarea' },
-        });
-        const textarea = screen.getByRole('textbox');
-        await userEvent.tab();
-        expect(textarea).toHaveFocus();
-    });
-    it('should support aria-describedby for help text', () => {
-        const { container } = render(Textarea, {
-            props: { 'aria-label': 'Comments', 'aria-describedby': 'help' },
-        });
-        const helpSpan = document.createElement('span');
-        helpSpan.id = 'help';
-        helpSpan.textContent = 'Enter your comments here';
-        container.appendChild(helpSpan);
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('aria-describedby', 'help');
-    });
-    it('should support aria-labelledby', () => {
-        const { container } = render(Textarea, {
-            props: { 'aria-labelledby': 'label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'label';
-        labelSpan.textContent = 'Custom Label';
-        container.insertBefore(labelSpan, container.firstChild);
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('aria-labelledby', 'label');
-    });
-    it('should apply error styling when aria-invalid is true', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Description', 'aria-invalid': true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('aria-invalid', 'true');
-        expect(textarea.className).toContain('border-destructive');
-    });
-    it('should apply error styling when aria-invalid is "true" string', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Description', 'aria-invalid': 'true' },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea.className).toContain('border-destructive');
-    });
-    it('should not apply error styling when aria-invalid is false', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Description', 'aria-invalid': false },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea.className).not.toContain('border-destructive');
-    });
-    it('should be disabled when disabled prop is true', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Disabled textarea', disabled: true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toBeDisabled();
-    });
-    it('should support required attribute', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Required field', required: true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toBeRequired();
-    });
-    it('should support readonly attribute', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Readonly field', readonly: true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('readonly');
-    });
-    it('should have visible focus indicator', async () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Test textarea' },
-        });
-        const textarea = screen.getByRole('textbox');
-        await userEvent.tab();
-        expect(textarea).toHaveFocus();
-        // Focus styles are applied via focus-visible classes
-    });
-});