@iyulab/flex-table 0.48.4 → 0.48.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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

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

@@ -1119,6 +1119,14 @@ O.register("en", {
 	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…",
@@ -1179,6 +1187,14 @@ O.register("en", {
 	replaceWithPlaceholder: "바꿀 내용...",
 	replace: "바꾸기",
 	replaceAll: "모두 바꾸기",
+	findInput: "찾을 내용",
+	replaceInput: "바꿀 내용",
+	filterFor: "{header} 필터",
+	filterMatchMode: "일치 방식",
+	filterText: "필터 텍스트",
+	conditionOperator: "조건 {n}",
+	conditionValue: "조건 {n} 값",
+	conditionJoin: "조건 결합",
 	sortAscending: "오름차순 정렬",
 	sortDescending: "내림차순 정렬",
 	filter: "필터…",
@@ -3527,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>
@@ -3564,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;
@@ -3636,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) ?? {
@@ -3657,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) ?? {
@@ -3694,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();
@@ -3709,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) => {
@@ -3730,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();
@@ -3795,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"));
@@ -4225,7 +4243,7 @@ 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();
@@ -4244,7 +4262,7 @@ var K = {
         </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;
@@ -4474,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()}>
@@ -4482,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}
@@ -4493,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()}>
@@ -4504,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);
 			}}>
@@ -4524,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-Do-AzEj5.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' | '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';
+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-Do-AzEj5.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.4",
+  "version": "0.48.5",
   "description": "A minimalist, input-centric data grid web component",
   "type": "module",
   "main": "./dist/flex-table.js",