@iyulab/flex-table 0.48.3 → 0.48.5

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [0.48.5] - 2026-10-06
+
+### Fixed
+
+- **The form controls the grid draws are named.** Cell editors (text, number, select, date and the
+  autocomplete input) had no name and are now named by the column header; the autocomplete editor
+  is a combobox whose suggestions are a listbox of options, with the highlighted one announced. In
+  the filter dropdown — now a group named "Filter {column}" — the match-mode select, the filter text,
+  each numeric condition's operator and value, the condition join and the blank-cells select are
+  named (the blank-cells label sat next to its select without being tied to it). The find and
+  replace boxes were named only by their placeholder. New locale keys: `findInput`,
+  `replaceInput`, `filterFor`, `filterMatchMode`, `filterText`, `conditionOperator`,
+  `conditionValue`, `conditionJoin`.
+
+## [0.48.4] - 2026-10-06
+
+### Fixed
+
+- **The find panel's controls are named.** The previous, next and close buttons held only `◀`, `▶`
+  and `✕`, and the two option checkboxes were labelled `Aa` and `[ ]`, so assistive technology read
+  symbols. They are now named from the locale ("Previous match", "Next match", "Close find", "Match
+  case", "Whole cell") and the buttons declare their keys with `aria-keyshortcuts`; the tooltips keep
+  showing the key. The no-match count ("0 results") was a fixed English string and now comes from
+  the locale too (new key `findNoResults`).
+- **Row selection has a keyboard path, and the row checkboxes are no longer Tab stops.** With
+  `selectable`, every rendered row checkbox was in the Tab order and none had a name, so Shift+Tab
+  from the control after the grid landed on an unnamed checkbox, and selecting rows from the
+  keyboard meant tabbing through them. Shift+Space now selects (and deselects) the active cell's row
+  — Space alone still types into an editable cell — and the checkboxes are named ("Select row",
+  "Select all rows"; new keys `selectRow`, `selectAllRows`) and kept out of the Tab order.
+- The locale values of `findPrevious`, `findNext` and `closeFind` no longer embed the key in
+  parentheses — the key is added to the tooltip separately. An app that registered its own wording
+  for these keys keeps it.
+
 ## [0.48.3] - 2026-10-06
 
 ### Fixed

package/README.md

@@ -435,6 +435,7 @@ package dependency; CSS custom properties are resolved at render time, not impor
 | Home / End | Row start/end |
 | Ctrl+Home / Ctrl+End | Table start/end |
 | Shift+Arrow / Shift+Click | Extend selection range |
+| Shift+Space | Select / deselect the active cell's row (when `selectable` — the row checkboxes are not Tab stops) |
 | Ctrl+C / Ctrl+X | Copy/Cut selection as TSV |
 | Ctrl+V | Paste TSV data |
 | Ctrl+D / Ctrl+R | Fill down / fill right |

package/dist/{flex-table-CLw2o8sr.js → flex-table-CL29tbBZ.js}

@@ -1110,14 +1110,23 @@ O.register("en", {
 	fromPlaceholder: "From",
 	toPlaceholder: "To",
 	findPlaceholder: "Find...",
-	findPrevious: "Previous (Shift+Enter)",
-	findNext: "Next (Enter)",
+	findPrevious: "Previous match",
+	findNext: "Next match",
 	matchCase: "Match case",
 	wholeCell: "Whole cell",
-	closeFind: "Close (Escape)",
+	closeFind: "Close find",
+	findNoResults: "No results",
 	replaceWithPlaceholder: "Replace with...",
 	replace: "Replace",
 	replaceAll: "Replace all",
+	findInput: "Find",
+	replaceInput: "Replace with",
+	filterFor: "Filter {header}",
+	filterMatchMode: "Match",
+	filterText: "Filter text",
+	conditionOperator: "Condition {n}",
+	conditionValue: "Condition {n} value",
+	conditionJoin: "Combine conditions",
 	sortAscending: "Sort ascending",
 	sortDescending: "Sort descending",
 	filter: "Filter…",
@@ -1133,6 +1142,8 @@ O.register("en", {
 	insertRowAbove: "Insert row above",
 	insertRowBelow: "Insert row below",
 	deleteRow: "Delete row",
+	selectRow: "Select row",
+	selectAllRows: "Select all rows",
 	filterByThisValue: "Filter by this value",
 	addComment: "Add Comment",
 	editComment: "Edit Comment",
@@ -1167,14 +1178,23 @@ O.register("en", {
 	fromPlaceholder: "시작",
 	toPlaceholder: "끝",
 	findPlaceholder: "찾기...",
-	findPrevious: "이전 (Shift+Enter)",
-	findNext: "다음 (Enter)",
+	findPrevious: "이전 일치",
+	findNext: "다음 일치",
 	matchCase: "대/소문자 구분",
 	wholeCell: "셀 전체 일치",
-	closeFind: "닫기 (Escape)",
+	closeFind: "찾기 닫기",
+	findNoResults: "결과 없음",
 	replaceWithPlaceholder: "바꿀 내용...",
 	replace: "바꾸기",
 	replaceAll: "모두 바꾸기",
+	findInput: "찾을 내용",
+	replaceInput: "바꿀 내용",
+	filterFor: "{header} 필터",
+	filterMatchMode: "일치 방식",
+	filterText: "필터 텍스트",
+	conditionOperator: "조건 {n}",
+	conditionValue: "조건 {n} 값",
+	conditionJoin: "조건 결합",
 	sortAscending: "오름차순 정렬",
 	sortDescending: "내림차순 정렬",
 	filter: "필터…",
@@ -1190,6 +1210,8 @@ O.register("en", {
 	insertRowAbove: "위에 행 삽입",
 	insertRowBelow: "아래에 행 삽입",
 	deleteRow: "행 삭제",
+	selectRow: "행 선택",
+	selectAllRows: "모든 행 선택",
 	filterByThisValue: "이 값으로 필터",
 	addComment: "메모 추가",
 	editComment: "메모 편집",
@@ -2874,6 +2896,10 @@ var K = {
 				return;
 			}
 			if (!this._handleCtrlKey(e) && !this._handleAltKey(e, t)) {
+				if (e.key === " " && e.shiftKey && this.selectable && this._activeCell && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					e.preventDefault(), this._rowSelection.toggle(this._activeCell.row), this._lastCheckboxRowIndex = this._activeCell.row, this._rowSelectionVersion++, this._dispatchRowSelectionEvent();
+					return;
+				}
 				if (this._activeCell && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
 					let e = t[this._activeCell.col];
 					e && this._isCellEditable(e) && this._startEdit();
@@ -3517,7 +3543,8 @@ var K = {
 	_renderFilterDropdown(e) {
 		let t = e.type ?? "text";
 		return i`
-      <div class="ft-filter-dropdown" @click=${(e) => e.stopPropagation()}>
+      <div class="ft-filter-dropdown" role="group" aria-label=${k("filterFor", { header: e.label })}
+        @click=${(e) => e.stopPropagation()}>
         ${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>
@@ -3554,7 +3581,7 @@ var K = {
 		return i`
       <div class="ft-filter-empty-row">
         <label>${k("blankCells")}</label>
-        <select class="ft-filter-mode-select"
+        <select class="ft-filter-mode-select" aria-label=${k("blankCells")}
           .value=${n}
           @change=${(n) => {
 			let r = n.target.value;
@@ -3626,7 +3653,7 @@ var K = {
 		};
 		return i`
       <div class="ft-filter-mode-row">
-        <select class="ft-filter-mode-select"
+        <select class="ft-filter-mode-select" aria-label=${k("filterMatchMode")}
           .value=${t.mode}
           @change=${(t) => {
 			let n = t.target.value, r = this._textFilterState.get(e.key) ?? {
@@ -3647,7 +3674,7 @@ var K = {
           <option value="wildcard">${k("wildcard")}</option>
         </select>
       </div>
-      <input class="ft-filter-input" type="text" placeholder=${k("searchPlaceholder")}
+      <input class="ft-filter-input" type="text" placeholder=${k("searchPlaceholder")} aria-label=${k("filterText")}
         .value=${t.value}
         @input=${(t) => {
 			let n = t.target.value, r = this._textFilterState.get(e.key) ?? {
@@ -3684,7 +3711,7 @@ var K = {
 		let n = (this._numberFilterState.get(e) ?? this._defaultNumState())[t];
 		return i`
       <div class="ft-num-cond-row">
-        <select class="ft-filter-mode-select ft-num-op-select"
+        <select class="ft-filter-mode-select ft-num-op-select" aria-label=${k("conditionOperator", { n: t === "cond1" ? 1 : 2 })}
           .value=${n.op}
           @change=${(n) => {
 			let r = n.target.value, i = this._numberFilterState.get(e) ?? this._defaultNumState();
@@ -3699,6 +3726,7 @@ var K = {
           ${Object.keys(K).map((e) => i`<option value=${e}>${K[e]}</option>`)}
         </select>
         <input class="ft-filter-input ft-num-cond-input" type="text" inputmode="decimal" placeholder=${k("valuePlaceholder")}
+          aria-label=${k("conditionValue", { n: t === "cond1" ? 1 : 2 })}
           .value=${n.text ?? (n.value == null ? "" : N(n.value))}
           aria-invalid=${n.text && n.value == null ? "true" : "false"}
           @input=${(n) => {
@@ -3720,7 +3748,7 @@ var K = {
 		return i`
       ${this._renderNumCondRow(e.key, "cond1")}
       <div class="ft-filter-mode-row">
-        <select class="ft-filter-mode-select"
+        <select class="ft-filter-mode-select" aria-label=${k("conditionJoin")}
           .value=${t.join}
           @change=${(t) => {
 			let n = t.target.value, r = this._numberFilterState.get(e.key) ?? this._defaultNumState();
@@ -3785,7 +3813,7 @@ var K = {
 	}
 	_renderBooleanFilter(e) {
 		return i`
-      <select class="ft-filter-input"
+      <select class="ft-filter-input" aria-label=${k("filterFor", { header: e.label })}
         @change=${(t) => {
 			let n = t.target.value;
 			n === "all" ? this.removeFilter(e.key) : this.setFilter(e.key, (e) => !!e == (n === "true"));
@@ -4215,25 +4243,26 @@ var K = {
 			e.key === "Enter" && !_(e) && e.target instanceof HTMLInputElement && e.target.classList.contains("ft-find-input") && (e.shiftKey ? this._findPrev() : this._findNext());
 		}}>
         <div class="ft-find-row">
-          <input class="ft-find-input" type="text" placeholder=${k("findPlaceholder")}
+          <input class="ft-find-input" type="text" placeholder=${k("findPlaceholder")} aria-label=${k("findInput")}
             .value=${t}
             @input=${(e) => {
 			this._findState.query = e.target.value, this._findSearch();
 		}}>
-          <span class="ft-find-count">${c > 0 ? `${l}/${c}` : t ? "0 results" : ""}</span>
-          <button @click=${() => this._findPrev()} title=${k("findPrevious")}>◀</button>
-          <button @click=${() => this._findNext()} title=${k("findNext")}>▶</button>
-          <label title=${k("matchCase")}><input type="checkbox" ?checked=${r} @change=${(e) => {
+          <span class="ft-find-count">${c > 0 ? `${l}/${c}` : t ? k("findNoResults") : ""}</span>
+          <!-- 글리프는 이름이 아니다(«◀» 는 «black left-pointing triangle» 로 읽힌다) — 이름은 aria-label, 키는 aria-keyshortcuts -->
+          <button @click=${() => this._findPrev()} aria-label=${k("findPrevious")} aria-keyshortcuts="Shift+Enter" title=${`${k("findPrevious")} (Shift+Enter)`}>◀</button>
+          <button @click=${() => this._findNext()} aria-label=${k("findNext")} aria-keyshortcuts="Enter" title=${`${k("findNext")} (Enter)`}>▶</button>
+          <label title=${k("matchCase")}><input type="checkbox" aria-label=${k("matchCase")} ?checked=${r} @change=${(e) => {
 			this._findState.matchCase = e.target.checked, this._findSearch();
 		}}> Aa</label>
-          <label title=${k("wholeCell")}><input type="checkbox" ?checked=${a} @change=${(e) => {
+          <label title=${k("wholeCell")}><input type="checkbox" aria-label=${k("wholeCell")} ?checked=${a} @change=${(e) => {
 			this._findState.wholeCell = e.target.checked, this._findSearch();
 		}}> [ ]</label>
-          <button @click=${() => this._closeFindPanel()} title=${k("closeFind")}>✕</button>
+          <button @click=${() => this._closeFindPanel()} aria-label=${k("closeFind")} aria-keyshortcuts="Escape" title=${`${k("closeFind")} (Escape)`}>✕</button>
         </div>
         ${e === "replace" ? i`
           <div class="ft-find-row">
-            <input class="ft-find-replace-input" type="text" placeholder=${k("replaceWithPlaceholder")}
+            <input class="ft-find-replace-input" type="text" placeholder=${k("replaceWithPlaceholder")} aria-label=${k("replaceInput")}
               .value=${n}
               @input=${(e) => {
 			this._findState.replaceWith = e.target.value;
@@ -4254,7 +4283,7 @@ var K = {
             style="position: absolute; top: 0; left: ${d + u}px; width: ${this._checkboxColWidth}px; height: ${r}px; z-index: 4;">
           ${this._rowSelection.mode === "multi" ? i`
             <!-- 칸 전체가 누르는 자리다(라벨) — 체크 상자는 16px 그대로. -->
-            <label class="ft-checkbox-hit"><input type="checkbox"
+            <label class="ft-checkbox-hit"><input type="checkbox" tabindex="-1" aria-label=${k("selectAllRows")}
               .checked=${this._rowSelection.isAllSelected}
               .indeterminate=${this._rowSelection.isSomeSelected}
               @change=${this._onSelectAllChange}></label>
@@ -4354,7 +4383,9 @@ var K = {
 		let o = this.visibleColumns, s = this._toDataIndex(e), c = this.data[s], l = a ?? e * this.rowHeight, u = this.rowHeight, d = this._totalRowWidth, f = e % 2 == 0 ? "ft-row-even" : "ft-row-odd", p = this.selectable && this._rowSelection.isSelected(e), m = this._scrollLeft, h = 0, g = this.selectable ? i`
       <div class="ft-checkbox-cell"
         style="position: absolute; top: 0; left: ${m + h}px; width: ${this._checkboxColWidth}px; height: ${u}px; z-index: 2;">
-        <label class="ft-checkbox-hit"><input type="checkbox"
+        <!-- 행 체크박스는 Tab 정지점이 아니다 — 그리드(호스트)가 하나의 정지점이고 행 선택은 Shift+Space 다.
+             렌더된 행마다 정지점이면 표 하나를 지나는 데 Tab 이 행 수만큼 든다. -->
+        <label class="ft-checkbox-hit"><input type="checkbox" tabindex="-1" aria-label=${k("selectRow")}
           .checked=${p}
           @click=${(e) => this._onRowCheckboxClick(e)}
           @change=${(t) => this._onRowCheckboxChange(t, e)}></label>
@@ -4461,7 +4492,7 @@ var K = {
 		if (t.editor) return t.editor(e[t.key], e, t);
 		let n = e[t.key], r = n == null ? "" : String(n);
 		if (t.type === "number") return i`
-        <input class="ft-editor ft-editor-number" type="text" inputmode="decimal"
+        <input class="ft-editor ft-editor-number" type="text" inputmode="decimal" aria-label=${t.label}
           .value=${typeof n == "number" ? N(n) : r}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
@@ -4469,7 +4500,7 @@ var K = {
 		if (t.type === "date" || t.type === "datetime") {
 			let e = t.type === "datetime";
 			return i`
-        <u-date-picker class="ft-editor ft-editor-${t.type}" size="sm"
+        <u-date-picker class="ft-editor ft-editor-${t.type}" size="sm" aria-label=${t.label}
           mode=${e ? "datetime" : "date"} ?confirm=${e}
           .value=${Qe(n, e)}
           @keydown=${this._onEditorKeyDown}
@@ -4480,7 +4511,7 @@ var K = {
 		if (t.type === "select" && t.options && t.options.length > 0) {
 			let e = t.options, r = typeof e[0] == "string";
 			return i`
-        <select class="ft-editor"
+        <select class="ft-editor" aria-label=${t.label}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}
           @change=${() => this._commitEdit()}>
@@ -4491,15 +4522,20 @@ var K = {
 		if (t.autocomplete) {
 			let e = this._autocompleteState?.candidates ?? [], n = this._autocompleteState?.activeIndex ?? -1;
 			return i`
-        <input class="ft-editor" type="text"
+        <input class="ft-editor" type="text" aria-label=${t.label}
+          role="combobox" aria-autocomplete="list"
+          aria-expanded=${e.length > 0 ? "true" : "false"}
+          aria-controls="ft-autocomplete-list"
+          aria-activedescendant=${n >= 0 && e.length > 0 ? `ft-autocomplete-${n}` : a}
           .value=${r}
           @input=${(e) => this._onAutocompleteInput(e, t)}
           @keydown=${this._onEditorKeyDown}
           @blur=${() => this._commitEdit()}>
         ${e.length > 0 ? i`
-          <div class="ft-autocomplete-dropdown">
+          <div class="ft-autocomplete-dropdown" id="ft-autocomplete-list" role="listbox" aria-label=${t.label}>
             ${e.map((e, t) => i`
               <div class="ft-autocomplete-item ${t === n ? "ft-autocomplete-active" : ""}"
+                id=${`ft-autocomplete-${t}`} role="option" aria-selected=${t === n ? "true" : "false"}
                 @mousedown=${(t) => {
 				t.preventDefault(), this._selectAutocompleteCandidate(e);
 			}}>
@@ -4511,7 +4547,7 @@ var K = {
       `;
 		}
 		return i`
-      <input class="ft-editor" type="text"
+      <input class="ft-editor" type="text" aria-label=${t.label}
         .value=${r}
         @keydown=${this._onEditorKeyDown}
         @blur=${() => this._commitEdit()}>

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-CLw2o8sr.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./flex-table-CL29tbBZ.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/locale.d.ts

@@ -25,7 +25,7 @@
  *   (아이콘 자리의 글리프)는 어느 로케일에서도 같은 것을 뜻하며, 번역하면 오히려 읽히지 않는다.
  *   그 판단은 «번역하지 않기로 한 것»이지 «빠뜨린 것»이 아니다.
  */
-export type FlexTableMessageKey = 'showHiddenColumns' | 'columnMenu' | 'cellActions' | 'noColumnsDefined' | 'addCommentPlaceholder' | 'cancel' | 'save' | 'clear' | 'blankCells' | 'emptyOnly' | 'nonEmptyOnly' | 'blankAll' | 'all' | 'contains' | 'startsWith' | 'endsWith' | 'wildcard' | 'searchPlaceholder' | 'valuePlaceholder' | 'fromPlaceholder' | 'toPlaceholder' | 'findPlaceholder' | 'findPrevious' | 'findNext' | 'matchCase' | 'wholeCell' | 'closeFind' | 'replaceWithPlaceholder' | 'replace' | 'replaceAll' | 'sortAscending' | 'sortDescending' | 'filter' | 'clearFilter' | 'hideColumn' | 'showColumn' | 'autoFitWidth' | 'wider' | 'narrower' | 'columnMenuFor' | 'columnMenuRegion' | 'copy' | 'insertRowAbove' | 'insertRowBelow' | 'deleteRow' | 'filterByThisValue' | 'addComment' | 'editComment' | 'deleteComment' | 'booleanTrue' | 'booleanFalse' | 'dropFileToImport' | 'notANumber' | 'notADate' | 'notADateTime' | 'notInList';
+export type FlexTableMessageKey = 'showHiddenColumns' | 'columnMenu' | 'cellActions' | 'noColumnsDefined' | 'addCommentPlaceholder' | 'cancel' | 'save' | 'clear' | 'blankCells' | 'emptyOnly' | 'nonEmptyOnly' | 'blankAll' | 'all' | 'contains' | 'startsWith' | 'endsWith' | 'wildcard' | 'searchPlaceholder' | 'valuePlaceholder' | 'fromPlaceholder' | 'toPlaceholder' | 'findPlaceholder' | 'findPrevious' | 'findNext' | 'matchCase' | 'wholeCell' | 'closeFind' | 'findNoResults' | 'replaceWithPlaceholder' | 'replace' | 'replaceAll' | 'findInput' | 'replaceInput' | 'filterFor' | 'filterMatchMode' | 'filterText' | 'conditionOperator' | 'conditionValue' | 'conditionJoin' | 'sortAscending' | 'sortDescending' | 'filter' | 'clearFilter' | 'hideColumn' | 'showColumn' | 'autoFitWidth' | 'wider' | 'narrower' | 'columnMenuFor' | 'columnMenuRegion' | 'copy' | 'insertRowAbove' | 'insertRowBelow' | 'deleteRow' | 'selectRow' | 'selectAllRows' | 'filterByThisValue' | 'addComment' | 'editComment' | 'deleteComment' | 'booleanTrue' | 'booleanFalse' | 'dropFileToImport' | 'notANumber' | 'notADate' | 'notADateTime' | 'notInList';
 /** 이 패키지의 chrome 문자열 묶음. 소비자가 `register()` 로 언어를 더하거나 문구를 덮을 수 있다. */
 export declare const flexTableLocale: import("@iyulab/components/dist/utilities/Locale.js").LocaleNamespace<FlexTableMessageKey>;
 /** 짧은 조회 별칭 — 렌더 코드가 읽히게 유지한다. */

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flex-table-CLw2o8sr.js";
+import { t as e } from "./flex-table-CL29tbBZ.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.48.3",
+  "version": "0.48.5",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",

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

@@ -71,6 +71,7 @@ flex-table {
 | Arrows / Tab / Shift+Tab | Move between cells |
 | 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) |
 | Ctrl+Click header | Select column |
 | Enter / F2 | Edit (Enter on a non-editable cell fires `row-activate`) |
 | Typing a printable character | Start editing an editable cell |