@dile/utils 3.0.33 → 3.0.35

package/components/datepicker/calendar.spec.js

@@ -19,4 +19,118 @@ describe('dile-calendar', () => {
     expect(el.shadowRoot.querySelector('.calendar__navigation')).toBeTruthy();
     expect(el.shadowRoot.querySelectorAll('.calendar__day-button').length).toBeGreaterThan(0);
   });
+
+  it('has accessible navigation buttons with aria-label', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    await el.updateComplete;
+
+    const prevButtons = el.shadowRoot.querySelectorAll('.calendar__previous-button');
+    const nextButtons = el.shadowRoot.querySelectorAll('.calendar__next-button');
+
+    expect(prevButtons.length).toBe(2); // Year and Month prev
+    expect(nextButtons.length).toBe(2); // Year and Month next
+
+    prevButtons.forEach(btn => {
+      expect(btn.getAttribute('aria-label')).toBeTruthy();
+    });
+    nextButtons.forEach(btn => {
+      expect(btn.getAttribute('aria-label')).toBeTruthy();
+    });
+  });
+
+  it('has accessible grid semantics and screen-reader day labels', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    await el.updateComplete;
+
+    const gridcells = el.shadowRoot.querySelectorAll('[role="gridcell"]');
+    expect(gridcells.length).toBeGreaterThan(0);
+
+    const dayButtons = el.shadowRoot.querySelectorAll('.calendar__day-button[role="button"]');
+    expect(dayButtons.length).toBeGreaterThan(0);
+
+    const srLabels = el.shadowRoot.querySelectorAll('.calendar__day-button .u-sr-only');
+    expect(srLabels.length).toBe(dayButtons.length);
+    expect(srLabels[0].textContent.trim().length).toBeGreaterThan(0);
+  });
+
+  it('supports roving tabindex where only one active date has tabindex 0', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    await el.updateComplete;
+
+    const focusableDays = el.shadowRoot.querySelectorAll('.calendar__day-button[tabindex="0"]');
+    expect(focusableDays.length).toBe(1);
+
+    const unfocusableDays = el.shadowRoot.querySelectorAll('.calendar__day-button[tabindex="-1"]');
+    expect(unfocusableDays.length).toBeGreaterThan(0);
+  });
+
+  it('navigates days with keyboard arrow keys', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    await el.updateComplete;
+
+    const initialDate = new Date(2026, 0, 15);
+    el.centralDate = initialDate;
+    await el.updateComplete;
+
+    const contentWrapper = el.shadowRoot.getElementById('js-content-wrapper');
+
+    // ArrowRight: next day
+    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.centralDate.getDate()).toBe(16);
+
+    // ArrowLeft: previous day
+    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.centralDate.getDate()).toBe(15);
+
+    // ArrowDown: next week (+7 days)
+    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.centralDate.getDate()).toBe(22);
+
+    // ArrowUp: previous week (-7 days)
+    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.centralDate.getDate()).toBe(15);
+  });
+
+  it('selects date when clicking a day button', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    await el.updateComplete;
+
+    let selectedDate = null;
+    el.addEventListener('user-selected-date-changed', (e) => {
+      selectedDate = e.detail.selectedDate;
+    });
+
+    const activeDayButton = el.shadowRoot.querySelector('.calendar__day-button[tabindex="0"]');
+    activeDayButton.click();
+    await el.updateComplete;
+
+    expect(selectedDate).toBeTruthy();
+    expect(selectedDate instanceof Date).toBe(true);
+  });
+
+  it('navigates next and previous months and years', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    el.centralDate = new Date(2026, 5, 15); // June 2026
+    await el.updateComplete;
+
+    el.goToNextMonth();
+    await el.updateComplete;
+    expect(el.centralDate.getMonth()).toBe(6); // July
+
+    el.goToPreviousMonth();
+    await el.updateComplete;
+    expect(el.centralDate.getMonth()).toBe(5); // June
+
+    el.goToNextYear();
+    await el.updateComplete;
+    expect(el.centralDate.getFullYear()).toBe(2027);
+
+    el.goToPreviousYear();
+    await el.updateComplete;
+    expect(el.centralDate.getFullYear()).toBe(2026);
+  });
 });

package/components/datepicker/datepicker.spec.js

@@ -20,14 +20,26 @@ describe('dile-datepicker', () => {
     expect(el.shadowRoot.querySelector('dile-iconlib')).toBeTruthy();
   });
 
-  it('updates value when a date is selected from the calendar', async () => {
+  it('updates value when a date is selected from the calendar and closes overlay', async () => {
     const el = await renderDatepicker('<dile-datepicker name="birthdate"></dile-datepicker>');
     const calendar = el.shadowRoot.querySelector('dile-calendar');
+    const menu = el.shadowRoot.getElementById('menu');
+
     calendar.dispatchEvent(new CustomEvent('user-selected-date-changed', {
       detail: { selectedDate: new Date(2024, 0, 15) },
+      bubbles: true,
+      composed: true,
     }));
     await el.updateComplete;
 
     expect(el.value).toBeTruthy();
+    expect(menu._overlayClass).toBe('');
+  });
+
+  it('passes firstDayOfWeek to the dile-calendar child', async () => {
+    const el = await renderDatepicker('<dile-datepicker name="birthdate" firstDayOfWeek="1"></dile-datepicker>');
+    await el.updateComplete;
+    const calendar = el.shadowRoot.querySelector('dile-calendar');
+    expect(calendar.firstDayOfWeek).toBe(1);
   });
 });

package/components/datepicker/datetimepicker.spec.js

@@ -22,11 +22,34 @@ describe('dile-datetimepicker', () => {
     expect(el.shadowRoot.querySelector('dile-time-picker')).toBeTruthy();
   });
 
-  it('updates value combining date and time when accepted', async () => {
+  it('renders an accessible accept button with aria-label and type="button"', async () => {
+    const el = await renderDatetimepicker('<dile-datetimepicker name="appointment" acceptLabel="Confirm selection"></dile-datetimepicker>');
+    const acceptBtn = el.shadowRoot.querySelector('.accept-button');
+
+    expect(acceptBtn).toBeTruthy();
+    expect(acceptBtn.tagName.toLowerCase()).toBe('button');
+    expect(acceptBtn.getAttribute('type')).toBe('button');
+    expect(acceptBtn.getAttribute('aria-label')).toBe('Confirm selection');
+    expect(acceptBtn.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('updates value combining date and time when accepted via method', async () => {
     const el = await renderDatetimepicker('<dile-datetimepicker name="appointment"></dile-datetimepicker>');
     el.acceptTime();
     await el.updateComplete;
 
     expect(el.value).toMatch(/^\d{4}-\d{2}-\d{2} /);
   });
+
+  it('updates value and closes overlay when accept button is clicked', async () => {
+    const el = await renderDatetimepicker('<dile-datetimepicker name="appointment"></dile-datetimepicker>');
+    const acceptBtn = el.shadowRoot.querySelector('.accept-button');
+    const menu = el.shadowRoot.getElementById('menu');
+
+    acceptBtn.click();
+    await el.updateComplete;
+
+    expect(el.value).toMatch(/^\d{4}-\d{2}-\d{2} /);
+    expect(menu._overlayClass).toBe('');
+  });
 });

package/components/datepicker/src/DileDatepicker.js

@@ -1,5 +1,6 @@
 import { html, css } from "lit";
 import { DileInputIcon } from '@dile/ui/components/input/index.js';
+import { DileCloseOnEscPressed } from '@dile/ui/mixins/close-on-esc-pressed';
 import '@dile/iconlib/lucide-icons/calendar.js';
 import '@dile/ui/components/menu-overlay/menu-overlay.js';
 
@@ -7,7 +8,7 @@ import {
   formatDate,
 } from '@lion/ui/localize.js';
 
-export class DileDatepicker extends DileInputIcon {
+export class DileDatepicker extends DileCloseOnEscPressed(DileInputIcon) {
   static get styles() {
     return [
       super.styles,
@@ -64,6 +65,7 @@ export class DileDatepicker extends DileInputIcon {
       verticalAlign: { type: String },
       moveTop: { type: Number },
       moveLeft: { type: Number },
+      opened: { type: Boolean },
     };
   }
 
@@ -75,6 +77,7 @@ export class DileDatepicker extends DileInputIcon {
     this.verticalAlign = 'center';
     this.moveTop = 0;
     this.moveLeft = 0;
+    this.opened = false;
   }
 
   renderIconButton() {
@@ -88,6 +91,8 @@ export class DileDatepicker extends DileInputIcon {
         verticalAlign="${this.verticalAlign}" 
         horizontalAlign="${this.horizontalAlign}" 
         id="menu"
+        @overlay-opened="${this.overlayOpenedHandler}"
+        @overlay-closed="${this.overlayClosedHandler}"
       >
         <div slot="trigger" class="trigger-container">
           ${super.renderIconButton()}
@@ -99,11 +104,40 @@ export class DileDatepicker extends DileInputIcon {
     `;
   }
 
+  overlayOpenedHandler() {
+    this.opened = true;
+  }
+
+  overlayClosedHandler() {
+    this.opened = false;
+  }
+
   showDate(e) {
     let date = formatDate(e.detail.selectedDate);
     this.value = date;
-    this.shadowRoot.getElementById('menu').close();
-  }  
+    const menu = this.shadowRoot.getElementById('menu');
+    if (menu) {
+      menu.close();
+    }
+  }
+  
+  close() {
+    const menu = this.shadowRoot.getElementById('menu');
+    if (menu) {
+      menu.close();
+    }
+  }
+  
+  openDatepicker() {
+    const menu = this.shadowRoot.getElementById('menu');
+    if (menu) {
+      menu.open();
+    }
+  }
+  
+  closeDatepicker() {
+    this.close();
+  }
 
   get contentTemplate() {
     return html`

package/components/datepicker/src/DileDatetimepicker.js

@@ -51,6 +51,22 @@ export class DileDatetimepicker extends DileDatepicker {
           display: flex;
           align-items: center;
         }
+        .accept-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: transparent;
+          border: none;
+          padding: 0;
+          margin: 0;
+          cursor: pointer;
+          border-radius: 50%;
+          outline: none;
+        }
+        .accept-button:focus-visible {
+          outline: 2px solid var(--dile-datetimepicker-accept-focus-ring-color, var(--dile-primary-color, #2563eb));
+          outline-offset: 2px;
+        }
         .time-area dile-icon {
           --dile-icon-size: var(--dile-datetimepicker-accept-icon-size, 24px);
           --dile-icon-color: var(--dile-datetimepicker-accept-icon-color, var(--dile-on-primary-color, #888));
@@ -63,9 +79,17 @@ export class DileDatetimepicker extends DileDatepicker {
     `];
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+      acceptLabel: { type: String },
+    };
+  }
+
   constructor() {
     super();
     this.icon = 'lucide.calendar-clock';
+    this.acceptLabel = 'Accept date and time';
   }
 
   get contentTemplate() {
@@ -80,7 +104,15 @@ export class DileDatetimepicker extends DileDatepicker {
           <span>
             <dile-time-picker></dile-time-picker>
           </span>
-          <dile-icon rounded .icon=${doneIcon} @click=${this.acceptTime}></dile-icon>
+          <button 
+            type="button" 
+            class="accept-button" 
+            aria-label="${this.acceptLabel}" 
+            title="${this.acceptLabel}"
+            @click=${this.acceptTime}
+          >
+            <dile-icon rounded .icon=${doneIcon}></dile-icon>
+          </button>
         </div>
       </div>
     `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.0.33",
+  "version": "3.0.35",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -21,8 +21,8 @@
   "homepage": "https://dile-components.com/",
   "dependencies": {
     "@dile/iconlib": "^1.8.1",
-    "@dile/ui": "^3.6.6",
-    "@lion/ui": "^0.11.2",
+    "@dile/ui": "^3.6.7",
+    "@lion/ui": "^0.21.0",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
     "lit": "^2.7.0 || ^3.0.0"
@@ -30,5 +30,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3bc0a2459a5ced3e7105ce061f93f07a9c798759"
+  "gitHead": "d62c55983a8fcdf7b1a4cb2b6da64d4d1e30b9c6"
 }