@dile/ui 3.0.7 → 3.1.0

package/components/select/select.spec.js

@@ -0,0 +1,535 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './select.js';
+
+describe('dile-select', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSelect(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-select');
+    await el.updateComplete;
+    return el;
+  }
+
+  describe('Rendering', () => {
+    it('renders with slotted native select element', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select')).toBeTruthy();
+      expect(el.querySelector('select').getAttribute('slot')).toBe('select');
+    });
+
+    it('renders with a label when provided', async () => {
+      const el = await renderSelect(`
+        <dile-select label="Choose option">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const label = el.shadowRoot.querySelector('label');
+      expect(label).toBeTruthy();
+      expect(label.textContent).toBe('Choose option');
+    });
+
+    it('does not render label when not provided', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.shadowRoot.querySelector('label')).toBeNull();
+    });
+
+    it('renders an arrow icon inside select-wrapper', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const arrowIcon = el.shadowRoot.querySelector('.arrow-icon');
+      expect(arrowIcon).toBeTruthy();
+      expect(arrowIcon.querySelector('svg')).toBeTruthy();
+    });
+
+    it('renders message when provided', async () => {
+      const el = await renderSelect(`
+        <dile-select message="This is a message">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const message = el.shadowRoot.querySelector('.message');
+      expect(message).toBeTruthy();
+      expect(message.textContent.trim()).toBe('This is a message');
+    });
+
+    it('applies errored-msg class to message when errored is true', async () => {
+      const el = await renderSelect(`
+        <dile-select errored message="Error message">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const message = el.shadowRoot.querySelector('.message');
+      expect(message.classList.contains('errored-msg')).toBe(true);
+    });
+  });
+
+  describe('Properties', () => {
+    it('reflects value property to the native select', async () => {
+      const el = await renderSelect(`
+        <dile-select value="2">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.value).toBe('2');
+      expect(el.querySelector('select').value).toBe('2');
+    });
+
+    it('updates select value when value property changes', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      el.value = '2';
+      await el.updateComplete;
+
+      expect(el.querySelector('select').value).toBe('2');
+    });
+
+    it('reflects disabled property to native select', async () => {
+      const el = await renderSelect(`
+        <dile-select disabled>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').disabled).toBe(true);
+      expect(el.querySelector('select').classList.contains('disabled')).toBe(true);
+    });
+
+    it('updates disabled state dynamically', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').disabled).toBe(false);
+
+      el.disabled = true;
+      await el.updateComplete;
+
+      expect(el.querySelector('select').disabled).toBe(true);
+      expect(el.querySelector('select').classList.contains('disabled')).toBe(true);
+    });
+
+    it('applies errored class to select when errored is true', async () => {
+      const el = await renderSelect(`
+        <dile-select errored>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').classList.contains('errored')).toBe(true);
+    });
+
+    it('removes errored class when errored is set to false', async () => {
+      const el = await renderSelect(`
+        <dile-select errored>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      el.errored = false;
+      await el.updateComplete;
+
+      expect(el.querySelector('select').classList.contains('errored')).toBe(false);
+    });
+  });
+
+  describe('Accessibility Attributes', () => {
+    it('generates unique ID for label association', async () => {
+      const el = await renderSelect(`
+        <dile-select label="Select option">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const label = el.shadowRoot.querySelector('label');
+      const selectId = el.querySelector('select').id;
+
+      expect(selectId).toMatch(/^dile-select-/);
+      expect(label.getAttribute('for')).toBe(selectId);
+    });
+
+    it('assigns ID to slotted select element', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').id).toMatch(/^dile-select-/);
+    });
+
+    it('preserves existing ID on select element', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select" id="my-custom-id">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').id).toBe('my-custom-id');
+    });
+
+    it('sets aria-invalid="true" when errored is true', async () => {
+      const el = await renderSelect(`
+        <dile-select errored>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').getAttribute('aria-invalid')).toBe('true');
+    });
+
+    it('sets aria-invalid="false" when errored is false', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').getAttribute('aria-invalid')).toBe('false');
+    });
+
+    it('sets aria-describedby when message exists', async () => {
+      const el = await renderSelect(`
+        <dile-select message="Error message">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const messageId = el.shadowRoot.querySelector('.message').id;
+      expect(el.querySelector('select').getAttribute('aria-describedby')).toBe(messageId);
+    });
+
+    it('removes aria-describedby when message is cleared', async () => {
+      const el = await renderSelect(`
+        <dile-select message="Error message">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      el.message = '';
+      await el.updateComplete;
+
+      expect(el.querySelector('select').hasAttribute('aria-describedby')).toBe(false);
+    });
+
+    it('sets aria-disabled attribute when disabled', async () => {
+      const el = await renderSelect(`
+        <dile-select disabled>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.querySelector('select').getAttribute('aria-disabled')).toBe('true');
+    });
+
+    it('has aria-hidden on arrow icon', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const arrowIcon = el.shadowRoot.querySelector('.arrow-icon');
+      expect(arrowIcon.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('sets message as role="status" with aria-live="polite"', async () => {
+      const el = await renderSelect(`
+        <dile-select message="Message">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const message = el.shadowRoot.querySelector('.message');
+      expect(message.getAttribute('role')).toBe('status');
+      expect(message.getAttribute('aria-live')).toBe('polite');
+    });
+  });
+
+  describe('Events', () => {
+    it('dispatches element-changed event on value change', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      let eventFired = false;
+      let eventDetail = null;
+      el.addEventListener('element-changed', (e) => {
+        eventFired = true;
+        eventDetail = e.detail;
+      });
+
+      el.querySelector('select').value = '2';
+      el.querySelector('select').dispatchEvent(new Event('change', { bubbles: true }));
+      await el.updateComplete;
+
+      expect(eventFired).toBe(true);
+      expect(eventDetail.value).toBe('2');
+    });
+
+    it('does not dispatch element-changed on quietChange', async () => {
+      const el = await renderSelect(`
+        <dile-select value="1">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      let eventCount = 0;
+      el.addEventListener('element-changed', () => {
+        eventCount++;
+      });
+
+      el.quietChange('2');
+      await el.updateComplete;
+
+      expect(el.value).toBe('2');
+      expect(eventCount).toBe(0);
+    });
+  });
+
+  describe('Methods', () => {
+    it('clear() sets value to undefined', async () => {
+      const el = await renderSelect(`
+        <dile-select value="1">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.value).toBeUndefined();
+      expect(el.querySelector('select').value).toBe('');
+    });
+
+    it('getOptionByValue() returns the correct option', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+          </select>
+        </dile-select>
+      `);
+
+      const option = el.getOptionByValue('2');
+      expect(option).toBeTruthy();
+      expect(option.value).toBe('2');
+      expect(option.textContent).toBe('Option 2');
+    });
+
+    it('getOptionByValue() returns undefined for non-existent value', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      const option = el.getOptionByValue('999');
+      expect(option).toBeUndefined();
+    });
+
+    it('quietChange() updates value without emitting event', async () => {
+      const el = await renderSelect(`
+        <dile-select value="1">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      let eventCount = 0;
+      el.addEventListener('element-changed', () => {
+        eventCount++;
+      });
+
+      el.quietChange('2');
+      await el.updateComplete;
+
+      expect(el.value).toBe('2');
+      expect(el.querySelector('select').value).toBe('2');
+      expect(eventCount).toBe(0);
+    });
+  });
+
+  describe('hideErrorOnInput', () => {
+    it('clears error message when value changes with hideErrorOnInput', async () => {
+      const el = await renderSelect(`
+        <dile-select errored message="Error" hideErrorOnInput>
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.errored).toBe(true);
+      expect(el.message).toBe('Error');
+
+      el.querySelector('select').value = '2';
+      el.querySelector('select').dispatchEvent(new Event('change', { bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.errored).toBe(false);
+      expect(el.message).toBe('');
+    });
+
+    it('does not clear error when hideErrorOnInput is false', async () => {
+      const el = await renderSelect(`
+        <dile-select errored message="Error">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `);
+
+      el.querySelector('select').value = '2';
+      el.querySelector('select').dispatchEvent(new Event('change', { bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.errored).toBe(true);
+      expect(el.message).toBe('Error');
+    });
+  });
+
+  describe('quietOnStart', () => {
+    it('does not emit element-changed on initialization with quietOnStart', async () => {
+      let eventCount = 0;
+      document.body.innerHTML = `
+        <dile-select value="1" quietOnStart>
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </dile-select>
+      `;
+      const el = document.body.querySelector('dile-select');
+      el.addEventListener('element-changed', () => {
+        eventCount++;
+      });
+
+      await el.updateComplete;
+
+      // Initial setup should not emit event
+      expect(eventCount).toBe(0);
+    });
+  });
+
+  describe('Form Association', () => {
+    it('is form-associated', async () => {
+      const el = await renderSelect(`
+        <dile-select>
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      expect(el.internals).toBeTruthy();
+    });
+
+    it('sets form value through ElementInternals', async () => {
+      const el = await renderSelect(`
+        <dile-select value="1">
+          <select slot="select">
+            <option value="1">Option 1</option>
+          </select>
+        </dile-select>
+      `);
+
+      el.value = '1';
+      await el.updateComplete;
+
+      expect(el.internals.form).toBeDefined();
+    });
+  });
+});

package/components/select/src/DileSelect.js

@@ -11,42 +11,82 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       :host {
         display: block;
         margin-bottom: 10px;
+        --dile-select-arrow-color: #303030;
       }
       * {
         box-sizing: border-box;
       }
+      .select-wrapper {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+      }
       ::slotted(select) {
         box-sizing: border-box;
         width: var(--dile-input-width, 100%);
         padding: var(--dile-input-padding,  7px 5px);
+        padding-right: 30px;
         line-height: var(--dile-input-line-height, 1.5em);
         font-size: var(--dile-select-font-size, 0.875em);
         border-radius: var(--dile-input-border-radius, 5px);
         border: var(--dile-input-border-width, 1px) solid var(--dile-input-border-color, #888);
         background-color: var(--dile-input-background-color, #fff);
         color: var(--dile-input-color, #303030);
-        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23303030%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
-        background-position: right 10px center;
-        background-repeat: no-repeat;
-        background-size: auto 50%;
         -moz-appearance: none;
         -webkit-appearance: none;
         appearance: none;
       }
-      ::slotted(select.dark) {
-        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
+      .arrow-icon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 18px;
+        height: 18px;
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .arrow-icon svg {
+        width: 100%;
+        height: 100%;
+      }
+      .arrow-icon path {
+        fill: var(--dile-select-arrow-color);
       }
       :host(:focus-within) ::slotted(select) {
         outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
         outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
         border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
       }
+      ::slotted(select:focus-visible) {
+        outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+        outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+      }
       ::slotted(select.errored) {
         border-color: var(--dile-input-error-border-color, #c00);
       }
+      ::slotted(select[aria-invalid="true"]) {
+        border-color: var(--dile-input-error-border-color, #c00);
+      }
       ::slotted(select.disabled) {
         background-color: #f5f5f5;
         border-color: var(--dile-input-disabled-border-color, #eee);
+        cursor: not-allowed;
+      }
+      /* High contrast mode support (WCAG 2.2 2.1.3) */
+      @media (forced-colors: active) {
+        ::slotted(select) {
+          border-width: var(--dile-input-border-width, 1px);
+        }
+        :host(:focus-within) ::slotted(select) {
+          outline: 3px solid;
+        }
+        .arrow-icon {
+          forced-color-adjust: none;
+          color: CanvasText;
+        }
       }
     `];
   }
@@ -69,16 +109,26 @@ export class DileSelect extends DileEmmitChange(LitElement) {
   }
 
   render() {
+    const messageId = this.message ? `${this.selectId}-message` : null;
+    const ariaDescribedBy = messageId ? messageId : null;
+    
     return html`
       <div>
         ${this.label
-          ? html`<label for="textField">${this.label}</label>`
+          ? html`<label for="${this.selectId}">${this.label}</label>`
           : ""
         }
-        <slot name="select"></slot>
+        <div class="select-wrapper">
+          <slot name="select"></slot>
+          <div class="arrow-icon" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448">
+              <path d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"></path>
+            </svg>
+          </div>
+        </div>
       </div>
       ${this.message 
-        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}" id="${messageId}" role="status" aria-live="polite"><span>${this.message}</span></div>`
         : ''
       }
     `;
@@ -95,6 +145,8 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     this.changeHandler = this.onChange.bind(this);
     this.quiet = false;
     this.internals = this.attachInternals();
+    // Generate unique ID for label association
+    this.selectId = `dile-select-${Math.random().toString(36).substr(2, 9)}`;
   }
 
 
@@ -104,7 +156,12 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     if (!this.elselect) {
       throw new Error('Use dile-select with a select element in the slot "select"');
     } else {
+      // Assign unique ID for label association (a11y)
+      if (!this.elselect.id) {
+        this.elselect.id = this.selectId;
+      }
       this.elselect.addEventListener("change", this.changeHandler);
+      this.updateSelectA11y();
     }
   }
 
@@ -136,10 +193,29 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     if(changedProperties.has("disabled")) {
       this.elselect.disabled = this.disabled;
       this.elselect.classList.toggle("disabled", this.disabled);
+      this.elselect.setAttribute("aria-disabled", this.disabled);
     }
-    if(changedProperties.has("errored")) {
-      this.elselect.classList.toggle("errored", this.errored);
+    if(changedProperties.has("errored") || changedProperties.has("message")) {
+      this.updateSelectA11y();
+    }
+  }
+
+  updateSelectA11y() {
+    if (!this.elselect) return;
+    
+    // Set aria-invalid when errored
+    this.elselect.setAttribute("aria-invalid", this.errored);
+    
+    // Set aria-describedby when message exists
+    const messageId = this.message ? `${this.selectId}-message` : null;
+    if (messageId) {
+      this.elselect.setAttribute("aria-describedby", messageId);
+    } else {
+      this.elselect.removeAttribute("aria-describedby");
     }
+    
+    // Update visual state
+    this.elselect.classList.toggle("errored", this.errored);
   }
 
   firstUpdated() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0aad1a87b1c29354c1312b9d3a41795fd840878a"
+  "gitHead": "8cbccc74037ddf6004d03daf6726adca91481d95"
 }