4.4.15 => 4.4.x

README.md

@@ -5,7 +5,7 @@ A FullCalendar component for Angular.
 
 ## Supported Angular Versions
 
-`@talentia/fullcalendar` version `4.4.14` supports Angular 18.
+`@talentia/fullcalendar` version `4.4.15` supports Angular 18.
 
 # FullCalendar Angular Component [![Build Status](https://travis-ci.com/fullcalendar/fullcalendar-angular.svg?branch=master)](https://travis-ci.com/fullcalendar/fullcalendar-angular)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fullcalendar",
-  "version": "4.4.14",
+  "version": "4.4.15",
   "scripts": {
     "ng": "ng",
     "build": "npm-run-all -s clean:build build:prod",

projects/fullcalendar/README.md

@@ -5,7 +5,7 @@ A FullCalendar component for Angular.
 
 ## Supported Angular Versions
 
-`@talentia/fullcalendar` version `4.4.14` supports Angular 18.
+`@talentia/fullcalendar` version `4.4.15` supports Angular 18.
 
 # FullCalendar Angular Component [![Build Status](https://travis-ci.com/fullcalendar/fullcalendar-angular.svg?branch=master)](https://travis-ci.com/fullcalendar/fullcalendar-angular)
 

projects/fullcalendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talentia/fullcalendar",
-  "version": "4.4.14",
+  "version": "4.4.15",
   "title": "FullCalendar Angular Component",
   "description": "A FullCalendar component for Angular",
   "license": "MIT",

projects/fullcalendar/src/lib/fullcalendar-options.ts

@@ -115,7 +115,7 @@ export const INPUT_NAMES = [
   'forceEventDuration',
   'progressiveEventRendering',
   'selectLongPressDelay',
-  'selectMinDistance',
+  // 'selectMinDistance',
   'timeZoneParam',
   'titleRangeSeparator',
   // compound OptionsInput...

projects/fullcalendar/src/lib/fullcalendar.component.ts

@@ -36,10 +36,62 @@ export class FullCalendarComponent implements AfterViewInit, DoCheck, OnChanges,
   private calendar: Calendar;
   private dirtyProps: any = {};
   private deepCopies: any = {};
+  private a11yObserver?: MutationObserver;
+  private a11yPatchScheduled = false;
+  private initialRenderInProgress = true;
 
   ngAfterViewInit() {
     this.calendar = new Calendar(this.element.nativeElement, this.buildOptions());
     this.calendar.render();
+    this.initialRenderInProgress = false;
+    this.patchAccessibility();
+
+    // Primary trigger: datesRender/viewSkeletonRender (wired in buildOptions) fire whenever
+    // FullCalendar (re)builds the header/body table skeleton, which is cheaper and more
+    // targeted than scanning on every DOM mutation.
+    //
+    // Fallback: a MutationObserver, in case some table rebuild path doesn't go through those
+    // hooks. Its callback only re-patches when an added node actually looks like calendar
+    // table markup, instead of unconditionally rescanning the whole tree on any mutation.
+    // Attribute writes done by patchAccessibility don't trigger childList mutations, so this
+    // cannot loop on itself.
+    this.a11yObserver = new MutationObserver((mutations) => {
+      const hasTableMarkup = mutations.some((mutation) =>
+        Array.from(mutation.addedNodes).some((node) =>
+          node instanceof Element && (node.matches('table, th') || !!node.querySelector('table, th'))
+        )
+      );
+      if (hasTableMarkup) this.scheduleAccessibilityPatch();
+    });
+    this.a11yObserver.observe(this.element.nativeElement, { childList: true, subtree: true });
+  }
+
+  private scheduleAccessibilityPatch() {
+    if (this.a11yPatchScheduled) return;
+    this.a11yPatchScheduled = true;
+    queueMicrotask(() => {
+      this.a11yPatchScheduled = false;
+      this.patchAccessibility();
+    });
+  }
+
+  /*
+  Fix: FullCalendar (v4 through at least v6) never declares its day-grid/timeline
+  <table> markup as data tables with associated headers, nor marks the purely positional ones as
+  presentational. Two independent tables are involved: the header row (<th>, e.g.
+  fc-day-header in dayGrid, unclassed in resource-timeline) and the per-week/day/resource body
+  grids (<table> with <td> cells only, no <th> at all). Neither carries scope/role, so this patches
+  both after every render. All observed <th> are column headers (no scope="row" case found across
+  dayGrid/timeGrid/resource-timeline views), hence the unqualified selector below.
+  */
+  private patchAccessibility() {
+    const root: HTMLElement = this.element.nativeElement;
+    root.querySelectorAll('th:not([scope])').forEach((th) => th.setAttribute('scope', 'col'));
+    root.querySelectorAll('table:not([role])').forEach((table) => {
+      if (!table.querySelector('th')) {
+        table.setAttribute('role', 'presentation');
+      }
+    });
   }
 
   private buildOptions() {
@@ -51,6 +103,20 @@ export class FullCalendarComponent implements AfterViewInit, DoCheck, OnChanges,
       };
     });
 
+    // datesRender/viewSkeletonRender fire whenever FullCalendar (re)builds the header/body
+    // table skeleton, so they're the cheapest, most targeted trigger for the a11y patch —
+    // wrap rather than replace so consumers still receive the event. Skipped during the
+    // initial render() call since ngAfterViewInit already patches synchronously right after it.
+    ['datesRender', 'viewSkeletonRender'].forEach(outputName => {
+      const emit = options[outputName];
+      options[outputName] = (...args) => {
+        if (!this.initialRenderInProgress) {
+          this.scheduleAccessibilityPatch();
+        }
+        emit(...args);
+      };
+    });
+
     // do after outputs, so that inputs with same name override
     INPUT_NAMES.forEach(inputName => {
       let inputVal = this[inputName];
@@ -121,6 +187,8 @@ export class FullCalendarComponent implements AfterViewInit, DoCheck, OnChanges,
   }
 
   ngOnDestroy() {
+    this.a11yObserver?.disconnect();
+    this.a11yObserver = undefined;
     if (this.calendar) {
       this.calendar.destroy();
     }

tsconfig.json

@@ -8,6 +8,7 @@
         "./dist/fullcalendar"
       ]
     },
+    "rootDir": "./projects/fullcalendar/src",
     "outDir": "./dist/out-tsc",
     "strict": true,
     "noImplicitOverride": true,