@iyulab/flex-table 0.50.0 → 0.50.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.50.2] - 2026-10-06
+
+### Documentation
+
+- Shift+F10 and the context-menu key on the active cell open the cell menu at that cell (and fire
+  `context-menu`) — documented and covered by a test. It works since 0.50.1, whose roving focus puts the
+  focus on the cell the browser opens the menu for.
+
+## [0.50.1] - 2026-10-06
+
+### Fixed
+
+- **Screen readers hear the active cell.** The table kept the focus on itself and marked the active cell
+  with a class only, so assistive technology announced the grid and nothing as the arrow keys moved
+  (the host cannot point `aria-activedescendant` into its own shadow tree). The focus now sits on the
+  active cell — or the active header cell — while the table has it (roving focus): each move is announced
+  with the cell's row, column and content. `document.activeElement` is still the table.
+- When scrolling moves the focused cell out of the rendered window, the focus waits on the table instead
+  of staying on a recycled cell that now shows another row; the next key brings it back onto the active
+  cell.
+
 ## [0.50.0] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -65,9 +65,9 @@ npm install @iyulab/flex-table
 - **Row Numbers** — Optional `show-row-numbers` attribute with sticky positioning
 - **Footer Row** — Summary/aggregate row via `footer-data` property
 - **Data Mode** — Client-side or server-side sorting/filtering (`dataMode`)
-- **Context Menu** — `context-menu` event for custom right-click menus
+- **Context Menu** — `context-menu` event for custom right-click menus; Shift+F10 or the context-menu key opens it on the active cell
 - **React Wrapper** — `@iyulab/flex-table/react` subpath for idiomatic React usage
-- **ARIA** — `role="grid"`, `aria-sort`, `aria-selected`, `aria-readonly`, `aria-invalid`, `aria-rowcount`, `aria-colcount`, `aria-rowindex`, `aria-colindex`
+- **ARIA** — `role="grid"` with roving focus (the focus sits on the active cell or header cell, so screen readers announce each move), `aria-sort`, `aria-selected`, `aria-readonly`, `aria-invalid`, `aria-rowcount`, `aria-colcount`, `aria-rowindex`, `aria-colindex`
 
 ## Sizing
 
@@ -351,7 +351,7 @@ type-checks without a cast. The React wrapper's `on*` props carry the same types
 | Event | Detail | Description |
 |-------|--------|-------------|
 | `undo-state-change` | `{ canUndo, canRedo }` | Undo/redo availability changed |
-| `context-menu` | `{ x, y, row, col, key, value, rowData }` | Right-click on cell. Cancelable — `preventDefault()` suppresses the built-in menu |
+| `context-menu` | `{ x, y, row, col, key, value, rowData }` | Right-click on a cell, or Shift+F10 / the context-menu key on the active cell. Cancelable — `preventDefault()` suppresses the built-in menu |
 
 ## CSS Custom Properties
 
@@ -458,12 +458,15 @@ package dependency; CSS custom properties are resolved at render time, not impor
 | ArrowLeft / ArrowRight / Home / End (header row) | Move along the header; ArrowDown returns to the first row |
 | Enter / Space (header row) | Sort the column (ascending → descending → none); with Shift, add it to the sort |
 | Alt+ArrowDown or the context-menu key (header row) | Open the column menu |
+| Shift+F10 or the context-menu key (a body cell) | Open the cell menu (`show-context-menu`) at the active cell / fire `context-menu` |
 | Enter / Space on a column menu button | Open the column menu |
 | ArrowUp / ArrowDown / Home / End (column menu) | Move between menu items |
 | Escape (column menu) | Close the menu and return focus to where it was opened from |
 
 The table is one Tab stop: keyboard focus arriving on it activates the first cell (the first header cell
 when there are no rows), and the column menu buttons and row checkboxes are reached by keys, not Tab.
+While the table has the focus, the focus sits on the active cell (or header cell) itself — `document.activeElement`
+is the table, and its `shadowRoot.activeElement` is that cell.
 
 ## Localization
 

package/dist/{flex-table-B64ScsFY.js → flex-table-Hx-xTm0e.js}

@@ -1892,9 +1892,23 @@ var K = {
 	lte: "≤"
 }, q = 120, J = 40, Y = 20, X = 32, Z = 5, Ze = 200, Q = class extends n {
 	constructor(...e) {
-		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = X, this._targetFloor = 0, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._headerCol = null, this._editingCell = null, this._sortCriteria = [], this._selection = new oe(), this._editing = new se(), this._rowSelection = new A(), this._undo = new j(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowIndex = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._wasHeaderDrag = !1, this._wasRowDrag = !1, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._warnedUnconstrained = !1, this._onHostFocus = (e) => {
+		super(...e), this.columns = [], this._data = [], this._inUndoRedo = !1, this.clearUndoOnDataChange = !1, this.clearSelectionOnDataChange = !1, this._rowHeightFromCss = X, this._targetFloor = 0, this.showRowNumbers = !1, this.theme = void 0, this.maxRows = 0, this.editable = !0, this.showFilters = !1, this.showContextMenu = !1, this.frozenRows = 0, this.emptyMessage = "No data", this.noMatchingMessage = "No matching data", this.loading = !1, this.importEnabled = !1, this.selectable = !1, this.dataMode = "client", this.footerData = null, this.stylesheets = [], this._scrollTop = 0, this._scrollLeft = 0, this._viewportHeight = 0, this._viewportWidth = 0, this._colLeftOffsets = [], this._totalRowWidth = 0, this._baseStyleSheets = [], this._activeCell = null, this._headerCol = null, this._focusedCellEl = null, this._editingCell = null, this._sortCriteria = [], this._selection = new oe(), this._editing = new se(), this._rowSelection = new A(), this._undo = new j(), this._filters = [], this._filteredIndices = [], this._sortedIndices = [], this._openFilterKey = null, this._rowSelectionVersion = 0, this._lastCheckboxRowIndex = null, this._checkboxShiftPending = !1, this._autocompleteState = null, this._headerMenu = null, this._bodyContextMenu = null, this._commentPopup = null, this._viewDirty = !0, this._isDragging = !1, this._wasDrag = !1, this._resizing = null, this._resizeCleanup = null, this._wasHeaderDrag = !1, this._wasRowDrag = !1, this._colDrag = null, this._colDragIndicatorLeft = null, this._fillDrag = null, this._rowDrag = null, this._rowDragIndicatorY = null, this._findState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._hostResizeObserver = null, this._comments = /* @__PURE__ */ new Map(), this._isDragOver = !1, this._warnedUnconstrained = !1, this._onHostFocus = (e) => {
 			e.composedPath()[0] !== this || this._activeCell || this._headerCol !== null || this.visibleColumns.length !== 0 && this.matches(":focus-visible") && (this._visibleRowCount > 0 ? (this._selection.setActive(0, 0), this._syncActiveCell()) : this._headerCol = 0);
-		}, this._onCommentPopupOutsideClick = () => {
+		}, this._onFocusIn = (e) => {
+			let t = e.composedPath()[0];
+			t !== this && this._isGridSurface(t) && (this._focusedCellEl = t, this.tabIndex === 0 && (this._hostTabIndexLowered = !0, this.tabIndex = -1));
+		}, this._onFocusOut = (e) => {
+			let t = e.relatedTarget;
+			if (t && (t === this || this.contains(t) || this.shadowRoot?.contains(t))) return;
+			let n = e.composedPath()[0];
+			requestAnimationFrame(() => {
+				if (n instanceof HTMLElement && n === this._focusedCellEl && !n.isConnected) {
+					this._syncGridFocus();
+					return;
+				}
+				document.activeElement !== this && (this._focusedCellEl = null, this._hostTabIndexLowered && (this._hostTabIndexLowered = !1, this.tabIndex = 0));
+			});
+		}, this._hostTabIndexLowered = !1, this._onCommentPopupOutsideClick = () => {
 			this._commitCommentPopup();
 		}, this._invalidCells = /* @__PURE__ */ new Map(), this._textFilterState = /* @__PURE__ */ new Map(), this._numberFilterState = /* @__PURE__ */ new Map(), this._dateFilterState = /* @__PURE__ */ new Map(), this._emptyFilterState = /* @__PURE__ */ new Map();
 	}
@@ -2425,10 +2439,10 @@ var K = {
 		};
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._onScroll = this._onScroll.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDocumentClick = this._onDocumentClick.bind(this), this._onContextMenu = this._onContextMenu.bind(this), this._onDragover = this._onDragover.bind(this), this._onDragleave = this._onDragleave.bind(this), this._onDrop = this._onDrop.bind(this), this.addEventListener("scroll", this._onScroll, { passive: !0 }), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("focus", this._onHostFocus), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("dragover", this._onDragover), this.addEventListener("dragleave", this._onDragleave), this.addEventListener("drop", this._onDrop), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "grid"), typeof ResizeObserver < "u" && (this._hostResizeObserver = new ResizeObserver(() => this._measureViewport()), this._hostResizeObserver.observe(this));
+		super.connectedCallback(), this._onScroll = this._onScroll.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDocumentClick = this._onDocumentClick.bind(this), this._onContextMenu = this._onContextMenu.bind(this), this._onDragover = this._onDragover.bind(this), this._onDragleave = this._onDragleave.bind(this), this._onDrop = this._onDrop.bind(this), this.addEventListener("scroll", this._onScroll, { passive: !0 }), this.addEventListener("keydown", this._onKeyDown), this.addEventListener("focus", this._onHostFocus), this.renderRoot.addEventListener("focusin", this._onFocusIn), this.renderRoot.addEventListener("focusout", this._onFocusOut), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("dragover", this._onDragover), this.addEventListener("dragleave", this._onDragleave), this.addEventListener("drop", this._onDrop), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "grid"), typeof ResizeObserver < "u" && (this._hostResizeObserver = new ResizeObserver(() => this._measureViewport()), this._hostResizeObserver.observe(this));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("scroll", this._onScroll), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("focus", this._onHostFocus), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("dragover", this._onDragover), this.removeEventListener("dragleave", this._onDragleave), this.removeEventListener("drop", this._onDrop), document.removeEventListener("click", this._onDocumentClick), document.removeEventListener("mousedown", this._onCommentPopupOutsideClick), this._isDragging = !1, this._wasDrag = !1, this._resizeCleanup &&= (this._resizeCleanup(), null), this._hostResizeObserver &&= (this._hostResizeObserver.disconnect(), null);
+		super.disconnectedCallback(), this.removeEventListener("scroll", this._onScroll), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("focus", this._onHostFocus), this.renderRoot.removeEventListener("focusin", this._onFocusIn), this.renderRoot.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("dragover", this._onDragover), this.removeEventListener("dragleave", this._onDragleave), this.removeEventListener("drop", this._onDrop), document.removeEventListener("click", this._onDocumentClick), document.removeEventListener("mousedown", this._onCommentPopupOutsideClick), this._isDragging = !1, this._wasDrag = !1, this._resizeCleanup &&= (this._resizeCleanup(), null), this._hostResizeObserver &&= (this._hostResizeObserver.disconnect(), null);
 	}
 	firstUpdated() {
 		this._readDensityTokens(), this._measureViewport(), this.shadowRoot && Array.isArray(this.shadowRoot.adoptedStyleSheets) && (this._baseStyleSheets = [...this.shadowRoot.adoptedStyleSheets]), this._syncStylesheets();
@@ -2479,7 +2493,7 @@ var K = {
 		(!(e.size <= 2 && !e.has("data") && !e.has("columns") && !e.has("_openFilterKey") && !e.has("_editingCell") && !e.has("_activeCell") && (e.has("_scrollTop") || e.has("_scrollLeft"))) || this._viewDirty) && (this._recomputeView(), this._viewDirty = !1), this._updateColOffsets(), this._selection.setDimensions(this._visibleRowCount, this.visibleColumns.length), this._rowSelection.setRowCount(this._visibleRowCount);
 	}
 	updated(e) {
-		this._focusEditor(), this._adjustFilterDropdown(), e.has("_headerMenu") && this._keepMenuInView(".ft-header-menu"), e.has("_bodyContextMenu") && this._bodyContextMenu && (this._keepMenuInView(".ft-body-context-menu"), this.shadowRoot?.querySelector(".ft-body-context-menu [role=\"menuitem\"]")?.focus()), e.has("stylesheets") && this._syncStylesheets();
+		this._focusEditor(), this._syncGridFocus(), this._adjustFilterDropdown(), e.has("_headerMenu") && this._keepMenuInView(".ft-header-menu"), e.has("_bodyContextMenu") && this._bodyContextMenu && (this._keepMenuInView(".ft-body-context-menu"), this.shadowRoot?.querySelector(".ft-body-context-menu [role=\"menuitem\"]")?.focus()), e.has("stylesheets") && this._syncStylesheets();
 		let t = String(1 + this._visibleRowCount + +!!this.footerData), n = String(this.visibleColumns.length);
 		if (this.getAttribute("aria-rowcount") !== t && this.setAttribute("aria-rowcount", t), this.getAttribute("aria-colcount") !== n && this.setAttribute("aria-colcount", n), this.loading ? this.getAttribute("aria-busy") !== "true" && this.setAttribute("aria-busy", "true") : this.hasAttribute("aria-busy") && this.removeAttribute("aria-busy"), e.has("_commentPopup") && this._commentPopup) {
 			let e = this.shadowRoot?.querySelector(".ft-comment-popup textarea");
@@ -2802,7 +2816,7 @@ var K = {
 				"y"
 			].includes(t) && this._handleCtrlKey(e)) return;
 		}
-		if (t.length !== 0 && (e.composedPath()[0] === this || e.ctrlKey || e.metaKey)) {
+		if (t.length !== 0 && (this._isGridSurface(e.composedPath()[0]) || e.ctrlKey || e.metaKey)) {
 			if (this._headerCol !== null) {
 				this._onHeaderKeyDown(e, t);
 				return;
@@ -2893,6 +2907,28 @@ var K = {
 	_enterHeader(e) {
 		this._selection.clear(), this._syncActiveCell(), this._headerCol = e, this._scrollColumnIntoView(e);
 	}
+	_isGridSurface(e) {
+		return e === this || e instanceof HTMLElement && (e.classList.contains("ft-cell") || e.classList.contains("ft-header-cell")) && !e.classList.contains("ft-editing");
+	}
+	_keyboardCellEl() {
+		let e = this.shadowRoot;
+		if (!e) return null;
+		if (this._headerCol !== null) return e.querySelector(`.ft-header-cell[data-col-index="${this._headerCol}"]`);
+		let t = this._activeCell;
+		return t ? e.querySelector(`.ft-row[aria-rowindex="${t.row + 2}"] .ft-cell[data-col-index="${t.col}"]`) : null;
+	}
+	_syncGridFocus() {
+		let e = this.shadowRoot;
+		if (!e) return;
+		let t = e.activeElement;
+		if (document.activeElement !== this) {
+			this._focusedCellEl && !this._focusedCellEl.isConnected && (document.activeElement === document.body || document.activeElement === null) && (this._focusedCellEl = null, (this._keyboardCellEl() ?? this).focus({ preventScroll: !0 }));
+			return;
+		}
+		if (t && !this._isGridSurface(t)) return;
+		let n = this._keyboardCellEl() ?? this;
+		n !== (t ?? this) && n.focus({ preventScroll: !0 });
+	}
 	_handleCtrlKey(e) {
 		if (!(e.ctrlKey || e.metaKey) || e.altKey) return !1;
 		switch (e.key.toLowerCase()) {
@@ -3240,6 +3276,7 @@ var K = {
 		return i`
       <div class=${y}
         role="columnheader"
+        tabindex="-1"
         aria-colindex=${t + 1}
         data-col-index=${t}
         style=${_}
@@ -4433,6 +4470,7 @@ var K = {
 		return i`
       <div class=${E ? C + " ft-has-comment" : C}
         role="gridcell"
+        tabindex="-1"
         aria-colindex=${r + 1}
         data-col-index=${r}
         aria-selected=${v ? "true" : "false"}

package/dist/flex-table.d.ts

@@ -113,6 +113,8 @@ export declare class FlexTable extends LitElement {
      * it). Exclusive with an active body cell: entering one leaves the other.
      */
     private _headerCol;
+    /** The cell (body or header) that last held the keyboard focus — to take it back if a re-render drops it. */
+    private _focusedCellEl;
     private _editingCell;
     private _sortCriteria;
     private _selection;
@@ -413,6 +415,26 @@ export declare class FlexTable extends LitElement {
      * pointer focus places the cell it pressed instead.
      */
     private _onHostFocus;
+    /**
+     * The grid's own keyboard surface: the host, the active body cell, the active header cell. Keys on
+     * anything else inside it (an editor, a menu, a button a cell renders) belong to that control.
+     */
+    private _isGridSurface;
+    /**
+     * The element the keyboard is on — the active header cell, else the active body cell — when it is
+     * rendered (the body scrolls it out of the virtual window), else `null`.
+     */
+    private _keyboardCellEl;
+    /**
+     * Roving focus: while the grid holds the focus, the focus sits on the cell the keyboard is on, so
+     * assistive technology announces each move (the host cannot point `aria-activedescendant` into its
+     * own shadow tree). It moves only between the host and the grid's cells — never out of an editor,
+     * a menu or a control that holds it.
+     */
+    private _syncGridFocus;
+    private _onFocusIn;
+    private _onFocusOut;
+    private _hostTabIndexLowered;
     private _handleCtrlKey;
     private _handleAltKey;
     /** Widen (positive) or narrow (negative) a visible column by `delta` px, never below its minimum. */

package/dist/flex-table.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-B64ScsFY.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-Hx-xTm0e.js";
 export { o as FlexTable, e as RowSelectionState, t as UndoStack, n as effectiveAlign, i as exportData, r as flexTableLocale, a as renderCell };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-B64ScsFY.js";
+import { t as e } from "./flex-table-Hx-xTm0e.js";
 import { i as t, t as n } from "./query-Dw4iO0ir.js";
 import { t as r } from "./view-DiLr-TdY.js";
 import i, { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/flex-table",
-  "version": "0.50.0",
+  "version": "0.50.2",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

package/skills/iyulab-flex-table/references/styling.md

@@ -72,6 +72,7 @@ flex-table {
 | ArrowUp on the first row | Move onto the header row (arrows / Home / End along it, ArrowDown back) |
 | Enter / Space on a header cell | Sort (Shift adds to the sort) |
 | Alt+ArrowDown or context-menu key on a header cell | Open the column menu |
+| Shift+F10 or context-menu key on a body cell | Open the cell menu at the active cell (fires `context-menu`) |
 | Home / End, Ctrl+Home / Ctrl+End | Row start/end, table start/end |
 | Shift+Arrow, Shift+Click | Extend range selection |
 | Shift+Space | Select / deselect the active cell's row (`selectable`; row checkboxes are not Tab stops) |
@@ -87,7 +88,8 @@ flex-table {
 | Alt+ArrowLeft / Alt+ArrowRight | Resize current column |
 | Enter / Space on a column menu button | Open the column menu (arrows, Home/End navigate; Escape closes) |
 
-The table is one Tab stop — keyboard focus arriving on it activates the first cell; the column menu
+The table is one Tab stop with roving focus — the focus sits on the active cell or header cell (screen
+readers announce each move); keyboard focus arriving on it activates the first cell; the column menu
 buttons are not Tab stops (the header row reaches them).
 
 Ctrl also matches Cmd on macOS. Editing shortcuts are ignored when `editable` is `false`.