@sekiui/elements 0.0.54 → 0.0.56

package/dist/collection/components/card/seki-card.a11y.js

@@ -0,0 +1,363 @@
+/* eslint-disable no-undef */
+import { newE2EPage } from "@stencil/core/testing";
+describe('Card Accessibility Tests', () => {
+    // ============================================
+    // Basic Accessibility Tests
+    // ============================================
+    it('Card with basic content renders accessibly', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-content>This is a card with just content</seki-card-content>
+      </seki-card>
+    `);
+        const card = await page.find('seki-card');
+        expect(card).toBeTruthy();
+    });
+    it('Card with header and content renders accessibly', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Card Title</seki-card-title>
+        </seki-card-header>
+        <seki-card-content>Main content area</seki-card-content>
+      </seki-card>
+    `);
+        const header = await page.find('seki-card-header');
+        const title = await page.find('seki-card-title');
+        expect(header).toBeTruthy();
+        expect(title).toBeTruthy();
+    });
+    it('Complete card with all sections renders accessibly', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Card Title</seki-card-title>
+          <seki-card-description>Subtitle or description text</seki-card-description>
+        </seki-card-header>
+        <seki-card-content>This is the main content area</seki-card-content>
+        <seki-card-footer>
+          <button>Cancel</button>
+          <button>Submit</button>
+        </seki-card-footer>
+      </seki-card>
+    `);
+        const description = await page.find('seki-card-description');
+        const footer = await page.find('seki-card-footer');
+        expect(description).toBeTruthy();
+        expect(footer).toBeTruthy();
+    });
+    // ============================================
+    // Heading Hierarchy Tests
+    // ============================================
+    it('CardTitle renders h1 when level prop is h1', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-title level="h1">Heading 1</seki-card-title>`);
+        const h1 = await page.find('h1');
+        expect(h1).toBeTruthy();
+    });
+    it('CardTitle renders h2 by default', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-title>Default Heading</seki-card-title>`);
+        const h2 = await page.find('h2');
+        expect(h2).toBeTruthy();
+    });
+    it('CardTitle renders h3 when level prop is h3', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-title level="h3">Heading 3</seki-card-title>`);
+        const h3 = await page.find('h3');
+        expect(h3).toBeTruthy();
+    });
+    it('CardTitle renders h4 when level prop is h4', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-title level="h4">Heading 4</seki-card-title>`);
+        const h4 = await page.find('h4');
+        expect(h4).toBeTruthy();
+    });
+    it('CardTitle renders h5 when level prop is h5', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-title level="h5">Heading 5</seki-card-title>`);
+        const h5 = await page.find('h5');
+        expect(h5).toBeTruthy();
+    });
+    it('CardTitle renders h6 when level prop is h6', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-title level="h6">Heading 6</seki-card-title>`);
+        const h6 = await page.find('h6');
+        expect(h6).toBeTruthy();
+    });
+    // ============================================
+    // Semantic HTML Tests
+    // ============================================
+    it('Card uses semantic section element', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-content>Content</seki-card-content>
+      </seki-card>
+    `);
+        const section = await page.find('seki-card >>> section');
+        expect(section).toBeTruthy();
+    });
+    it('CardHeader uses semantic header element', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card-header>
+        <seki-card-title>Title</seki-card-title>
+      </seki-card-header>
+    `);
+        const header = await page.find('seki-card-header >>> header');
+        expect(header).toBeTruthy();
+    });
+    it('CardDescription uses semantic paragraph element', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<seki-card-description>Description</seki-card-description>`);
+        const paragraph = await page.find('seki-card-description >>> p');
+        expect(paragraph).toBeTruthy();
+    });
+    it('CardFooter uses semantic footer element', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card-footer>
+        <button>Submit</button>
+      </seki-card-footer>
+    `);
+        const footer = await page.find('seki-card-footer >>> footer');
+        expect(footer).toBeTruthy();
+    });
+    it('CardAction uses semantic toolbar role', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card-action>
+        <button>Menu</button>
+      </seki-card-action>
+    `);
+        const toolbar = await page.find('seki-card-action >>> [role="toolbar"]');
+        expect(toolbar).toBeTruthy();
+    });
+    // ============================================
+    // Focus Management Tests
+    // ============================================
+    it('Card buttons are keyboard focusable', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-footer>
+          <button id="btn1">Cancel</button>
+          <button id="btn2">Submit</button>
+        </seki-card-footer>
+      </seki-card>
+    `);
+        const btn1 = await page.find('#btn1');
+        await btn1.focus();
+        const focused = await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.id; });
+        expect(focused).toBe('btn1');
+    });
+    it('Card does not trap focus - allows tabbing out', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <button id="before">Before Card</button>
+      <seki-card>
+        <seki-card-footer>
+          <button id="inside">Inside Card</button>
+        </seki-card-footer>
+      </seki-card>
+      <button id="after">After Card</button>
+    `);
+        const beforeBtn = await page.find('#before');
+        const afterBtn = await page.find('#after');
+        expect(beforeBtn).toBeTruthy();
+        expect(afterBtn).toBeTruthy();
+    });
+    // ============================================
+    // Form Input Accessibility Tests
+    // ============================================
+    it('Card with form inputs has proper structure', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Login Form</seki-card-title>
+        </seki-card-header>
+        <seki-card-content>
+          <form>
+            <div>
+              <label for="email">Email:</label>
+              <input type="email" id="email" placeholder="you@example.com" />
+            </div>
+            <div>
+              <label for="password">Password:</label>
+              <input type="password" id="password" placeholder="••••••••" />
+            </div>
+          </form>
+        </seki-card-content>
+        <seki-card-footer>
+          <button type="submit">Sign In</button>
+        </seki-card-footer>
+      </seki-card>
+    `);
+        const email = await page.find('#email');
+        const password = await page.find('#password');
+        expect(email).toBeTruthy();
+        expect(password).toBeTruthy();
+    });
+    it('Form labels are properly associated with inputs', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card-content>
+        <label for="username">Username:</label>
+        <input type="text" id="username" />
+      </seki-card-content>
+    `);
+        const label = await page.find('label');
+        const htmlFor = await label.getAttribute('for');
+        expect(htmlFor).toBe('username');
+    });
+    // ============================================
+    // Image and Media Tests
+    // ============================================
+    it('Images in card have alt text', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-content>
+          <img src="test.jpg" alt="Test image description" />
+        </seki-card-content>
+      </seki-card>
+    `);
+        const img = await page.find('img');
+        const alt = await img.getAttribute('alt');
+        expect(alt).toBeTruthy();
+    });
+    // ============================================
+    // Links and Navigation Tests
+    // ============================================
+    it('Links in card are properly marked', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-content>
+          <p>
+            <a href="#forgot">Forgot your password?</a>
+          </p>
+        </seki-card-content>
+      </seki-card>
+    `);
+        const link = await page.find('a');
+        const href = await link.getAttribute('href');
+        expect(href).toBe('#forgot');
+    });
+    // ============================================
+    // List Content Tests
+    // ============================================
+    it('Lists in card use proper semantic markup', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-content>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+          </ul>
+        </seki-card-content>
+      </seki-card>
+    `);
+        const list = await page.find('ul');
+        const items = await page.findAll('li');
+        expect(list).toBeTruthy();
+        expect(items.length).toBe(3);
+    });
+    // ============================================
+    // Color Contrast Tests (Light Mode)
+    // ============================================
+    it('Card text is visible with light mode default colors', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Title Text</seki-card-title>
+          <seki-card-description>Description text</seki-card-description>
+        </seki-card-header>
+        <seki-card-content>Body content with default color</seki-card-content>
+      </seki-card>
+    `);
+        const title = await page.find('seki-card-title');
+        const description = await page.find('seki-card-description');
+        const content = await page.find('seki-card-content');
+        expect(title).toBeTruthy();
+        expect(description).toBeTruthy();
+        expect(content).toBeTruthy();
+    });
+    // ============================================
+    // Color Contrast Tests (Dark Mode)
+    // ============================================
+    it('Card text is visible in dark mode', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <div data-theme="dark" style="background: #111; padding: 1rem;">
+        <seki-card>
+          <seki-card-header>
+            <seki-card-title>Dark Mode Title</seki-card-title>
+            <seki-card-description>Dark mode description</seki-card-description>
+          </seki-card-header>
+          <seki-card-content>Dark mode content text</seki-card-content>
+        </seki-card>
+      </div>
+    `);
+        const themeDiv = await page.find('[data-theme="dark"]');
+        const card = await page.find('seki-card');
+        expect(themeDiv).toBeTruthy();
+        expect(card).toBeTruthy();
+    });
+    // ============================================
+    // Responsive Accessibility Tests
+    // ============================================
+    it('Card is accessible on mobile viewport', async () => {
+        const page = await newE2EPage();
+        await page.setViewport({ width: 320, height: 640 });
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Mobile Card</seki-card-title>
+        </seki-card-header>
+        <seki-card-content>Mobile viewport content</seki-card-content>
+      </seki-card>
+    `);
+        const card = await page.find('seki-card');
+        expect(card).toBeTruthy();
+    });
+    it('Card is accessible on tablet viewport', async () => {
+        const page = await newE2EPage();
+        await page.setViewport({ width: 768, height: 1024 });
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Tablet Card</seki-card-title>
+        </seki-card-header>
+        <seki-card-content>Tablet viewport content</seki-card-content>
+      </seki-card>
+    `);
+        const card = await page.find('seki-card');
+        expect(card).toBeTruthy();
+    });
+    it('Card is accessible on desktop viewport', async () => {
+        const page = await newE2EPage();
+        await page.setViewport({ width: 1440, height: 900 });
+        await page.setContent(`
+      <seki-card>
+        <seki-card-header>
+          <seki-card-title>Desktop Card</seki-card-title>
+        </seki-card-header>
+        <seki-card-content>Desktop viewport content</seki-card-content>
+        <seki-card-footer>
+          <button>Action</button>
+        </seki-card-footer>
+      </seki-card>
+    `);
+        const card = await page.find('seki-card');
+        expect(card).toBeTruthy();
+    });
+});