@forcecalendar/interface 1.2.0 → 1.3.0

package/dist/force-calendar-interface.esm.js

@@ -1012,6 +1012,87 @@ var n = class extends HTMLElement {
 		let t = e.dataset.eventId, n = this.stateManager.getEvents().find((e) => e.id === t);
 		n && this.stateManager.selectEvent(n);
 	}
+	_enhanceTimeGridAccessibility(e, t) {
+		let n = this.container.querySelector(".fc-time-grid");
+		if (!n) return;
+		n.setAttribute("role", "grid"), n.setAttribute("aria-label", t);
+		let r = this.container.querySelector(".fc-time-gutter");
+		r && r.setAttribute("aria-hidden", "true");
+		let i = this.stateManager.getState().config.locale || "en-US", a = new Intl.DateTimeFormat(i, {
+			weekday: "long",
+			month: "long",
+			day: "numeric"
+		}), o = Array.from(this.container.querySelectorAll(e));
+		for (let e of o) {
+			e.setAttribute("role", "row");
+			let t = new Date(e.dataset.date), n = a.format(t);
+			e.setAttribute("aria-label", n);
+			for (let t of e.querySelectorAll(".fc-hour-slot")) t.setAttribute("role", "gridcell"), t.setAttribute("tabindex", "-1"), t.setAttribute("aria-label", `${n}, ${this.formatHour(Number(t.dataset.hour))}`);
+		}
+		if (this._applySlotRovingTabindex(o), this._pendingSlotFocus) {
+			let { colIndex: e, hour: t } = this._pendingSlotFocus;
+			this._pendingSlotFocus = null;
+			let n = this._slotAt(o, e, t);
+			n && (this._applySlotRovingTabindex(o, n), n.focus());
+		}
+		this.addListener(this.container, "keydown", (t) => {
+			let n = t.target.closest(".fc-hour-slot");
+			if (!n || !this.container.contains(n)) return;
+			let r = n.closest(e), i = o.indexOf(r), a = Number(n.dataset.hour), s = null;
+			switch (t.key) {
+				case "ArrowDown":
+					s = this._slotAt(o, i, a + 1);
+					break;
+				case "ArrowUp":
+					s = this._slotAt(o, i, a - 1);
+					break;
+				case "ArrowRight":
+					s = this._slotAt(o, i + 1, a);
+					break;
+				case "ArrowLeft":
+					s = this._slotAt(o, i - 1, a);
+					break;
+				case "Home":
+					s = this._slotAt(o, i, 0);
+					break;
+				case "End":
+					s = this._slotAt(o, i, 23);
+					break;
+				case "PageUp":
+				case "PageDown":
+					t.preventDefault(), this._pendingSlotFocus = {
+						colIndex: i,
+						hour: a
+					}, t.key === "PageDown" ? this.stateManager.next() : this.stateManager.previous();
+					return;
+				case "Enter":
+				case " ": {
+					t.preventDefault();
+					let e = new Date(r.dataset.date);
+					e.setHours(a, 0, 0, 0), this._pendingSlotFocus = {
+						colIndex: i,
+						hour: a
+					}, this.stateManager.selectDate(e);
+					return;
+				}
+				default: return;
+			}
+			t.preventDefault(), s && (this._applySlotRovingTabindex(o, s), s.scrollIntoView?.({ block: "nearest" }), s.focus());
+		});
+	}
+	_slotAt(e, t, n) {
+		return t < 0 || t >= e.length || n < 0 || n > 23 ? null : e[t].querySelector(`.fc-hour-slot[data-hour="${n}"]`);
+	}
+	_applySlotRovingTabindex(e, t = null) {
+		let n = this.container.querySelectorAll(".fc-hour-slot");
+		if (n.length !== 0) {
+			if (!t) {
+				let r = e.find((e) => this.isToday(new Date(e.dataset.date))) || e[0];
+				t = r && r.querySelector(".fc-hour-slot[data-hour=\"9\"]"), t ||= n[0];
+			}
+			for (let e of n) e.setAttribute("tabindex", e === t ? "0" : "-1");
+		}
+	}
 	_enhanceEventAccessibility() {
 		for (let e of this.container.querySelectorAll(".fc-event")) if (e.setAttribute("role", "button"), e.setAttribute("tabindex", "0"), !e.hasAttribute("aria-label")) {
 			let t = (e.getAttribute("title") || e.textContent || "").trim();
@@ -1258,7 +1339,7 @@ var n = class extends HTMLElement {
 		return `
             <div class="fc-week-day-column" data-date="${e.date.toISOString()}" style="border-right: 1px solid var(--fc-border-color); position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${t.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
+                ${t.map((e) => `<div class="fc-hour-slot" data-hour="${e}" style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
 
                 <!-- Now indicator for today -->
                 ${e.isToday ? this.renderNowIndicator() : ""}
@@ -1281,6 +1362,12 @@ var n = class extends HTMLElement {
 			let n = new Date(t.dataset.date), r = this.container.querySelector("#week-scroll-container"), i = t.offsetTop, a = e.clientY - t.getBoundingClientRect().top + (r ? r.scrollTop : 0) - i, o = Math.max(0, Math.min(a + i, this.totalHeight));
 			n.setHours(Math.floor(o / this.hourHeight), Math.floor(o % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(n);
 		}), this.attachCommonEventHandlers();
+		let e = this.stateManager.getViewData()?.days || [], t = this.stateManager.getState().config.locale || "en-US", n = e[0] ? new Date(e[0].date) : /* @__PURE__ */ new Date(), r = `Week of ${new Intl.DateTimeFormat(t, {
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		}).format(n)}`;
+		this._enhanceTimeGridAccessibility(".fc-week-day-column", r);
 	}
 	_scrollToCurrentTime() {
 		if (this._scrolled) return;
@@ -1395,7 +1482,7 @@ var n = class extends HTMLElement {
 		return `
             <div class="fc-day-column" data-date="${n.toISOString()}" style="position: relative; cursor: pointer;">
                 <!-- Hour grid lines -->
-                ${r.map(() => `<div style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
+                ${r.map((e) => `<div class="fc-hour-slot" data-hour="${e}" style="height: ${this.hourHeight}px; border-bottom: 1px solid var(--fc-background-hover);"></div>`).join("")}
 
                 <!-- Now indicator for today -->
                 ${t ? this.renderNowIndicator() : ""}
@@ -1418,6 +1505,13 @@ var n = class extends HTMLElement {
 			let n = new Date(t.dataset.date), r = this.container.querySelector("#day-scroll-container"), i = t.offsetTop, a = e.clientY - t.getBoundingClientRect().top + (r ? r.scrollTop : 0) - i, o = Math.max(0, Math.min(a + i, this.totalHeight));
 			n.setHours(Math.floor(o / this.hourHeight), Math.floor(o % this.hourHeight / (this.hourHeight / 60)), 0, 0), this.stateManager.selectDate(n);
 		}), this.attachCommonEventHandlers();
+		let e = this.stateManager.getState().config.locale || "en-US", t = this.stateManager.getState().currentDate || /* @__PURE__ */ new Date(), n = new Intl.DateTimeFormat(e, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		}).format(t);
+		this._enhanceTimeGridAccessibility(".fc-day-column", n);
 	}
 	_scrollToCurrentTime() {
 		if (this._scrolled) return;
@@ -1989,6 +2083,7 @@ var m = class e extends n {
             }
 
             .fc-month-day:focus-visible,
+            .fc-hour-slot:focus-visible,
             .fc-event:focus-visible {
                 outline: 2px solid var(--fc-primary-color);
                 outline-offset: -2px;