Accessible Date Picker Pattern

<div class="datepicker-wrapper">
  <label for="date-input" id="date-label">Select a date</label>
  <div class="datepicker-input-group">
    <input
      type="text"
      id="date-input"
      placeholder="MM/DD/YYYY"
      autocomplete="off"
      aria-describedby="date-hint"
    >
    <button
      type="button"
      class="datepicker-toggle"
      aria-label="Open calendar"
      aria-expanded="false"
      aria-controls="calendar-popover"
    >
      <!-- Calendar icon SVG -->
    </button>
  </div>
  <span class="sr-only" id="date-hint">Format: MM/DD/YYYY</span>

  <div
    class="datepicker-calendar"
    id="calendar-popover"
    role="dialog"
    aria-modal="true"
    aria-label="Choose a date"
  >
    <div class="calendar-header">
      <button type="button" aria-label="Previous month">
        <!-- Left arrow icon -->
      </button>
      <div id="calendar-title" aria-live="polite">
        April 2026
      </div>
      <button type="button" aria-label="Next month">
        <!-- Right arrow icon -->
      </button>
    </div>

    <table role="grid" aria-labelledby="calendar-title">
      <thead>
        <tr>
          <th scope="col" abbr="Sunday">Su</th>
          <th scope="col" abbr="Monday">Mo</th>
          <th scope="col" abbr="Tuesday">Tu</th>
          <th scope="col" abbr="Wednesday">We</th>
          <th scope="col" abbr="Thursday">Th</th>
          <th scope="col" abbr="Friday">Fr</th>
          <th scope="col" abbr="Saturday">Sa</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <button
              type="button"
              role="gridcell"
              tabindex="-1"
              aria-label="April 1, 2026"
            >1</button>
          </td>
          <!-- ... more days -->
        </tr>
        <!-- ... more weeks -->
      </tbody>
    </table>

    <div role="status" aria-live="polite"
      class="sr-only"></div>
  </div>
</div>

.datepicker-wrapper {
  position: relative;
  display: inline-block;
  max-width: 20rem;
}

.datepicker-input-group {
  display: flex;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
}

.datepicker-input-group:focus-within {
  border-color: #5b2a86;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}

.datepicker-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  min-height: 2.75rem;
  outline: none;
}

.datepicker-toggle {
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Calendar popover */
.datepicker-calendar {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 20rem;
}

.datepicker-calendar.is-open {
  display: block;
}

/* Calendar grid */
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.calendar-day:hover {
  background: #f3f4f6;
}

/* Focus styles: SC 2.4.13 */
.calendar-day:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: 2px;
}

/* Today indicator */
.calendar-day[aria-current="date"] {
  font-weight: 700;
  border: 2px solid #5b2a86;
}

/* Selected date */
.calendar-day[aria-selected="true"] {
  background: #5b2a86;
  color: #fff;
  font-weight: 600;
}

class DatePicker {
  constructor(wrapper) {
    this.wrapper = wrapper;
    this.input = wrapper.querySelector('.datepicker-input');
    this.toggle = wrapper.querySelector('.datepicker-toggle');
    this.calendar = wrapper.querySelector('.datepicker-calendar');
    this.body = wrapper.querySelector('#calendar-body');
    this.title = wrapper.querySelector('#calendar-title');
    this.prevBtn = wrapper.querySelector('#prev-month');
    this.nextBtn = wrapper.querySelector('#next-month');
    this.status = wrapper.querySelector('#calendar-status');

    this.isOpen = false;
    this.focusedDate = new Date();
    this.selectedDate = null;
    this.today = new Date();

    this.monthNames = [
      'January','February','March','April','May','June',
      'July','August','September','October','November','December'
    ];

    this.init();
  }

  init() {
    this.toggle.addEventListener('click', () => this.toggleCalendar());
    this.prevBtn.addEventListener('click', () => this.changeMonth(-1));
    this.nextBtn.addEventListener('click', () => this.changeMonth(1));
    this.calendar.addEventListener('keydown', (e) => this.handleKeydown(e));

    // Close on outside click
    document.addEventListener('click', (e) => {
      if (this.isOpen && !this.wrapper.contains(e.target)) {
        this.close();
      }
    });

    // Parse initial input value if present
    this.renderCalendar();
  }

  toggleCalendar() {
    this.isOpen ? this.close() : this.open();
  }

  open() {
    this.isOpen = true;
    this.calendar.classList.add('is-open');
    this.toggle.setAttribute('aria-expanded', 'true');
    this.renderCalendar();
    this.focusDate(this.focusedDate);
  }

  close() {
    this.isOpen = false;
    this.calendar.classList.remove('is-open');
    this.toggle.setAttribute('aria-expanded', 'false');
    this.toggle.focus();
  }

  changeMonth(delta) {
    this.focusedDate.setMonth(this.focusedDate.getMonth() + delta);
    this.renderCalendar();
    this.focusDate(this.focusedDate);
  }

  selectDate(date) {
    this.selectedDate = new Date(date);
    this.focusedDate = new Date(date);
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    this.input.value = `${m}/${d}/${date.getFullYear()}`;
    this.status.textContent =
      `Selected ${this.formatDateLong(date)}`;
    this.renderCalendar();
    this.close();
  }

  formatDateLong(date) {
    return `${this.monthNames[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
  }

  isToday(date) {
    return date.getDate() === this.today.getDate()
      && date.getMonth() === this.today.getMonth()
      && date.getFullYear() === this.today.getFullYear();
  }

  isSameDay(a, b) {
    return a && b
      && a.getDate() === b.getDate()
      && a.getMonth() === b.getMonth()
      && a.getFullYear() === b.getFullYear();
  }

  renderCalendar() {
    const year = this.focusedDate.getFullYear();
    const month = this.focusedDate.getMonth();
    this.title.textContent =
      `${this.monthNames[month]} ${year}`;

    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    let html = '';
    let day = 1;
    for (let week = 0; week < 6; week++) {
      if (day > daysInMonth) break;
      html += '<tr>';
      for (let dow = 0; dow < 7; dow++) {
        if ((week === 0 && dow < firstDay) || day > daysInMonth) {
          html += '<td></td>';
        } else {
          const date = new Date(year, month, day);
          const label = this.formatDateLong(date);
          const isSelected = this.isSameDay(date, this.selectedDate);
          const isTodayDate = this.isToday(date);
          const tabIdx = this.isSameDay(date, this.focusedDate) ? 0 : -1;
          html += `<td><button type="button" role="gridcell"
            class="calendar-day"
            tabindex="${tabIdx}"
            aria-label="${label}"
            ${isSelected ? 'aria-selected="true"' : ''}
            ${isTodayDate ? 'aria-current="date"' : ''}
            data-date="${year}-${month}-${day}"
          >${day}</button></td>`;
          day++;
        }
      }
      html += '</tr>';
    }
    this.body.innerHTML = html;

    // Attach click handlers to day buttons
    this.body.querySelectorAll('.calendar-day').forEach(btn => {
      btn.addEventListener('click', () => {
        const [y, m, d] = btn.dataset.date.split('-').map(Number);
        this.selectDate(new Date(y, m, d));
      });
    });
  }

  focusDate(date) {
    const btn = this.body.querySelector(
      `[data-date="${date.getFullYear()}-${date.getMonth()}-${date.getDate()}"]`
    );
    if (btn) {
      // Reset all tabindex, set focused one to 0
      this.body.querySelectorAll('.calendar-day')
        .forEach(b => b.setAttribute('tabindex', '-1'));
      btn.setAttribute('tabindex', '0');
      btn.focus();
    }
  }

  handleKeydown(e) {
    const key = e.key;
    let handled = true;

    switch (key) {
      case 'ArrowRight':
        this.moveFocus(1); break;
      case 'ArrowLeft':
        this.moveFocus(-1); break;
      case 'ArrowDown':
        this.moveFocus(7); break;
      case 'ArrowUp':
        this.moveFocus(-7); break;
      case 'Home':
        this.moveFocusToStartOfWeek(); break;
      case 'End':
        this.moveFocusToEndOfWeek(); break;
      case 'PageUp':
        e.shiftKey ? this.changeYear(-1) : this.changeMonth(-1);
        break;
      case 'PageDown':
        e.shiftKey ? this.changeYear(1) : this.changeMonth(1);
        break;
      case 'Enter':
      case ' ':
        this.selectDate(new Date(this.focusedDate));
        break;
      case 'Escape':
        this.close(); break;
      default:
        handled = false;
    }

    if (handled) e.preventDefault();
  }

  moveFocus(days) {
    this.focusedDate.setDate(this.focusedDate.getDate() + days);
    this.renderCalendar();
    this.focusDate(this.focusedDate);
  }

  moveFocusToStartOfWeek() {
    const dow = this.focusedDate.getDay();
    this.moveFocus(-dow);
  }

  moveFocusToEndOfWeek() {
    const dow = this.focusedDate.getDay();
    this.moveFocus(6 - dow);
  }

  changeYear(delta) {
    this.focusedDate.setFullYear(
      this.focusedDate.getFullYear() + delta
    );
    this.renderCalendar();
    this.focusDate(this.focusedDate);
  }
}