@operato/data-grist 10.8.1 → 10.10.0

package/dist/src/data-grid/data-grid-body.js

@@ -6,9 +6,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import debounce from 'lodash-es/debounce.js';
 import isEmpty from 'lodash-es/isEmpty.js';
+import { i18next } from '@operato/i18n';
 import { sleep, parseToNumberOrNull, closestElement } from '@operato/utils';
 import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js';
 import { RecordViewHandler } from '../record-view/record-view-handler.js';
+import { columnText } from '../utils/column-text.js';
 // import { supportsPassive } from '../utils/index.js'
 import { dataGridBodyStyle } from './data-grid-body-style.js';
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler.js';
@@ -86,6 +88,13 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.columns = [];
         this.data = ZERO_DATA;
         this.focused = ZERO_FOCUS;
+        /**
+         * 이 판의 첫 줄이 표 전체에서 몇 번째인가(1부터).
+         *
+         * 머리줄 수와 페이지 자리를 합한 값이라 ox-grid 가 계산해서 내려 준다 — 여기서 다시 세면
+         * 머리가 한 줄인지 두 줄인지(묶음 머리)를 몸이 알아야 한다.
+         */
+        this.ariaRowIndexBase = 2;
         this.editTarget = null;
         this.from = -1;
         this.to = -1;
@@ -123,6 +132,14 @@ let DataGridBody = class DataGridBody extends LitElement {
         var { records } = data;
         var { appendable, classifier, accumulator } = this.config.rows;
         const { start, end } = this._selectBlock || {};
+        /*
+         * 줄을 고를 수 있는 표에서만 aria-selected 를 낸다.
+         *
+         * 이 속성은 「고를 수 있는데 지금은 안 골랐다」는 뜻이라, 고를 수 없는 표의 모든 줄에 false 를
+         * 달면 있지도 않은 기능을 있다고 말하게 된다. 고르는 장치가 있는지는 표가 스스로 안다 —
+         * 줄 선택 거터가 있느냐다.
+         */
+        const selectable = columns.some(column => column.gutterName === 'row-selector');
         /*
          * 레코드를 추가할 수 있는 경우에는 항상 추가 레코드를 보여준다.
          * 만약, 이전 방식처럼, 커서를 옮겨야만 새로운 레코드가 보이게 하고 싶다면, 조건부를 다음의 코드로 대체한다.
@@ -134,6 +151,16 @@ let DataGridBody = class DataGridBody extends LitElement {
         if (accumulator) {
             var accumRecord = this.buildAccumulatorRecord();
         }
+        /*
+         * ── 줄이 몇 번째인가 ──────────────────────────────────────────────────
+         *
+         * aria-rowindex 는 **표 전체에서의 자리**다 — 지금 페이지 안의 자리가 아니다. 2페이지 첫 줄은
+         * 21번째 줄이지 이 페이지의 1번째 줄이 아니다. 그렇게 읽어 주지 않으면 페이지를 넘길 때마다
+         * 「1번째 줄」로 돌아가서 어디까지 봤는지 알 수 없다.
+         *
+         * 머리줄도 센다(1부터). 묶음 머리가 있으면 머리가 두 줄이라 본문은 3번부터 시작한다.
+         */
+        const rowIndexBase = this.ariaRowIndexBase;
         return html `
       ${records.map((record, idxRow) => {
             var attrFocusedRow = idxRow === focusedRow;
@@ -142,8 +169,17 @@ let DataGridBody = class DataGridBody extends LitElement {
             var dirtyFields = record['__dirtyfields__'] || {};
             var { emphasized } = classifier.call(null, record, idxRow) || {};
             return html `
+          <div
+            grid-row
+            role="row"
+            aria-rowindex=${rowIndexBase + idxRow}
+            aria-selected=${ifDefined(selectable ? !!attrSelected : undefined)}
+          >
           ${columns.map((column, idxColumn) => html `
               <ox-grid-field
+                id=${'cell-' + idxRow + '-' + idxColumn}
+                role="gridcell"
+                aria-colindex=${idxColumn + 1}
                 .data=${data}
                 .type=${column.type}
                 .rowIndex=${idxRow}
@@ -165,7 +201,12 @@ let DataGridBody = class DataGridBody extends LitElement {
                 fixed=${ifDefined(this.fixedLefts[idxColumn])}
               ></ox-grid-field>
             `)}
+          <!--
+            남는 폭을 메우는 칸 — 읽을 것이 없다. 줄 안에는 두되(색이 함께 바뀌어야 한다) 표의
+            칸으로는 세지 않는다.
+          -->
           <ox-grid-field
+            role="presentation"
             .data=${data}
             .rowIndex=${idxRow}
             .columnIndex=${-1}
@@ -175,37 +216,62 @@ let DataGridBody = class DataGridBody extends LitElement {
             ?focused-row=${attrFocusedRow}
             ?selected-row=${attrSelected}
           ></ox-grid-field>
+          </div>
         `;
         })}
       ${accumulator
             ? html `
-            ${columns.map((column, idxColumn) => html `
-                <ox-grid-accum-field
-                  .data=${data}
-                  .columnIndex=${idxColumn}
-                  .rowIndex=${records.length}
-                  .column=${column}
-                  .record=${accumRecord}
-                  .value=${accumRecord[column.name]}
-                  fixed=${ifDefined(this.fixedLefts[idxColumn])}
-                ></ox-grid-accum-field>
-              `)}
-            <ox-grid-accum-field
-              .data=${data}
-              .columnIndex=${-1}
-              .rowIndex=${records.length}
-              .record=${accumRecord}
-            ></ox-grid-accum-field>
+            <div grid-row role="row" aria-rowindex=${rowIndexBase + records.length}>
+              ${columns.map((column, idxColumn) => html `
+                  <ox-grid-accum-field
+                    role="gridcell"
+                    aria-colindex=${idxColumn + 1}
+                    .data=${data}
+                    .columnIndex=${idxColumn}
+                    .rowIndex=${records.length}
+                    .column=${column}
+                    .record=${accumRecord}
+                    .value=${accumRecord[column.name]}
+                    fixed=${ifDefined(this.fixedLefts[idxColumn])}
+                  ></ox-grid-accum-field>
+                `)}
+              <ox-grid-accum-field
+                role="presentation"
+                .data=${data}
+                .columnIndex=${-1}
+                .rowIndex=${records.length}
+                .record=${accumRecord}
+              ></ox-grid-accum-field>
+            </div>
           `
             : nothing}
       ${start && end && start !== end ? html ` <div select-block></div> ` : html ``}
-      <input id="ime-buffer" type="text" />
+      <!--
+        이 grid 의 키 입력은 이 입력칸이 받는다 — 칸을 눌러 편집을 열기 전까지 포커스가 여기에 있고,
+        한글 IME 의 조합 중간 글자도 여기에 쌓인다. 곧 **포커스가 실제로 놓이는 자리**다.
+
+        전에는 이름이 없었다. 눈에 보이지 않으니(opacity: 0) 문제가 아니라고 볼 수 있는데, 그렇지 않다.
+        보이지 않는 것과 없는 것은 다르다 — 포커스를 받고 글자를 받는 입력칸이므로 스크린 리더는 이것을
+        읽는다. 이름이 없으면 「편집 텍스트」 하나로만 읽히고, grid 안에서 화살표로 아무리 옮겨 다녀도
+        읽히는 것이 바뀌지 않는다. 어느 칸에 서 있는지 알 방법이 없다.
+
+        aria-hidden 으로 감추는 것은 답이 아니다. 포커스를 받는 것을 보조기술에서 지우면 포커스가
+        허공으로 사라진 것처럼 된다. 감추는 대신 **지금 서 있는 칸의 이름**을 말한다.
+      -->
+      <input
+        id="ime-buffer"
+        type="text"
+        aria-label=${this._imeBufferLabel(columns[focusedColumn])}
+        aria-activedescendant=${ifDefined(focusedRow >= 0 && focusedColumn >= 0 ? `cell-${focusedRow}-${focusedColumn}` : undefined)}
+      />
       <slot></slot>
     `;
     }
     firstUpdated() {
         // TODO issue #13
         // this.addEventListener('scroll', this.handleOnScroll.bind(this))
+        /* 칸의 팝업 표식을 누르면 그 칸의 편집을 연다(onStartEdit). */
+        this.addEventListener('start-edit', this.onStartEdit.bind(this));
         /* focus() 를 받을 수 있도록 함. */
         this.setAttribute('tabindex', '-1');
         /* 한글 IME composition을 위한 숨겨진 input 버퍼 설정 */
@@ -360,7 +426,7 @@ let DataGridBody = class DataGridBody extends LitElement {
          * 표를 벗어나면 지운다 — 남겨 두면 마지막 줄이 골라진 것처럼 보인다.
          *
          * **요소에 붙인다.** renderRoot 는 ShadowRoot 이고 pointerleave 는 요소에 가는 사건이라 거기서는
-         * 안 먹었다. [재봤음] 표를 벗어난 뒤에도 표식 8개가 남아 있었다. 2026-09-02
+         * 안 먹었다. [확인함] 표를 벗어난 뒤에도 표식 8개가 남아 있었다. 2026-09-02
          */
         this.addEventListener('pointerleave', () => this.setHoveredRow(-1));
         this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this));
@@ -405,37 +471,58 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.markRow(rowIndex, true);
         this._hoveredRow = rowIndex;
     }
-    markRow(rowIndex, on) {
+    /**
+     * 줄 하나 — 그 줄의 칸을 담고 있는 요소.
+     *
+     * ── 자식을 세지 않는다 (2026-09-06) ────────────────────────────────────
+     * 전에는 `renderRoot.children` 을 `줄번호 * (칸수 + 1)` 로 셌다. 「+1」은 남는 폭을 메우는
+     * 빈 칸이고, 그 앞의 주석은 그 셈이 왜 필요한지를 설명하고 있었다 — 셈이 맞아야만 도는 코드였다.
+     *
+     * 지금은 줄이 **실제 요소**다(role=row). 셀 필요가 없다.
+     */
+    rowElementAt(rowIndex) {
         var _a;
         if (rowIndex < 0) {
+            return null;
+        }
+        return (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[grid-row]').item(rowIndex);
+    }
+    markRow(rowIndex, on) {
+        const row = this.rowElementAt(rowIndex);
+        if (!row) {
             return;
         }
-        const columns = this.columns.filter(column => !column.hidden).length;
         /*
-         * 한 줄은 칸 수보다 **하나 많은** 자식을 갖는다. 마지막 하나는 남는 폭을 메우는 빈 칸이다
-         * (`columnIndex` 가 -1 인 `ox-grid-field` — 위 render 참조).
+         * 줄 안의 칸을 모두 바꾼다 — 남는 폭을 메우는 빈 칸까지.
          *
-         * 전에는 칸 수만큼만 돌아서 **그 빈 칸만 색이 안 바뀌었다.** 표가 화면보다 좁으면 줄 오른쪽이
-         * 잘려 보인다.
-         *
-         * `getFieldByIndex` 로는 그 칸에 닿을 수 없다 — 열 번호를 `% columns` 로 감기 때문에 칸 수를
-         * 넘기면 0번으로 돌아온다. 그래서 자식을 직접 센다.
+         * 전에는 그 빈 칸이 빠져서, 표가 화면보다 좁으면 줄 오른쪽이 잘려 보였다.
          */
-        const cells = columns + 1;
-        const first = rowIndex * cells;
-        for (let index = 0; index < cells; index++) {
-            (_a = this.renderRoot.children.item(first + index)) === null || _a === void 0 ? void 0 : _a.toggleAttribute('hovered-row', on);
-        }
+        Array.from(row.children).forEach(cell => cell.toggleAttribute('hovered-row', on));
     }
     getFieldByIndex(rowIndex, columnIndex, residue = true) {
-        if (rowIndex < 0) {
+        const row = this.rowElementAt(rowIndex);
+        if (!row) {
             return;
         }
         var columns = this.columns.filter(column => !column.hidden).length;
         if (!residue && columnIndex >= columns) {
             return;
         }
-        return this.renderRoot.children.item(rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns));
+        /* 열 번호는 감는다 — 끝에서 오른쪽으로 가면 첫 열로 돌아온다(residue). */
+        return row.children.item((columnIndex + columns) % columns);
+    }
+    /**
+     * 칸의 **팝업 표식**을 눌렀다 — 그 칸의 편집을 연다.
+     *
+     * 더블클릭과 같은 자리로 들어간다. 표식은 한 번 누르는 22px 표적이고, 33px 줄에서 더블클릭을
+     * 겨누는 것보다 쉽다. 더블클릭도 그대로 둔다 — 이미 아는 사람의 길을 막지 않는다.
+     */
+    onStartEdit(e) {
+        const { row, column } = e.detail || {};
+        if (isNaN(row) || isNaN(column)) {
+            return;
+        }
+        this.startEditTarget(row, column);
     }
     startEditTarget(row, column, valueWith = null) {
         var { editable } = this.columns.filter(column => !column.hidden)[column].record;
@@ -744,7 +831,7 @@ let DataGridBody = class DataGridBody extends LitElement {
                         this.focusedField.isWorking = false;
                     }
                 }
-                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복, 아니면 1회 (차원별 독립 판정) */
+                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복하고, 아니면 한 번만 붙여 넣는다 (차원마다 따로 판단) */
                 const trs = Array.from(table.querySelectorAll('tr')).filter((r) => r instanceof HTMLTableRowElement);
                 if (!trs.length) {
                     return;
@@ -864,7 +951,7 @@ let DataGridBody = class DataGridBody extends LitElement {
             }
             else if (type === 'text/plain') {
                 /* TSV 포맷 파싱: 줄바꿈으로 행 분리, 탭으로 열 분리 (엑셀 등 외부 소스 붙여넣기 지원) */
-                /* CRLF 정규화 + 마지막 빈 줄 제거 (엑셀 TSV는 개행으로 끝남 — 빈 행이 소스 크기 판정을 깨뜨림) */
+                /* CRLF 정규화 + 마지막 빈 줄 제거 (엑셀 TSV 는 개행으로 끝난다. 빈 행이 소스 크기 판단을 깨뜨린다) */
                 const tsvRows = content
                     .replace(/\r\n/g, '\n')
                     .replace(/\n$/, '')
@@ -873,7 +960,7 @@ let DataGridBody = class DataGridBody extends LitElement {
                 if (!tsvRows.length) {
                     return;
                 }
-                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복, 아니면 1회 (차원별 독립 판정) */
+                /* 엑셀식 타일링: 타겟 선택 영역이 소스 크기의 정수배이면 그 차원으로 반복하고, 아니면 한 번만 붙여 넣는다 (차원마다 따로 판단) */
                 const srcRows = tsvRows.length;
                 const srcCols = Math.max(...tsvRows.map(r => r.length));
                 const repeatR = srcRows > 0 && tgtRows % srcRows === 0 ? tgtRows / srcRows : 1;
@@ -962,6 +1049,18 @@ let DataGridBody = class DataGridBody extends LitElement {
             return record;
         }, {});
     }
+    /**
+     * IME buffer 가 지금 어느 칸을 대신하고 있는지 — 스크린 리더가 읽을 이름.
+     *
+     * 이름의 출처는 column 정의 하나다(columnText). 포커스가 아직 아무 칸에도 없거나 이름을 구할 수
+     * 없으면 「칸 입력」으로 물러난다 — 이름을 지어내지 않고, 그렇다고 이름을 비우지도 않는다.
+     */
+    _imeBufferLabel(column) {
+        const name = columnText(column);
+        return name
+            ? i18next.t('text.grid-cell-input', { name, defaultValue: name })
+            : i18next.t('text.grid-cell-input-plain', { defaultValue: 'cell input' });
+    }
     /** IME buffer를 포커스된 셀 위에 위치시킨다 */
     _positionIMEBuffer() {
         var _a;
@@ -1114,7 +1213,7 @@ DataGridBody.styles = [
       }
 
       @media (pointer: coarse) {
-        /* 터치 디바이스에서는 길게 눌러 텍스트 선택 허용 */
+        /* 터치 기기에서는 길게 누르면 텍스트를 선택할 수 있게 둔다 */
         :host {
           user-select: auto;
         }
@@ -1158,6 +1257,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], DataGridBody.prototype, "focused", void 0);
+__decorate([
+    property({ type: Number })
+], DataGridBody.prototype, "ariaRowIndexBase", void 0);
 __decorate([
     property({ type: Object })
 ], DataGridBody.prototype, "editTarget", void 0);