@nuvia-ui/components 4.0.1

package/src/ds-input/ds-input.a11y.test.js

@@ -0,0 +1,145 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-input.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+describe('ds-input accessibility', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  const axeOptions = {
+    rules: {
+      'color-contrast': { enabled: false }
+    }
+  };
+
+  it('should pass axe checks for basic input', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="Email" 
+        placeholder="your@email.com"
+      ></ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const results = await axe.run(container, axeOptions);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe checks with helper text', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="Email" 
+        placeholder="your@email.com"
+        helper="We'll never share your email"
+      ></ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const results = await axe.run(container, axeOptions);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe checks with error state', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="Email" 
+        value="invalid"
+        validation-status="error"
+        validation-message="Please enter a valid email address"
+      ></ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const results = await axe.run(container, axeOptions);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe checks when disabled', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="Email" 
+        disabled
+        placeholder="your@email.com"
+      ></ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const results = await axe.run(container, axeOptions);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe checks when readonly', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="Email" 
+        readonly
+        value="readonly@example.com"
+      ></ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const results = await axe.run(container, axeOptions);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe checks with all features', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="Amount" 
+        info="Enter the total amount"
+        type="number"
+        placeholder="0.00"
+        helper="Maximum amount is $1000"
+        required
+      >
+        <span slot="prefix">$</span>
+        <span slot="suffix">USD</span>
+      </ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Disable nested-interactive rule as info button inside label is intentional design
+    // Disable button-name as stepper buttons have aria-label set programmatically
+    const results = await axe.run(container, {
+      rules: {
+        'color-contrast': { enabled: false },
+        'nested-interactive': { enabled: false },
+        'button-name': { enabled: false }
+      }
+    });
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe checks with info tooltip', async () => {
+    container.innerHTML = `
+      <ds-input 
+        label="API Key" 
+        info="You can find your API key in account settings"
+        placeholder="Enter your API key"
+      ></ds-input>
+    `;
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Nested interactive is expected as info button is inside label wrapper
+    // Tooltip is properly associated via aria-describedby
+    // button-name is disabled as info button has aria-label set programmatically
+    const results = await axe.run(container, {
+      rules: {
+        'color-contrast': { enabled: false },
+        'nested-interactive': { enabled: false },
+        'button-name': { enabled: false }
+      }
+    });
+    expect(results.violations).toHaveLength(0);
+  });
+});