@iyulab/flex-table 0.49.0 → 0.49.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.49.1] - 2026-10-06
+
+### Fixed
+
+- **The column filter is a dialog with a keyboard contract.** It is announced as a dialog named for its
+  column ("Filter Customer"); Tab and Shift+Tab stay inside it (it floats over the table, so focus that
+  left it would leave it open behind the next control); Escape closes it and returns focus to that
+  column's menu button — before, focus dropped to the page. A click outside still closes it without
+  moving focus.
+
 ## [0.49.0] - 2026-10-06
 
 ### Added

package/README.md

@@ -519,6 +519,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.4.3 Focus Order · SC 2.1.2 No Keyboard Trap | The column filter is a dialog named for its column: opening it from the column menu moves focus into it, Tab and Shift+Tab cycle inside it, and Escape closes it and returns focus to that column's menu button (Escape is the way out) | `tests/browser/column-menu.browser.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` |
 

package/dist/{flex-table-BsxF9Q3O.js → flex-table-CpAhHipx.js}

@@ -3186,6 +3186,7 @@ var K = {
         ${o >= 0 ? i`<span class="ft-sort-order">${o + 1}</span>` : ""}
         <button class="ft-column-menu-btn ${s ? "ft-filter-active" : ""}"
           type="button"
+          data-key=${e.key}
           title=${k("columnMenu")}
           aria-label=${k("columnMenuFor", { header: e.label })}
           aria-haspopup="menu"
@@ -3424,11 +3425,28 @@ var K = {
 		let s = Math.max(4, Math.min(n.left, i - r.width - 4));
 		e.style.left = `${s}px`, e.style.top = `${o}px`;
 	}
+	_closeFilterDropdown(e = !0) {
+		let t = this._openFilterKey;
+		this._openFilterKey = null, e && t !== null && this.updateComplete.then(() => {
+			[...this.shadowRoot?.querySelectorAll(".ft-column-menu-btn") ?? []].find((e) => e.dataset.key === t)?.focus();
+		});
+	}
+	_onFilterDialogKeydown(e) {
+		if (e.key !== "Tab") return;
+		let t = [...e.currentTarget.querySelectorAll("input, select, textarea, button, u-date-picker")].filter((e) => !e.disabled && e.getClientRects().length > 0);
+		if (t.length === 0) return;
+		let n = e.composedPath(), r = t.findIndex((e) => n.includes(e)), i = t.length - 1;
+		e.shiftKey && r <= 0 ? (e.preventDefault(), t[i].focus()) : !e.shiftKey && (r === i || r === -1) && (e.preventDefault(), t[0].focus());
+	}
 	_renderFilterDropdown(e) {
 		let t = e.type ?? "text";
 		return i`
-      <div class="ft-filter-dropdown" role="group" aria-label=${k("filterFor", { header: e.label })}
-        @click=${(e) => e.stopPropagation()}>
+      <div class="ft-filter-dropdown" role="dialog" aria-label=${k("filterFor", { header: e.label })}
+        @click=${(e) => e.stopPropagation()}
+        @keydown=${{
+			handleEvent: (e) => this._onFilterDialogKeydown(e),
+			capture: !0
+		}}>
         ${t === "boolean" ? this._renderBooleanFilter(e) : t === "number" ? this._renderNumberFilter(e) : t === "date" || t === "datetime" ? this._renderDateFilter(e) : this._renderTextFilter(e)}
         <div class="ft-filter-actions">
           <button class="ft-filter-clear" @click=${() => this._clearColumnFilter(e.key)}>${k("clear")}</button>
@@ -3472,7 +3490,7 @@ var K = {
 			(r === "" || r === "empty" || r === "non-empty") && (r ? this._emptyFilterState.set(e, r) : this._emptyFilterState.delete(e), t?.(), this._applyFilterForKey(e));
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           <option value="">${k("blankAll")}</option>
           <option value="empty">${k("emptyOnly")}</option>
@@ -3550,7 +3568,7 @@ var K = {
 			}), this._applyTextFilter(e.key);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           <option value="contains">${k("contains")}</option>
           <option value="starts">${k("startsWith")}</option>
@@ -3571,7 +3589,7 @@ var K = {
 			}), this._emptyFilterState.delete(e.key), this._applyTextFilter(e.key);
 		}}
         @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
       ${this._renderEmptyFilterRow(e.key, () => {
 			this._textFilterState.delete(e.key);
@@ -3605,7 +3623,7 @@ var K = {
 			}, this._numberFilterState.set(e, i), this._emptyFilterState.delete(e), this._applyFilterForKey(e);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           ${Object.keys(K).map((e) => i`<option value=${e}>${K[e]}</option>`)}
         </select>
@@ -3622,7 +3640,7 @@ var K = {
 			}, this._numberFilterState.set(e, i), this._emptyFilterState.delete(e), this._applyFilterForKey(e);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
       </div>
     `;
@@ -3639,7 +3657,7 @@ var K = {
 			r.join = n, this._numberFilterState.set(e.key, r), this._emptyFilterState.delete(e.key), this._applyFilterForKey(e.key);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           <option value="and">AND</option>
           <option value="or">OR</option>
@@ -3671,7 +3689,7 @@ var K = {
 	}
 	_renderDateFilter(e) {
 		let t = e.type === "datetime", n = this._dateFilterState.get(e.key) ?? {}, r = (e) => e?.slice(0, 10), o = (e) => {
-			e.key === "Escape" && $(e.currentTarget) || (e.stopPropagation(), e.key === "Escape" && (this._openFilterKey = null));
+			e.key === "Escape" && $(e.currentTarget) || (e.stopPropagation(), e.key === "Escape" && this._closeFilterDropdown());
 		};
 		return i`
       <div class="ft-filter-range ft-filter-range-dates">
@@ -3703,7 +3721,7 @@ var K = {
 			n === "all" ? this.removeFilter(e.key) : this.setFilter(e.key, (e) => !!e == (n === "true"));
 		}}
         @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
         <option value="all">${k("all")}</option>
         <option value="true">\u2714 ${k("booleanTrue")}</option>

package/dist/flex-table.d.ts

@@ -484,6 +484,18 @@ export declare class FlexTable extends LitElement {
     /** Keep a fixed-position menu inside the viewport — a menu opened near the right or bottom edge would spill off-screen. */
     private _keepMenuInView;
     private _adjustFilterDropdown;
+    /**
+     * Close the filter dialog. From the keyboard (Escape) focus goes back to the column's menu button — the
+     * dialog leaves the DOM, and focus inside it would otherwise drop to the page (APG dialog). A click
+     * outside closes it without moving focus: the click already put focus where the user meant.
+     */
+    private _closeFilterDropdown;
+    /**
+     * Tab stays inside the filter dialog (it floats over the table, fixed to the header — a focus that left
+     * it would leave it open and unreachable behind the next control). Capture phase: the controls stop
+     * their own keydowns from reaching the grid.
+     */
+    private _onFilterDialogKeydown;
     private _renderFilterDropdown;
     private _buildTextPredicate;
     private _applyTextFilter;

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