@iyulab/flex-table 0.48.3 → 0.48.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [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-Do-AzEj5.js}

@@ -1110,11 +1110,12 @@ 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",
@@ -1133,6 +1134,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,11 +1170,12 @@ O.register("en", {
 	fromPlaceholder: "시작",
 	toPlaceholder: "끝",
 	findPlaceholder: "찾기...",
-	findPrevious: "이전 (Shift+Enter)",
-	findNext: "다음 (Enter)",
+	findPrevious: "이전 일치",
+	findNext: "다음 일치",
 	matchCase: "대/소문자 구분",
 	wholeCell: "셀 전체 일치",
-	closeFind: "닫기 (Escape)",
+	closeFind: "찾기 닫기",
+	findNoResults: "결과 없음",
 	replaceWithPlaceholder: "바꿀 내용...",
 	replace: "바꾸기",
 	replaceAll: "모두 바꾸기",
@@ -1190,6 +1194,8 @@ O.register("en", {
 	insertRowAbove: "위에 행 삽입",
 	insertRowBelow: "아래에 행 삽입",
 	deleteRow: "행 삭제",
+	selectRow: "행 선택",
+	selectAllRows: "모든 행 선택",
 	filterByThisValue: "이 값으로 필터",
 	addComment: "메모 추가",
 	editComment: "메모 편집",
@@ -2874,6 +2880,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();
@@ -4220,16 +4230,17 @@ var K = {
             @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">
@@ -4254,7 +4265,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 +4365,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>

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-Do-AzEj5.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' | '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-Do-AzEj5.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.4",
   "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 |