@api-client/ui 0.5.5 → 0.5.7

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

@@ -0,0 +1,346 @@
+import { LitElement, html, TemplateResult } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { modalStyles } from './internals/DatePicker.styles.js'
+import { DateRange, formatDate } from './internals/DatePickerUtils.js'
+import type { DateRangeSelectEvent } from './internals/DatePickerCalendar.js'
+import './internals/DatePickerCalendar.js'
+import '../../md/dialog/ui-dialog.js'
+import '../../md/button/ui-button.js'
+import '../../md/icon-button/ui-icon-button.js'
+import '../../md/icons/ui-icon.js'
+
+export interface ModalDatePickerChangeEvent {
+  range: DateRange
+  formattedRange: {
+    start: string | null
+    end: string | null
+  }
+}
+
+/**
+ * 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 }}
+ *   @date-range-change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### 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>
+ * ```
+ */
+@customElement('ui-date-picker-modal')
+export class UiDatePickerModal extends LitElement {
+  static override styles = modalStyles
+
+  /**
+   * Whether the modal is open
+   */
+  @property({ type: Boolean }) accessor open = false
+
+  /**
+   * The modal title
+   */
+  @property({ type: String }) override accessor title = 'Select dates'
+
+  /**
+   * Label for the start date
+   */
+  @property({ type: String }) accessor startLabel = 'Start date'
+
+  /**
+   * Label for the end date
+   */
+  @property({ type: String }) accessor endLabel = 'End date'
+
+  /**
+   * The selected date range
+   */
+  @property({ type: Object }) accessor selectedRange: DateRange | null = null
+
+  /**
+   * Minimum selectable date
+   */
+  @property({ type: Object }) accessor minDate: Date | undefined = undefined
+
+  /**
+   * Maximum selectable date
+   */
+  @property({ type: Object }) accessor maxDate: Date | undefined = undefined
+
+  /**
+   * Array of disabled dates
+   */
+  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined
+
+  /**
+   * Locale for date formatting
+   */
+  @property({ type: String }) accessor locale: string | undefined = undefined
+
+  /**
+   * Whether to show edit/calendar toggle button
+   */
+  @property({ type: Boolean }) accessor showModeToggle = true
+
+  @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 {
+    this.selectedRange = event.detail.range
+    this.dispatchChangeEvent()
+  }
+
+  private handleCancel(): void {
+    this.dispatchCloseEvent(false)
+  }
+
+  private handleConfirm(): void {
+    this.dispatchCloseEvent(true)
+  }
+
+  private handleModeToggle(): void {
+    this.isInputMode = !this.isInputMode
+  }
+
+  private dispatchChangeEvent(): void {
+    if (!this.selectedRange) return
+
+    const event: ModalDatePickerChangeEvent = {
+      range: this.selectedRange,
+      formattedRange: {
+        start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,
+        end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,
+      },
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('date-range-change', {
+        detail: event,
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private dispatchCloseEvent(confirmed: boolean): void {
+    this.dispatchEvent(
+      new CustomEvent('close', {
+        detail: {
+          confirmed,
+          range: confirmed ? this.selectedRange : null,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private renderHeader(): TemplateResult {
+    return html`
+      <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'}
+                >
+                  <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 icon="close"></ui-icon>
+          </ui-icon-button>
+        </div>
+      </header>
+    `
+  }
+
+  private renderDateDisplay(): TemplateResult {
+    const startDate = this.selectedRange?.start
+    const endDate = this.selectedRange?.end
+
+    return html`
+      <section class="date-range-display" role="status" aria-live="polite" aria-label="Selected date range">
+        <div class="date-display">
+          <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" aria-hidden="true">—</div>
+        <div class="date-display">
+          <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>
+      </section>
+    `
+  }
+
+  private renderCalendar(): TemplateResult {
+    const currentDate = this.selectedRange?.start || new Date()
+
+    return html`
+      <ui-date-picker-calendar
+        .year=${currentDate.getFullYear()}
+        .month=${currentDate.getMonth()}
+        .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}
+      ></ui-date-picker-calendar>
+    `
+  }
+
+  private renderInputMode(): TemplateResult {
+    return html`
+      <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 {
+    return html`
+      <main id="modal-content" class="modal-content">
+        ${this.renderDateDisplay()} ${this.isInputMode ? this.renderInputMode() : this.renderCalendar()}
+      </main>
+    `
+  }
+
+  private renderActions(): TemplateResult {
+    const hasValidRange = this.selectedRange?.start && this.selectedRange?.end
+
+    return html`
+      <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}
+        role="dialog"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-content"
+      >
+        ${this.renderHeader()} ${this.renderContent()} ${this.renderActions()}
+      </ui-dialog>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-date-picker-modal': UiDatePickerModal
+  }
+
+  interface HTMLElementEventMap {
+    'date-range-change': CustomEvent<ModalDatePickerChangeEvent>
+    'close': CustomEvent<{
+      confirmed: boolean
+      range: DateRange | null
+    }>
+  }
+}

package/src/md/dialog/internals/Dialog.styles.ts

@@ -35,6 +35,7 @@ export default css`
     left: 50%;
     transform: translate(-50%, -50%);
     margin: 0;
+    z-index: 1000;
   }
 
   dialog.non-modal:open {

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'])
+    })
+  })
+})