@iyulab/flex-table 0.40.2 → 0.40.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.40.3] - 2026-09-30
+
+### Fixed
+
+- **Screen readers get the position of a row and a cell in the whole table, not in the rendered part.**
+  The grid renders only the visible rows and columns, so without indices a screen reader announced the
+  first rendered row as row 1 after scrolling. Rows now carry `aria-rowindex` and cells, column headers
+  and footer cells `aria-colindex` (1-based, in display order). `aria-rowcount` now counts the header
+  row and the footer row as the ARIA grid pattern defines it (it counted data rows only, so it is one or
+  two higher than before). The footer row's cells now have the grid cell role — the footer was a row
+  without cells.
+
 ## [0.40.2] - 2026-09-30
 
 ### Fixed

package/README.md

@@ -67,7 +67,7 @@ npm install @iyulab/flex-table
 - **Data Mode** — Client-side or server-side sorting/filtering (`dataMode`)
 - **Context Menu** — `context-menu` event for custom right-click menus
 - **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** — `role="grid"`, `aria-sort`, `aria-selected`, `aria-readonly`, `aria-invalid`, `aria-rowcount`, `aria-colcount`, `aria-rowindex`, `aria-colindex`
 
 ## Sizing
 
@@ -471,6 +471,7 @@ conformance claim for the success criteria it does not list.
 | SC 2.5.8 Target Size (Minimum) | Sortable headers, column menu buttons, the open column menu, the open filter dropdown (text and number), the find/replace bar, the cell context menu and row selection checkboxes are at least 24×24 CSS px or meet the spacing exception (24px between centers, counting the neighbouring resize handles), and are actually hit at that position. Two small targets use the equivalent-control exception: the 6px column resize handle (every resize is also in the column menu) and the hidden-column marker (its column menu offers **Show: …**) | `tests/browser/target-size.browser.test.ts` (real Chromium) |
 | SC 2.1.1 Keyboard (pointer-cursor check) | Nothing the grid renders shows a pointer cursor without being an interactive element. Sorting by header click also has a keyboard path — the column menu's **Sort ascending** / **Sort descending** (the check alone cannot see that, because the header cell wraps the menu button) | `tests/browser/target-size.browser.test.ts` · `src/flex-table.test.ts` |
 | SC 2.5.7 Dragging Movements | Resizing never requires a drag — the column menu's **Auto-fit width**, **Wider** and **Narrower** are single clicks | `tests/browser/column-menu.browser.test.ts` |
+| SC 1.3.1 Info and Relationships (virtualized grid) | Only the visible rows and columns are in the DOM, so every row carries `aria-rowindex` and every cell `aria-colindex` (1-based, in display order), and the grid's `aria-rowcount` / `aria-colcount` give the full size — the header row is row 1, data rows start at 2, and the footer row (if any) is last. A screen reader announces "row 621 of 10001" after scrolling instead of counting the rows that happen to be rendered. The footer row's cells are grid cells | `tests/browser/aria-grid-index.browser.test.ts` |
 
 Not yet measured: the boolean and date filter dropdowns and the comment popup. Color contrast comes
 from the `@iyulab/components` tokens this package reads.

package/dist/{flex-table-CbIsTvod.js → flex-table-DvETrA1w.js}

@@ -2291,7 +2291,7 @@ var q = {
 	}
 	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();
-		let t = String(this._visibleRowCount), n = String(this.visibleColumns.length);
+		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");
 			e && (e.value = this.getComment(this._commentPopup.dataIndex, this._commentPopup.colKey) ?? "", e.focus(), e.select());
@@ -2992,6 +2992,7 @@ var q = {
 		return i`
       <div class=${y}
         role="columnheader"
+        aria-colindex=${t + 1}
         data-col-index=${t}
         style=${_}
         aria-sort=${p ?? a}
@@ -4007,7 +4008,7 @@ var q = {
 			let e = this.data.length === 0 ? this.emptyMessage : this.noMatchingMessage;
 			return i`
         ${n}
-        <div class="ft-header" role="row" style="width: ${o}px; height: ${r}px;">
+        <div class="ft-header" role="row" aria-rowindex="1" style="width: ${o}px; height: ${r}px;">
           ${f}${p}
           ${m}
           ${h}
@@ -4022,7 +4023,7 @@ var q = {
       ${t}
       ${n}
       ${this._renderFindPanel()}
-      <div class="ft-header" role="row" style="width: ${o}px; height: ${r}px;">
+      <div class="ft-header" role="row" aria-rowindex="1" style="width: ${o}px; height: ${r}px;">
         ${f}${p}
         ${m}
         ${h}
@@ -4069,19 +4070,19 @@ var q = {
 		for (let e of n) {
 			let t = r[e], n = this._getColWidth(t), o = t.pinned === "right" ? `position: absolute; top: 0; left: ${this._getPinnedRightLeft(e)}px; width: ${n}px; height: ${a}px; z-index: 2;` : `position: absolute; top: 0; left: ${s + this._getPinnedLeft(e)}px; width: ${n}px; height: ${a}px; z-index: 2;`;
 			d.push(i`
-        <div class="ft-footer-cell ft-pinned" style=${o}>
+        <div class="ft-footer-cell ft-pinned" role="gridcell" aria-colindex=${e + 1} style=${o}>
           ${this.footerData[t.key] ?? ""}</div>
       `);
 		}
 		for (let n = e; n < t; n++) {
 			let e = r[n], t = this._getColWidth(e), o = this._colLeftOffsets[n] ?? 0, c = e.pinned === "left", l = e.pinned === "right", u = c || l, f;
 			f = c ? `position: absolute; top: 0; left: ${s + this._getPinnedLeft(n)}px; width: ${t}px; height: ${a}px; z-index: 2;` : l ? `position: absolute; top: 0; right: ${-s + this._getPinnedRight(n)}px; width: ${t}px; height: ${a}px; z-index: 2;` : `left: ${o}px; width: ${t}px; height: ${a}px;`, d.push(i`
-        <div class="ft-footer-cell ${u ? "ft-pinned" : ""}" style=${f}>
+        <div class="ft-footer-cell ${u ? "ft-pinned" : ""}" role="gridcell" aria-colindex=${n + 1} style=${f}>
           ${this.footerData[e.key] ?? ""}</div>
       `);
 		}
 		return i`
-      <div class="ft-footer" role="row" style="width: ${o}px; height: ${a}px;">
+      <div class="ft-footer" role="row" aria-rowindex=${this._visibleRowCount + 2} style="width: ${o}px; height: ${a}px;">
         ${l}${u}
         ${d}
       </div>
@@ -4107,7 +4108,7 @@ var q = {
 		for (let t of r) y.push(this._renderCell(c, o[t], e, t));
 		for (let r = t; r < n; r++) y.push(this._renderCell(c, o[r], e, r));
 		return i`
-      <div class="ft-row ${f} ${p ? "ft-row-selected" : ""}" role="row"
+      <div class="ft-row ${f} ${p ? "ft-row-selected" : ""}" role="row" aria-rowindex=${e + 2}
         style="top: ${l}px; height: ${u}px; width: ${d}px;">
         ${g}${v}
         ${y}
@@ -4126,6 +4127,7 @@ var q = {
 		}
 		if (s) return i`
         <div class="ft-cell ft-editing ft-active ${d ? "ft-pinned" : ""}" role="gridcell"
+          aria-colindex=${r + 1}
           data-col-index=${r}
           aria-selected="true"
           aria-readonly=${g ? "true" : a}
@@ -4146,6 +4148,7 @@ var q = {
 		return i`
       <div class=${E ? C + " ft-has-comment" : C}
         role="gridcell"
+        aria-colindex=${r + 1}
         data-col-index=${r}
         aria-selected=${_ ? "true" : "false"}
         aria-readonly=${g ? "true" : a}

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-CbIsTvod.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-DvETrA1w.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-CbIsTvod.js";
+import { t as e } from "./flex-table-DvETrA1w.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.40.2",
+  "version": "0.40.3",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",