Accessible Date Picker

Build a date picker component with enhanced accessibility features for screen reader users.

Requirements

Create a date picker that displays information to screen readers in a user-friendly format. The date picker should:

1. Display dates to screen readers in a clear, natural language format (e.g., "January 15th, 2024" rather than "2024-01-15")
2. Provide screen reader announcements when the selected date is formatted differently from the input value
3. Allow customization of the screen reader format to match user preferences
4. Work with a standard HTML input element

Specifications

Input Format

The input element should accept and display dates in ISO format (YYYY-MM-DD).

Screen Reader Format

Screen readers should announce dates using the format: "F j, Y" which displays as "Month Day, Year" (e.g., "January 15, 2024").

Test Cases

• When initialized with ariaDateFormat set to "F j, Y", the calendar element should have the aria-label attribute with dates formatted accordingly @test
• When a date "2024-03-15" is selected, screen readers should announce it as "March 15, 2024" @test
• When ariaDateFormat is changed dynamically, the aria-label should update to reflect the new format @test

Implementation

@generates

API

/**
 * Initialize an accessible date picker on an input element
 *
 * @param {HTMLInputElement} element - The input element to attach the date picker to
 * @param {Object} options - Configuration options
 * @param {string} options.ariaDateFormat - The format string for screen reader announcements
 * @returns {Object} The date picker instance
 */
function initAccessibleDatePicker(element, options) {
  // IMPLEMENTATION HERE
}

module.exports = {
  initAccessibleDatePicker
};

Dependencies { .dependencies }

flatpickr { .dependency }

Provides date picker functionality with built-in accessibility features.

@satisfied-by