@api-client/ui 0.5.6 → 0.5.8

package/src/md/date-picker/ui-date-picker-modal.ts

@@ -21,23 +21,70 @@ export interface ModalDatePickerChangeEvent {
  * A modal date picker for selecting date ranges.
  * Extends full-screen and is ideal for date range selection like flight bookings.
  *
+ * ## Features
+ * - Full-screen modal interface
+ * - Date range selection with visual feedback
+ * - Calendar and input mode toggle
+ * - Min/max date constraints
+ * - Disabled dates support
+ * - Accessible design with proper ARIA attributes and semantic HTML
+ * - Real-time date range validation
+ *
+ * ## Events
+ *
+ * ### `date-range-change`
+ * Fired when a date range is selected or changed.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   range: DateRange,
+ *   formattedRange: {
+ *     start: string | null,
+ *     end: string | null
+ *   }
+ * }
+ * ```
+ *
+ * ### `close`
+ * Fired when the modal is closed.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   confirmed: boolean,
+ *   range: DateRange | null
+ * }
+ * ```
+ *
  * ## Usage
  *
+ * ### Basic usage
  * ```html
  * <ui-date-picker-modal
  *   .open=${true}
  *   .selectedRange=${{ start: new Date(), end: null }}
- *   @change=${this.handleRangeChange}
+ *   @date-range-change=${this.handleRangeChange}
  *   @close=${this.handleClose}
  * ></ui-date-picker-modal>
  * ```
  *
- * ### Custom labels
+ * ### Custom labels and constraints
  * ```html
  * <ui-date-picker-modal
  *   title="Select travel dates"
  *   startLabel="Check-in"
  *   endLabel="Check-out"
+ *   .minDate=${new Date()}
+ *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
+ *   .disabledDates=${[new Date('2024-12-25')]}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### With mode toggle disabled
+ * ```html
+ * <ui-date-picker-modal
+ *   .showModeToggle=${false}
  * ></ui-date-picker-modal>
  * ```
  */
@@ -95,26 +142,33 @@ export class UiDatePickerModal extends LitElement {
    */
   @property({ type: Boolean }) accessor showModeToggle = true
 
-  @state() private accessor _isInputMode = false
+  @state() private accessor isInputMode = false
+
+  constructor() {
+    super()
+    // Initialize boolean properties to false as per Lit best practices
+    this.open = false
+    this.showModeToggle = true
+  }
 
-  private _handleRangeSelect(event: CustomEvent<DateRangeSelectEvent>): void {
+  private handleRangeSelect(event: CustomEvent<DateRangeSelectEvent>): void {
     this.selectedRange = event.detail.range
-    this._dispatchChangeEvent()
+    this.dispatchChangeEvent()
   }
 
-  private _handleCancel(): void {
-    this._dispatchCloseEvent(false)
+  private handleCancel(): void {
+    this.dispatchCloseEvent(false)
   }
 
-  private _handleConfirm(): void {
-    this._dispatchCloseEvent(true)
+  private handleConfirm(): void {
+    this.dispatchCloseEvent(true)
   }
 
-  private _handleModeToggle(): void {
-    this._isInputMode = !this._isInputMode
+  private handleModeToggle(): void {
+    this.isInputMode = !this.isInputMode
   }
 
-  private _dispatchChangeEvent(): void {
+  private dispatchChangeEvent(): void {
     if (!this.selectedRange) return
 
     const event: ModalDatePickerChangeEvent = {
@@ -134,7 +188,7 @@ export class UiDatePickerModal extends LitElement {
     )
   }
 
-  private _dispatchCloseEvent(confirmed: boolean): void {
+  private dispatchCloseEvent(confirmed: boolean): void {
     this.dispatchEvent(
       new CustomEvent('close', {
         detail: {
@@ -147,102 +201,131 @@ export class UiDatePickerModal extends LitElement {
     )
   }
 
-  private _renderHeader(): TemplateResult {
+  private renderHeader(): TemplateResult {
     return html`
-      <div class="modal-header">
-        <h2 class="modal-title">${this.title}</h2>
-        <div style="display: flex; gap: 8px;">
+      <header class="modal-header">
+        <h2 id="modal-title" class="modal-title">${this.title}</h2>
+        <div class="header-actions">
           ${this.showModeToggle
             ? html`
                 <ui-icon-button
-                  @click=${this._handleModeToggle}
-                  aria-label=${this._isInputMode ? 'Show calendar' : 'Show date input'}
-                  title=${this._isInputMode ? 'Show calendar' : 'Show date input'}
+                  @click=${this.handleModeToggle}
+                  aria-label=${this.isInputMode ? 'Show calendar' : 'Show date input'}
+                  title=${this.isInputMode ? 'Show calendar' : 'Show date input'}
                 >
-                  <ui-icon icon=${this._isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
+                  <ui-icon icon=${this.isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
                 </ui-icon-button>
               `
             : ''}
-          <ui-icon-button @click=${this._handleCancel} aria-label="Close" title="Close">
+          <ui-icon-button @click=${this.handleCancel} aria-label="Close" title="Close">
             <ui-icon icon="close"></ui-icon>
           </ui-icon-button>
         </div>
-      </div>
+      </header>
     `
   }
 
-  private _renderDateDisplay(): TemplateResult {
+  private renderDateDisplay(): TemplateResult {
     const startDate = this.selectedRange?.start
     const endDate = this.selectedRange?.end
 
     return html`
-      <div class="date-range-display">
+      <section class="date-range-display" role="status" aria-live="polite" aria-label="Selected date range">
         <div class="date-display">
-          <div class="date-label">${this.startLabel}</div>
-          <div class="date-value">${startDate ? formatDate(startDate, this.locale) : 'Select date'}</div>
+          <div class="date-label" id="start-label">${this.startLabel}</div>
+          <div class="date-value" aria-labelledby="start-label" aria-describedby="start-description">
+            ${startDate ? formatDate(startDate, this.locale) : 'Select date'}
+          </div>
+          <div id="start-description" class="visually-hidden">
+            ${startDate ? `Start date selected: ${formatDate(startDate, this.locale)}` : 'No start date selected'}
+          </div>
         </div>
-        <div class="date-separator">—</div>
+        <div class="date-separator" aria-hidden="true">—</div>
         <div class="date-display">
-          <div class="date-label">${this.endLabel}</div>
-          <div class="date-value">${endDate ? formatDate(endDate, this.locale) : 'Select date'}</div>
+          <div class="date-label" id="end-label">${this.endLabel}</div>
+          <div class="date-value" aria-labelledby="end-label" aria-describedby="end-description">
+            ${endDate ? formatDate(endDate, this.locale) : 'Select date'}
+          </div>
+          <div id="end-description" class="visually-hidden">
+            ${endDate ? `End date selected: ${formatDate(endDate, this.locale)}` : 'No end date selected'}
+          </div>
         </div>
-      </div>
+      </section>
     `
   }
 
-  private _renderCalendar(): TemplateResult {
+  private renderCalendar(): TemplateResult {
     const currentDate = this.selectedRange?.start || new Date()
 
     return html`
       <ui-date-picker-calendar
         .year=${currentDate.getFullYear()}
         .month=${currentDate.getMonth()}
-        .selectedRange=${this.selectedRange}
+        .rangeStart=${this.selectedRange?.start || null}
+        .rangeEnd=${this.selectedRange?.end || null}
         .rangeSelection=${true}
         .minDate=${this.minDate}
         .maxDate=${this.maxDate}
         .disabledDates=${this.disabledDates}
         .locale=${this.locale}
-        @date-range-select=${this._handleRangeSelect}
+        @date-range-select=${this.handleRangeSelect}
       ></ui-date-picker-calendar>
     `
   }
 
-  private _renderInputMode(): TemplateResult {
-    // For now, we'll show a placeholder for input mode
-    // This could be enhanced with actual date input fields
+  private renderInputMode(): TemplateResult {
     return html`
-      <div style="padding: 24px; text-align: center; color: var(--ui-color-on-surface-variant);">
-        <ui-icon icon="edit" style="font-size: 48px; margin-bottom: 16px;"></ui-icon>
-        <p>Manual date input mode</p>
-        <p>This feature can be enhanced with date input fields</p>
-      </div>
+      <section class="input-mode-placeholder" role="status" aria-live="polite">
+        <ui-icon icon="edit" class="input-mode-icon" aria-hidden="true"></ui-icon>
+        <h3>Manual date input mode</h3>
+        <p>This feature can be enhanced with date input fields for direct text entry</p>
+        <p><em>Use the calendar toggle button to return to calendar view</em></p>
+      </section>
     `
   }
 
-  private _renderContent(): TemplateResult {
+  private renderContent(): TemplateResult {
     return html`
-      <div class="modal-content">
-        ${this._renderDateDisplay()} ${this._isInputMode ? this._renderInputMode() : this._renderCalendar()}
-      </div>
+      <main id="modal-content" class="modal-content">
+        ${this.renderDateDisplay()} ${this.isInputMode ? this.renderInputMode() : this.renderCalendar()}
+      </main>
     `
   }
 
-  private _renderActions(): TemplateResult {
+  private renderActions(): TemplateResult {
     const hasValidRange = this.selectedRange?.start && this.selectedRange?.end
 
     return html`
-      <div class="modal-actions">
-        <ui-button color="text" @click=${this._handleCancel}>Cancel</ui-button>
-        <ui-button color="filled" @click=${this._handleConfirm} .disabled=${!hasValidRange}> Confirm </ui-button>
-      </div>
+      <footer class="modal-actions" role="group" aria-label="Date picker actions">
+        <ui-button color="text" @click=${this.handleCancel} aria-describedby="cancel-description"> Cancel </ui-button>
+        <ui-button
+          color="filled"
+          @click=${this.handleConfirm}
+          .disabled=${!hasValidRange}
+          aria-describedby="confirm-description"
+        >
+          Confirm
+        </ui-button>
+        <div id="cancel-description" class="visually-hidden">Close the date picker without saving changes</div>
+        <div id="confirm-description" class="visually-hidden">
+          ${hasValidRange
+            ? 'Save the selected date range and close the picker'
+            : 'Select both start and end dates to confirm the selection'}
+        </div>
+      </footer>
     `
   }
 
   override render(): TemplateResult {
     return html`
-      <ui-dialog .open=${this.open} @close=${this._handleCancel}>
-        ${this._renderHeader()} ${this._renderContent()} ${this._renderActions()}
+      <ui-dialog
+        .open=${this.open}
+        @close=${this.handleCancel}
+        role="dialog"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-content"
+      >
+        ${this.renderHeader()} ${this.renderContent()} ${this.renderActions()}
       </ui-dialog>
     `
   }

package/test/README.md

@@ -47,9 +47,10 @@ npm run test:watch
 
 # Run tests with coverage
 npm run test:coverage
-```
 
-> ⚠️ **Note**: This project uses Web Test Runner, not Jest. Test filtering options like `--testPathPattern` from Jest are not available. To run specific tests, you can temporarily modify the `files` pattern in `web-test-runner.config.js` or use pattern matching if supported by your Web Test Runner version. For most cases, running all tests is recommended as the test suite is optimized for speed.
+# Run tests for a single file
+npm test -- --files=".tmp/test/**/CurrencyPicker.integration.test.js"
+```
 
 ## Global Test Utilities
 

package/test/elements/currency/CurrencyPicker.accessibility.test.ts

@@ -0,0 +1,328 @@
+import { fixture, assert, html } from '@open-wc/testing'
+import { sendKeys } from '@web/test-runner-commands'
+import CurrencyPicker from '../../../src/elements/currency/internals/Picker.js'
+import '../../../src/elements/currency/currency-picker.js'
+
+describe('CurrencyPicker - Accessibility', () => {
+  async function basicFixture(): Promise<CurrencyPicker> {
+    return fixture(html`<currency-picker label="Select Currency"></currency-picker>`)
+  }
+
+  async function multiSelectFixture(): Promise<CurrencyPicker> {
+    return fixture(html`<currency-picker multi label="Select Multiple Currencies"></currency-picker>`)
+  }
+
+  async function errorStateFixture(): Promise<CurrencyPicker> {
+    return fixture(html`<currency-picker required label="Required Currency Selection"></currency-picker>`)
+  }
+
+  describe('ARIA Attributes', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await basicFixture()
+    })
+
+    it('should have proper ARIA roles', async () => {
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      assert.equal(container?.getAttribute('role'), 'group')
+    })
+
+    it('should have descriptive ARIA labels', async () => {
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      const ariaLabel = container?.getAttribute('aria-label')
+
+      assert.exists(ariaLabel)
+      assert.include(ariaLabel || '', 'Currency selector')
+    })
+
+    it('should update ARIA labels when selection changes', async () => {
+      picker.selected = ['USD']
+      await picker.updateComplete
+
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      const ariaLabel = container?.getAttribute('aria-label')
+
+      assert.include(ariaLabel || '', 'USD selected')
+    })
+
+    it('should have proper ARIA invalid state', async () => {
+      picker.required = true
+      picker.clearSelection()
+      await picker.updateComplete
+
+      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      assert.equal(select?.getAttribute('aria-invalid'), 'true')
+    })
+
+    it('should have aria-describedby when supporting text is present', async () => {
+      picker.supportingText = 'Choose your preferred currency'
+      await picker.updateComplete
+
+      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      assert.exists(select?.getAttribute('aria-describedby'))
+    })
+  })
+
+  describe('Multi-select ARIA', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await multiSelectFixture()
+    })
+
+    it('should announce selection count for multi-select', async () => {
+      picker.selected = ['USD', 'EUR', 'GBP']
+      await picker.updateComplete
+
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      const ariaLabel = container?.getAttribute('aria-label')
+
+      assert.include(ariaLabel || '', '3 currencies selected')
+    })
+
+    it('should have removable chips with proper labels', async () => {
+      picker.selected = ['USD', 'EUR']
+      await picker.updateComplete
+
+      const chips = picker.shadowRoot?.querySelectorAll('ui-chip[removable]')
+      assert.equal(chips?.length, 2)
+
+      chips?.forEach((chip) => {
+        assert.isTrue(chip.hasAttribute('removable'))
+      })
+    })
+  })
+
+  describe('Error Announcements', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await errorStateFixture()
+    })
+
+    it('should have error alerts with proper ARIA', async () => {
+      // Set a value first, then clear to trigger validation
+      picker.selected = ['USD']
+      await picker.updateComplete
+
+      // Now set to empty to trigger validation error
+      picker.selected = []
+      await picker.updateComplete
+
+      const errorElement = picker.shadowRoot?.querySelector('.error')
+      assert.equal(errorElement?.getAttribute('role'), 'alert')
+      assert.equal(errorElement?.getAttribute('aria-live'), 'polite')
+    })
+
+    it('should announce errors to screen readers', async () => {
+      picker.showErrors = true
+
+      // Set a value first, then clear to trigger validation
+      picker.selected = ['USD']
+      await picker.updateComplete
+
+      // Now set to empty to trigger validation error
+      picker.selected = []
+      await picker.updateComplete
+
+      const errorMessage = picker.shadowRoot?.querySelector('.error-message')
+      assert.exists(errorMessage)
+      assert.exists(errorMessage?.textContent)
+    })
+  })
+
+  describe('Keyboard Navigation', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await basicFixture()
+    })
+
+    it('should be focusable', async () => {
+      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      select.focus()
+
+      // Check if the picker or its select element has focus
+      const activeElement = picker.shadowRoot?.activeElement || document.activeElement
+      assert.isTrue(activeElement === select || activeElement === picker)
+    })
+
+    it('should support keyboard selection', async () => {
+      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      select.focus()
+
+      // Simulate opening dropdown and selecting
+      await sendKeys({
+        press: 'Space',
+      })
+
+      await sendKeys({
+        press: 'ArrowDown',
+      })
+
+      await sendKeys({
+        press: 'Enter',
+      })
+
+      // Should have some interaction (exact behavior depends on md-outlined-select)
+      assert.exists(select)
+    })
+
+    it('should support chip removal via keyboard in multi-select', async () => {
+      picker.multi = true
+      picker.selected = ['USD', 'EUR']
+      await picker.updateComplete
+
+      const chips = picker.shadowRoot?.querySelectorAll('ui-chip') as NodeListOf<HTMLElement>
+      assert.isAtLeast(chips.length, 1)
+
+      // Focus first chip and simulate removal
+      chips[0].focus()
+      await sendKeys({
+        press: 'Delete',
+      })
+
+      // The chip should be focusable and support keyboard interaction
+      assert.exists(chips[0])
+    })
+  })
+
+  describe('Focus Management', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await basicFixture()
+    })
+
+    it('should have visible focus indicators', async () => {
+      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      select.focus()
+
+      // Check that focus styles are applied (this may require checking computed styles)
+      assert.exists(select)
+    })
+
+    it('should maintain focus appropriately after interactions', async () => {
+      picker.multi = true
+      picker.selected = ['USD']
+      await picker.updateComplete
+
+      const select = picker.shadowRoot?.querySelector('md-outlined-select') as HTMLElement
+      select.focus()
+
+      // Simulate adding another currency
+      picker.selected = ['USD', 'EUR']
+      await picker.updateComplete
+
+      // Focus should still be manageable
+      assert.exists(select)
+    })
+  })
+
+  describe('Color Contrast and Visual Accessibility', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await basicFixture()
+    })
+
+    it('should render with proper contrast for text', async () => {
+      // This test would ideally check computed styles for contrast ratios
+      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      assert.exists(select)
+
+      // Basic check that text content is rendered
+      const options = picker.shadowRoot?.querySelectorAll('md-select-option')
+      assert.isAtLeast(options?.length || 0, 1)
+    })
+
+    it('should have distinguishable error states', async () => {
+      picker.required = true
+      picker.showErrors = true
+      picker.clearSelection()
+      await picker.updateComplete
+
+      const errorElement = picker.shadowRoot?.querySelector('.error')
+      const selectElement = picker.shadowRoot?.querySelector('md-outlined-select')
+      const isInvalid = !picker.validity.valid
+      const hasAriaInvalid = selectElement?.getAttribute('aria-invalid') === 'true'
+
+      assert.exists(errorElement, 'Error element should be present for visual accessibility')
+      assert.isTrue(isInvalid, 'Component should be in invalid state')
+      assert.isTrue(hasAriaInvalid, 'Select should have aria-invalid=true for screen readers')
+    })
+  })
+
+  describe('Screen Reader Support', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await basicFixture()
+    })
+
+    it('should have proper semantic structure', async () => {
+      // Check that component has accessible structure
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+
+      assert.exists(container)
+      assert.equal(container?.getAttribute('role'), 'group')
+      assert.exists(container?.getAttribute('aria-label'))
+      assert.exists(select)
+    })
+
+    it('should announce state changes', async () => {
+      picker.selected = ['USD']
+      await picker.updateComplete
+
+      // Check that ARIA live regions and labels are updated
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      const ariaLabel = container?.getAttribute('aria-label')
+
+      assert.include(ariaLabel || '', 'selected')
+    })
+  })
+
+  describe('WCAG Compliance', () => {
+    let picker: CurrencyPicker
+
+    beforeEach(async () => {
+      picker = await basicFixture()
+    })
+
+    it('should have sufficient touch targets', async () => {
+      // Check that interactive elements are large enough for touch
+      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      assert.exists(select)
+
+      // Material Design select should have proper touch targets
+      // This would ideally check computed dimensions
+    })
+
+    it('should work without JavaScript enhancements', async () => {
+      // Basic HTML structure should be accessible
+      const select = picker.shadowRoot?.querySelector('md-outlined-select')
+      const options = picker.shadowRoot?.querySelectorAll('md-select-option')
+
+      assert.exists(select)
+      assert.isAtLeast(options?.length || 0, 1)
+    })
+
+    it('should support high contrast mode', async () => {
+      // This would check forced-colors media query support
+      // For now, verify basic structure exists
+      const container = picker.shadowRoot?.querySelector('.currency-picker')
+      assert.exists(container)
+    })
+
+    it('should respect reduced motion preferences', async () => {
+      // This would check prefers-reduced-motion media query
+      // For now, verify component doesn't rely on motion for function
+      picker.selected = ['USD']
+      await picker.updateComplete
+
+      assert.deepEqual(picker.selected, ['USD'])
+    })
+  })
+})