@forcecalendar/interface 1.0.60 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.60",
+  "version": "1.1.0",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",
@@ -60,6 +60,6 @@
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "prettier": "^3.8.1",
-    "vite": "^5.0.0"
+    "vite": "^8.1.4"
   }
 }

package/src/components/ForceCalendar.js

@@ -37,6 +37,38 @@ export class ForceCalendar extends BaseComponent {
     this._busUnsubscribers = [];
   }
 
+  /**
+   * Route observed-attribute changes into the StateManager.
+   * Without this, attribute updates after mount (view, locale, timezone,
+   * week-starts-on, date) only re-rendered from stale state and had no
+   * visible effect. 'height' is presentational and picked up by render().
+   */
+  propChanged(name, oldValue, newValue) {
+    if (!this.stateManager || oldValue === newValue) return;
+
+    switch (name) {
+      case 'view':
+        if (newValue) this.stateManager.setView(newValue);
+        break;
+      case 'date': {
+        const date = newValue ? new Date(newValue) : null;
+        if (date && !isNaN(date.getTime())) this.stateManager.setDate(date);
+        break;
+      }
+      case 'locale':
+        if (newValue) this.stateManager.updateConfig({ locale: newValue });
+        break;
+      case 'timezone':
+        if (newValue) this.stateManager.updateConfig({ timeZone: newValue });
+        break;
+      case 'week-starts-on': {
+        const day = parseInt(newValue, 10);
+        if (!Number.isNaN(day)) this.stateManager.updateConfig({ weekStartsOn: day });
+        break;
+      }
+    }
+  }
+
   initialize() {
     // Initialize state manager with config from attributes
     const config = {
@@ -364,6 +396,20 @@ export class ForceCalendar extends BaseComponent {
                 padding: 0;
             }
 
+            .fc-month-day:focus-visible,
+            .fc-event:focus-visible {
+                outline: 2px solid var(--fc-primary-color);
+                outline-offset: -2px;
+            }
+
+            .fc-nav-arrow:focus-visible,
+            .fc-btn:focus-visible,
+            .fc-btn-today:focus-visible,
+            .fc-view-button:focus-visible {
+                outline: 2px solid var(--fc-primary-color);
+                outline-offset: 2px;
+            }
+
             .fc-nav-arrow:hover {
                 background: var(--fc-background-hover);
                 color: var(--fc-text-color);
@@ -673,11 +719,11 @@ export class ForceCalendar extends BaseComponent {
                     </div>
 
                     <div class="fc-header-center">
-                        <button class="fc-nav-arrow" data-action="previous" title="Previous">
+                        <button class="fc-nav-arrow" data-action="previous" title="Previous" aria-label="Previous ${view}">
                             ${this.getIcon('chevron-left')}
                         </button>
-                        <h2 class="fc-title">${DOMUtils.escapeHTML(title)}</h2>
-                        <button class="fc-nav-arrow" data-action="next" title="Next">
+                        <h2 class="fc-title" aria-live="polite">${DOMUtils.escapeHTML(title)}</h2>
+                        <button class="fc-nav-arrow" data-action="next" title="Next" aria-label="Next ${view}">
                             ${this.getIcon('chevron-right')}
                         </button>
                     </div>
@@ -686,12 +732,15 @@ export class ForceCalendar extends BaseComponent {
                         <button class="fc-btn fc-btn-primary" id="create-event-btn" style="height: 28px; padding: 0 12px; font-size: 12px;">
                             + New Event
                         </button>
-                        <div class="fc-view-buttons" role="group">
+                        <div class="fc-view-buttons" role="group" aria-label="Calendar view">
                             <button class="fc-view-button ${view === 'month' ? 'active' : ''}"
+                                    aria-pressed="${view === 'month' ? 'true' : 'false'}"
                                     data-view="month">Month</button>
                             <button class="fc-view-button ${view === 'week' ? 'active' : ''}"
+                                    aria-pressed="${view === 'week' ? 'true' : 'false'}"
                                     data-view="week">Week</button>
                             <button class="fc-view-button ${view === 'day' ? 'active' : ''}"
+                                    aria-pressed="${view === 'day' ? 'true' : 'false'}"
                                     data-view="day">Day</button>
                         </div>
                     </div>

package/src/core/BaseComponent.js

@@ -183,8 +183,13 @@ export class BaseComponent extends HTMLElement {
    */
   _restoreScrollPositions(positions) {
     if (!this._contentWrapper || positions.size === 0) return;
+    // CSS.escape may be absent in sandboxed or test environments
+    const escapeId =
+      typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+        ? CSS.escape
+        : id => String(id).replace(/["\\]/g, '\\$&');
     positions.forEach((pos, id) => {
-      const el = this._contentWrapper.querySelector(`[id="${CSS.escape(id)}"]`);
+      const el = this._contentWrapper.querySelector(`[id="${escapeId(id)}"]`);
       if (el) {
         el.scrollTop = pos.top;
         el.scrollLeft = pos.left;

package/src/renderers/BaseViewRenderer.js

@@ -304,12 +304,46 @@ export class BaseViewRenderer {
       if (!eventEl || !this.container.contains(eventEl)) return;
 
       e.stopPropagation();
-      const eventId = eventEl.dataset.eventId;
-      const event = this.stateManager.getEvents().find(ev => ev.id === eventId);
-      if (event) {
-        this.stateManager.selectEvent(event);
-      }
+      this._selectEventFromElement(eventEl);
     });
+
+    // Keyboard activation for events (Enter / Space)
+    this.addListener(this.container, 'keydown', e => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      const eventEl = e.target.closest('.fc-event');
+      if (!eventEl || !this.container.contains(eventEl)) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      this._selectEventFromElement(eventEl);
+    });
+
+    this._enhanceEventAccessibility();
+  }
+
+  _selectEventFromElement(eventEl) {
+    const eventId = eventEl.dataset.eventId;
+    const event = this.stateManager.getEvents().find(ev => ev.id === eventId);
+    if (event) {
+      this.stateManager.selectEvent(event);
+    }
+  }
+
+  /**
+   * Make rendered events keyboard-reachable and screen-reader labeled.
+   * Runs after every render, across all views.
+   */
+  _enhanceEventAccessibility() {
+    for (const el of this.container.querySelectorAll('.fc-event')) {
+      el.setAttribute('role', 'button');
+      el.setAttribute('tabindex', '0');
+      if (!el.hasAttribute('aria-label')) {
+        const label = (el.getAttribute('title') || el.textContent || '').trim();
+        if (label) {
+          el.setAttribute('aria-label', `Event: ${label}`);
+        }
+      }
+    }
   }
 }
 

package/src/renderers/MonthViewRenderer.js

@@ -28,16 +28,37 @@ export class MonthViewRenderer extends BaseViewRenderer {
     const html = this._renderMonthView(viewData, config);
     this.container.innerHTML = html;
     this._attachEventHandlers();
+
+    // Roving tabindex: exactly one cell is tabbable; restore focus after
+    // a keyboard-initiated re-render (month navigation, selection)
+    const active = this._applyRovingTabindex(this._pendingFocusMs ?? null);
+    if (this._pendingFocusMs != null) {
+      this._pendingFocusMs = null;
+      if (active) {
+        active.focus();
+      }
+    }
   }
 
   _renderMonthView(viewData, config) {
     const weekStartsOn = config.weekStartsOn || 0;
     const dayNames = this._getDayNames(weekStartsOn);
+    const locale = config.locale || 'en-US';
+    this._dayLabelFormatter = new Intl.DateTimeFormat(locale, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+    const currentDate = this.stateManager.getState().currentDate;
+    const gridLabel = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(
+      currentDate || new Date()
+    );
 
     let html = `
-            <div class="fc-month-view" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: var(--fc-background); border: 1px solid var(--fc-border-color);">
-                <div class="fc-month-header" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt);">
-                    ${dayNames.map(d => `<div class="fc-month-header-cell" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fc-text-light); text-transform: uppercase;">${this.escapeHTML(d)}</div>`).join('')}
+            <div class="fc-month-view" role="grid" aria-label="${this.escapeHTML(gridLabel)}" style="display: flex; flex-direction: column; height: 100%; min-height: 400px; background: var(--fc-background); border: 1px solid var(--fc-border-color);">
+                <div class="fc-month-header" role="row" style="display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--fc-border-color); background: var(--fc-background-alt);">
+                    ${dayNames.map(d => `<div class="fc-month-header-cell" role="columnheader" style="padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fc-text-light); text-transform: uppercase;">${this.escapeHTML(d)}</div>`).join('')}
                 </div>
                 <div class="fc-month-body" style="display: flex; flex-direction: column; flex: 1;">
         `;
@@ -62,7 +83,7 @@ export class MonthViewRenderer extends BaseViewRenderer {
 
   _renderWeek(week) {
     let html =
-      '<div class="fc-month-week" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
+      '<div class="fc-month-week" role="row" style="display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 80px;">';
 
     week.days.forEach(day => {
       html += this._renderDay(day);
@@ -86,8 +107,20 @@ export class MonthViewRenderer extends BaseViewRenderer {
     const visibleEvents = events.slice(0, this.maxEventsToShow);
     const moreCount = events.length - this.maxEventsToShow;
 
+    let cellLabel = this._dayLabelFormatter
+      ? this._dayLabelFormatter.format(new Date(day.date))
+      : day.date;
+    if (events.length > 0) {
+      cellLabel += `, ${events.length} ${events.length === 1 ? 'event' : 'events'}`;
+    }
+
     return `
             <div class="fc-month-day" data-date="${this.escapeHTML(day.date)}"
+                 role="gridcell" tabindex="-1"
+                 aria-selected="${day.isSelected ? 'true' : 'false'}"
+                 ${isToday ? 'aria-current="date"' : ''}
+                 ${isOtherMonth ? 'data-other-month="true"' : ''}
+                 aria-label="${this.escapeHTML(cellLabel)}"
                  style="background: ${dayBg}; border-right: 1px solid var(--fc-border-color); border-bottom: 1px solid var(--fc-border-color); padding: 4px; min-height: 80px; cursor: pointer; display: flex; flex-direction: column;">
                 <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${dayNumColor}; padding: 2px 4px; margin-bottom: 4px; ${todayStyle}">
                     ${this.escapeHTML(String(day.dayOfMonth))}
@@ -121,9 +154,112 @@ export class MonthViewRenderer extends BaseViewRenderer {
       this.stateManager.selectDate(date);
     });
 
+    // WAI-ARIA grid keyboard navigation
+    this.addListener(this.container, 'keydown', e => {
+      if (e.target.closest('.fc-event')) return; // events handle their own keys
+      const cell = e.target.closest('.fc-month-day');
+      if (!cell || !this.container.contains(cell)) return;
+
+      const cells = Array.from(this.container.querySelectorAll('.fc-month-day'));
+      const idx = cells.indexOf(cell);
+      let targetIdx;
+
+      switch (e.key) {
+        case 'ArrowRight':
+          targetIdx = idx + 1;
+          break;
+        case 'ArrowLeft':
+          targetIdx = idx - 1;
+          break;
+        case 'ArrowDown':
+          targetIdx = idx + 7;
+          break;
+        case 'ArrowUp':
+          targetIdx = idx - 7;
+          break;
+        case 'Home':
+          targetIdx = idx - (idx % 7);
+          break;
+        case 'End':
+          targetIdx = idx - (idx % 7) + 6;
+          break;
+        case 'PageUp':
+        case 'PageDown': {
+          e.preventDefault();
+          const d = new Date(cell.dataset.date);
+          d.setMonth(d.getMonth() + (e.key === 'PageDown' ? 1 : -1));
+          this._pendingFocusMs = d.getTime();
+          if (e.key === 'PageDown') {
+            this.stateManager.next();
+          } else {
+            this.stateManager.previous();
+          }
+          return;
+        }
+        case 'Enter':
+        case ' ': {
+          e.preventDefault();
+          const date = new Date(cell.dataset.date);
+          this._pendingFocusMs = date.getTime();
+          this.stateManager.selectDate(date);
+          return;
+        }
+        default:
+          return;
+      }
+
+      e.preventDefault();
+      if (targetIdx >= 0 && targetIdx < cells.length) {
+        this._applyRovingTabindex(new Date(cells[targetIdx].dataset.date).getTime());
+        cells[targetIdx].focus();
+      } else {
+        // Focus target falls outside the rendered grid: navigate and
+        // restore focus on the equivalent date after re-render
+        const d = new Date(cell.dataset.date);
+        d.setDate(d.getDate() + (targetIdx - idx));
+        this._pendingFocusMs = d.getTime();
+        if (targetIdx < 0) {
+          this.stateManager.previous();
+        } else {
+          this.stateManager.next();
+        }
+      }
+    });
+
     // Common event handlers (event clicks)
     this.attachCommonEventHandlers();
   }
+
+  /**
+   * Ensure exactly one grid cell participates in the tab order.
+   * Priority: requested focus date, selected date, today, first day of
+   * the current month.
+   * @param {number|null} focusMs - Preferred focus date as a timestamp
+   * @returns {HTMLElement|null} The tabbable cell
+   */
+  _applyRovingTabindex(focusMs = null) {
+    const cells = Array.from(this.container.querySelectorAll('.fc-month-day'));
+    if (cells.length === 0) return null;
+
+    let active = null;
+    if (focusMs != null) {
+      active = cells.find(c => new Date(c.dataset.date).getTime() === focusMs);
+    }
+    if (!active) {
+      active = cells.find(c => c.getAttribute('aria-selected') === 'true');
+    }
+    if (!active) {
+      active = cells.find(c => c.hasAttribute('aria-current'));
+    }
+    if (!active) {
+      active = cells.find(c => !c.dataset.otherMonth) || cells[0];
+    }
+
+    for (const c of cells) {
+      c.setAttribute('tabindex', c === active ? '0' : '-1');
+    }
+    return active;
+  }
 }
 
 export default MonthViewRenderer;