@operato/data-grist 10.10.0 → 10.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "10.10.0",
+  "version": "10.10.2",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "type": "module",
@@ -70,7 +70,7 @@
     "@material/web": "^2.0.0",
     "@operato/headroom": "^10.0.0",
     "@operato/i18n": "^10.0.0",
-    "@operato/input": "^10.10.0",
+    "@operato/input": "^10.10.1",
     "@operato/p13n": "^10.10.0",
     "@operato/popup": "^10.10.0",
     "@operato/pull-to-refresh": "^10.0.0",
@@ -115,5 +115,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "15f722c8131e5a04b5b4186ac71ada9f94ef9a4f"
+  "gitHead": "d2c8c94cda6f6480e8be4e7d5994554ea5920c54"
 }

package/test/accessible-name.test.ts

@@ -8,62 +8,62 @@ import { columnText } from '../src/utils/column-text.js'
 import { ZERO_CONFIG, ZERO_DATA } from '../src/configure/zero-config.js'
 
 /**
- * 입력칸의 이름.
+ * Accessible names on the inputs inside the grid.
  *
- * ## 왜 시험이 필요한가
+ * ## Why this is tested
  *
- * 이 grid 안에는 이름 없는 입력칸이 여럿 있었다 — 줄을 고르는 체크박스, 머리줄의 filter 상자,
- * 그리고 포커스를 담고 있는 IME buffer. 눈으로 보는 사람에게는 **자리**가 뜻을 말해 준다(맨 왼쪽
- * 좁은 칸이면 줄 선택, 머리줄 이름 바로 아래면 그 column 의 filter). 그런데 자리는 그림일 뿐이고
- * 관계가 아니라서, 화면을 못 보는 사람에게는 이름 없는 상자들만 남는다.
+ * Several inputs here had no name: the row-select checkboxes, the header filter boxes, and the IME
+ * buffer that holds focus. Position carries the meaning for a sighted reader — a narrow leftmost
+ * column means row select, a box under a header name filters that column — but position is a
+ * picture, not a relationship, so nothing of it reaches a screen reader.
  *
- * ## 무엇을 지키려는가
+ * ## What has to hold
  *
- * 이름의 출처가 하나여야 한다. `header` 를 고쳤을 때 읽히는 이름도 함께 바뀌어야 하고, 그러려면
- * 부르는 쪽이 이름을 다시 적어 두면 안 된다. `columnText()` 가 그 유일한 출처다.
+ * The name has one source. Editing `header` must change what is announced, which means callers
+ * cannot spell the name out again. `columnText()` is that source.
  *
- * `buildColumn` 이 문자열 header 를 `() => header` 함수로 바꿔 버리는 자리가 있었는데, 그 함수가
- * 돌려주는 것은 lit template 이라 이름을 되꺼낼 수 없다 — 여기서 이름이 사라지고 있었다.
+ * `buildColumn` turns a string header into `() => header`, and that function returns a lit template
+ * the name cannot be read back out of. The name was disappearing right there.
  */
 
-describe('column 이름의 출처는 하나다', () => {
-  it('문자열로 준 header 는 함수로 바뀌어도 글자가 남는다', () => {
+describe('column name has one source', () => {
+  it('keeps the plain text after a string header becomes a function', () => {
     const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호' })
 
     expect(columnText(column)).to.equal('파렛트 번호')
   })
 
-  it('header.renderer 에 문자열을 준 경우도 같다', () => {
+  it('keeps it when the string arrives as header.renderer', () => {
     const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: '파렛트 번호' } })
 
     expect(columnText(column)).to.equal('파렛트 번호')
   })
 
-  it('label: true 는 header 의 이름을 물려받는다', () => {
+  it('lets label: true inherit the header name', () => {
     const column = buildColumn({ type: 'string', name: 'palletId', header: '파렛트 번호', label: true })
 
     expect(columnText(column)).to.equal('파렛트 번호')
   })
 
-  it('header 를 함수로 그리면 이름을 되꺼낼 수 없다 — 그때는 column 이름으로 물러난다', () => {
+  it('falls back to column.name when the header is drawn by a function', () => {
     const column = buildColumn({ type: 'string', name: 'palletId', header: { renderer: () => html`<i>x</i>` } })
 
     expect(columnText(column)).to.equal('palletId')
   })
 
-  it('column 이 없으면 이름을 지어내지 않는다', () => {
+  it('invents no name when there is no column', () => {
     expect(columnText(undefined)).to.equal('')
     expect(columnText(null)).to.equal('')
   })
 })
 
-describe('줄을 고르는 칸에는 이름이 있다', () => {
+describe('row-select boxes are named', () => {
   const columns = [
     { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
     { type: 'string', name: 'palletId', header: '파렛트 번호' }
   ].map(buildColumn)
 
-  it('행마다 놓인 체크박스가 몇 번째 줄인지 말한다', async () => {
+  it('says which row each checkbox selects', async () => {
     const body: any = await fixture(html`
       <ox-grid-body
         .config=${{ ...ZERO_CONFIG, columns }}
@@ -74,7 +74,7 @@ describe('줄을 고르는 칸에는 이름이 있다', () => {
 
     await body.updateComplete
 
-    /* 체크박스는 각 칸(ox-grid-field)의 shadow root 안에 그려진다 — 한 겹 더 들어가야 보인다. */
+    /* The checkboxes live one shadow root deeper, inside each ox-grid-field. */
     const fields = Array.from(body.renderRoot.querySelectorAll('ox-grid-field')) as any[]
 
     await Promise.all(fields.map(field => field.updateComplete))
@@ -83,14 +83,14 @@ describe('줄을 고르는 칸에는 이름이 있다', () => {
       Array.from(field.renderRoot?.querySelectorAll('input[type=checkbox], input[type=radio]') || [])
     ) as HTMLInputElement[]
 
-    expect(boxes.length, '줄을 고르는 칸을 찾지 못했다').to.be.greaterThan(0)
+    expect(boxes.length, 'found no row-select box').to.be.greaterThan(0)
     boxes.forEach(box =>
-      expect(box.getAttribute('aria-label'), '이름 없는 체크박스가 남아 있다').to.be.a('string').and.not.equal('')
+      expect(box.getAttribute('aria-label'), 'an unnamed checkbox is left').to.be.a('string').and.not.equal('')
     )
   })
 })
 
-describe('포커스를 담고 있는 IME buffer 가 지금 선 칸을 말한다', () => {
+describe('IME buffer names the cell it stands in for', () => {
   const columns = [
     { type: 'string', name: 'palletId', header: '파렛트 번호' },
     { type: 'string', name: 'location', header: '보관 위치' }
@@ -111,41 +111,40 @@ describe('포커스를 담고 있는 IME buffer 가 지금 선 칸을 말한다'
     return body.renderRoot.querySelector('#ime-buffer') as HTMLInputElement
   }
 
-  it('첫 칸에 서 있으면 첫 칸의 이름을 읽는다', async () => {
+  it('reads the first column while focus sits there', async () => {
     expect((await bodyFocusedAt(0)).getAttribute('aria-label')).to.contain('파렛트 번호')
   })
 
-  it('옆 칸으로 옮기면 읽히는 이름도 바뀐다 — 안 바뀌면 어디에 선 것인지 알 수 없다', async () => {
+  it('changes what it reads when focus moves a column over', async () => {
     expect((await bodyFocusedAt(1)).getAttribute('aria-label')).to.contain('보관 위치')
   })
 
-  it('보조기술에서 지우지 않는다 — 포커스를 받는 자리다', async () => {
+  it('stays visible to assistive tech — it is where focus lands', async () => {
     expect((await bodyFocusedAt(0)).getAttribute('aria-hidden')).to.be.null
   })
 })
 
 /**
- * 표를 표라고 선언했나.
+ * Table semantics.
  *
- * ## 왜 시험이 필요한가
+ * ## Why this is tested
  *
- * 이 표는 CSS grid 로 그린다 — 칸이 평평하게 놓여 있고 **줄이라는 요소가 없다.** 보기에는 줄이
- * 있지만 그것은 같은 높이에 놓였다는 그림일 뿐이다. 그래서 스크린 리더에게 이 화면은 「여기가
- * 표다」도, 「지금 3행 3열이다」도, 「전체는 40행이다」도 아닌 **입력칸 더미**였다.
+ * The grid is drawn with CSS grid: cells sit flat and there is no row element. Rows are a picture
+ * made of equal offsetTop, so a screen reader saw a pile of inputs rather than a table — no "this
+ * is a table", no "row 3 column 3", no "40 rows in all".
  *
- * 줄 감싸개를 넣으면서 두 가지가 동시에 깨질 수 있다.
+ * Adding row wrappers can break two things at once:
  *
  * ```
- * 뜻이 서나    role=grid / row / columnheader / gridcell 이 제대로 겹쳐 있나
- * 모양이 사나  display: contents 가 정말로 상자를 안 만드나 — 만들면 표가 한 줄로 무너진다
+ * semantics   grid / row / columnheader / gridcell have to nest correctly
+ * layout      display: contents must generate no box; if it does, the columns collapse
  * ```
  *
- * 두 번째가 특히 중요하다. `display: contents` 를 잘못 걸면 칸들이 grid 항목이 아니게 되어
- * 열이 사라진다. 그래서 **자리를 실제로 확인한다** — 한 줄 안의 칸은 왼쪽으로 갈수록 x 가 커지고,
- * 줄과 줄은 y 가 달라야 한다.
+ * The second one is why geometry is asserted: cells in a row must step right, and rows must step
+ * down.
  */
-describe('표를 표라고 선언한다', () => {
-  /* ox-grid 는 이미 다듬어진 column 을 받는다 — 다듬는 것은 ox-grist 의 일이다. */
+describe('grid declares itself a grid', () => {
+  /* ox-grid takes already-compiled columns; compiling them is ox-grist's job. */
   const columns = [
     { type: 'gutter', gutterName: 'row-selector', name: '__selected__', multiple: true },
     { type: 'string', name: 'palletId', header: '파렛트 번호', sortable: true },
@@ -181,12 +180,12 @@ describe('표를 표라고 선언한다', () => {
     return { el, header, body }
   }
 
-  it('표 · 줄 · 칸이 겹쳐 있다', async () => {
+  it('nests grid, row and cell', async () => {
     const { el, header, body } = await grid()
 
     const grid_ = el.renderRoot.querySelector('[role=grid]')
 
-    expect(grid_, 'role=grid 가 없다').to.exist
+    expect(grid_, 'no role=grid').to.exist
     expect(header.getAttribute('role')).to.equal('rowgroup')
     expect(body.getAttribute('role')).to.equal('rowgroup')
 
@@ -195,38 +194,38 @@ describe('표를 표라고 선언한다', () => {
     expect(header.renderRoot.querySelectorAll('[role=columnheader]').length).to.equal(3)
   })
 
-  it('전체가 몇 줄 몇 열인지 말한다 — 지금 페이지가 아니라', async () => {
+  it('counts the whole table, not the page on screen', async () => {
     const { el } = await grid()
 
     const grid_ = el.renderRoot.querySelector('[role=grid]')
 
-    /* 머리 한 줄 + 전체 40건. 화면에 두 줄만 그려도 40건짜리 표다. */
+    /* One header row plus 40 records. Two rows drawn is still a 40-row table. */
     expect(grid_.getAttribute('aria-rowcount')).to.equal('41')
     expect(grid_.getAttribute('aria-colcount')).to.equal('3')
     expect(grid_.getAttribute('aria-label')).to.equal('입고 대기 목록')
   })
 
-  it('2페이지의 첫 줄은 21번째 줄이다 — 페이지마다 1번으로 돌아가지 않는다', async () => {
+  it('numbers page 2 from row 22, not back at 1', async () => {
     const { body } = await grid({ page: 2 })
 
     const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
 
-    /* 머리 한 줄(1) + 앞 페이지 20건 = 22번째부터 */
+    /* One header row plus 20 records on page 1. */
     expect(rows[0].getAttribute('aria-rowindex')).to.equal('22')
     expect(rows[1].getAttribute('aria-rowindex')).to.equal('23')
   })
 
-  it('칸이 몇 번째 열인지 말한다 — 남는 폭을 메우는 칸은 세지 않는다', async () => {
+  it('numbers columns and leaves the width filler uncounted', async () => {
     const { body } = await grid()
 
     const row = body.renderRoot.querySelector('[role=row]') as HTMLElement
     const cells = Array.from(row.querySelectorAll('[role=gridcell]')) as HTMLElement[]
 
     expect(cells.map(cell => cell.getAttribute('aria-colindex'))).to.deep.equal(['1', '2', '3'])
-    expect(row.querySelectorAll('[role=presentation]').length, '메우는 칸이 표의 칸으로 세어졌다').to.equal(1)
+    expect(row.querySelectorAll('[role=presentation]').length, 'the filler was counted as a cell').to.equal(1)
   })
 
-  it('정렬 상태를 글자로도 말한다 — 화살표는 눈으로만 읽힌다', async () => {
+  it('states sort direction in text, not only as an arrow', async () => {
     const el: any = await fixture(html`
       <ox-grid
         .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
@@ -243,40 +242,39 @@ describe('표를 표라고 선언한다', () => {
     const headers = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
     const sorts = headers.map(cell => cell.getAttribute('aria-sort'))
 
-    /* 거터는 정렬할 수 없다 — 있지도 않은 기능을 있다고 말하지 않는다. */
+    /* A gutter cannot be sorted; claiming otherwise announces a control that is not there. */
     expect(sorts[0]).to.be.null
-    expect(sorts[1], '내림차순으로 정렬된 열').to.equal('descending')
-    expect(sorts[2], '정렬할 수 있으나 지금은 아닌 열').to.equal('none')
+    expect(sorts[1], 'sorted descending').to.equal('descending')
+    expect(sorts[2], 'sortable but not currently sorted').to.equal('none')
   })
 
-  it('줄 감싸개가 배치를 건드리지 않는다 — 상자를 만들면 표가 무너진다', async () => {
+  it('keeps the layout — a row wrapper that generates a box collapses the grid', async () => {
     const { body } = await grid()
 
     const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
     const first = Array.from(rows[0].children) as HTMLElement[]
 
-    /* 감싸개 자신은 상자가 없다 */
     expect(getComputedStyle(rows[0]).display).to.equal('contents')
 
-    /* 한 줄 안의 칸은 오른쪽으로 나아간다 — 한 자리에 겹쳐 있으면 열이 사라진 것이다 */
+    /* Cells step right; stacked at one x means the columns are gone. */
     const lefts = first.map(cell => cell.offsetLeft)
-    expect(new Set(lefts).size, '칸들이 같은 x 에 겹쳐 있다').to.be.greaterThan(1)
+    expect(new Set(lefts).size, 'cells stacked at the same x').to.be.greaterThan(1)
     lefts.slice(1).forEach((left, index) => expect(left).to.be.greaterThan(lefts[index]))
 
-    /* 줄과 줄은 아래로 내려간다 */
+    /* Rows step down. */
     const firstTop = (rows[0].children[0] as HTMLElement).offsetTop
     const secondTop = (rows[1].children[0] as HTMLElement).offsetTop
-    expect(secondTop, '두 줄이 같은 y 에 있다').to.be.greaterThan(firstTop)
+    expect(secondTop, 'two rows at the same y').to.be.greaterThan(firstTop)
   })
 })
 
 /**
- * 묶음 머리가 있는 표.
+ * Grouped headers.
  *
- * 머리가 두 줄이 되고, 묶이지 않은 열은 두 줄에 걸친다(`.span-both`). 배치가 CSS grid 의
- * `grid-row` / `grid-column` 으로 이루어지므로 **줄 감싸개가 가장 위험한 자리**다.
+ * The header becomes two rows and ungrouped columns span both (`.span-both`). Placement runs
+ * through CSS `grid-row` / `grid-column`, which makes this the riskiest spot for a row wrapper.
  */
-describe('묶음 머리 — 머리가 두 줄이다', () => {
+describe('grouped header spans two rows', () => {
   const columns = [
     { type: 'string', name: 'palletId', header: '파렛트 번호' },
     { type: 'string', name: 'width', header: { renderer: '폭', group: '치수' } },
@@ -302,67 +300,67 @@ describe('묶음 머리 — 머리가 두 줄이다', () => {
     return { el, header, body }
   }
 
-  it('머리가 두 줄로 세어진다 — 본문은 3번째 줄부터', async () => {
+  it('counts two header rows so the body starts at row 3', async () => {
     const { el, header, body } = await grouped()
 
     expect(header.renderRoot.querySelectorAll('[role=row]').length).to.equal(2)
 
-    /* 머리 두 줄 + 1건 */
+    /* Two header rows plus one record. */
     expect(el.renderRoot.querySelector('[role=grid]').getAttribute('aria-rowcount')).to.equal('3')
 
     const rows = Array.from(body.renderRoot.querySelectorAll('[role=row]')) as HTMLElement[]
     expect(rows[0].getAttribute('aria-rowindex')).to.equal('3')
   })
 
-  it('묶음 머리가 몇 열을 덮는지 말한다', async () => {
+  it('says how many columns a group covers', async () => {
     const { header } = await grouped()
 
     const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
     const first = cells[0]
     const group = cells.find(cell => cell.getAttribute('aria-colspan'))
 
-    /* 묶이지 않은 열은 두 줄에 걸친다 */
+    /* An ungrouped column spans both header rows. */
     expect(first.getAttribute('aria-rowspan')).to.equal('2')
     expect(first.getAttribute('aria-colindex')).to.equal('1')
 
-    /* 치수 묶음은 2 · 3열을 덮는다 */
-    expect(group, '묶음 머리를 찾지 못했다').to.exist
+    /* The group header covers columns 2 and 3. */
+    expect(group, 'found no group header').to.exist
     expect(group!.getAttribute('aria-colindex')).to.equal('2')
     expect(group!.getAttribute('aria-colspan')).to.equal('2')
   })
 
-  it('두 줄짜리 머리의 배치가 그대로다 — 묶음이 아래 줄보다 위에 있다', async () => {
+  it('keeps two-row header placement — group sits above its leaf columns', async () => {
     const { header } = await grouped()
 
     const cells = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]
     const group = cells.find(cell => cell.getAttribute('aria-colspan'))!
     const leaf = cells.find(cell => !cell.getAttribute('aria-colspan') && cell !== cells[0])!
 
-    expect(leaf.offsetTop, '묶음 머리와 그 아래 열이 같은 높이에 있다').to.be.greaterThan(group.offsetTop)
-    expect(group.offsetWidth, '묶음 머리가 두 열을 덮지 않는다').to.be.greaterThan(leaf.offsetWidth)
+    expect(leaf.offsetTop, 'group header and its leaf column at the same height').to.be.greaterThan(group.offsetTop)
+    expect(group.offsetWidth, 'group header does not cover two columns').to.be.greaterThan(leaf.offsetWidth)
   })
 })
 
 /**
- * 표 감싸개가 바깥 배치를 건드리지 않나.
+ * The grid wrapper must not disturb the surrounding layout.
  *
- * `role=grid` 안에는 줄만 들어갈 수 있어서, 설정 단추 자리와 페이지 넘김은 감싸개 **밖**으로
- * 나왔다. 그러면서 두 가지가 이 구조에 매인다.
+ * `role=grid` admits only rows, so the settings-button slot and the pager moved outside the
+ * wrapper. Two things then depend on this structure:
  *
  * ```
- * 세로 배치   호스트는 flex column 이다. 감싸개가 상자를 만들면 머리와 몸이 그 안으로 들어가
- *            flex 항목이 하나가 되고, 몸의 flex: 1 이 듣지 않아 높이가 무너진다
- * 형제 선택자 「머리에 올렸을 때 설정 단추를 보인다」가 인접 형제 선택자다. 설정 단추가 감싸개
- *            바로 뒤에 있어야 그 규칙이 성립한다
+ * column layout      the host is a flex column. A wrapper that generates a box swallows header
+ *                    and body into one flex item, and the body's flex: 1 stops working
+ * sibling selector   "show the settings button on header hover" is an adjacent-sibling rule, so
+ *                    the button has to sit directly after the wrapper
  * ```
  */
-describe('표 감싸개는 배치에 끼어들지 않는다', () => {
+describe('grid wrapper stays out of the layout', () => {
   const columns = [
     { type: 'string', name: 'palletId', header: '파렛트 번호' },
     { type: 'string', name: 'location', header: '보관 위치' }
   ].map(buildColumn)
 
-  it('설정 단추는 표 바로 뒤에 있다 — 표 안이 아니라', async () => {
+  it('places the settings button after the grid, not inside it', async () => {
     const el: any = await fixture(html`
       <ox-grid
         .config=${{ ...ZERO_CONFIG, columns, rows: { ...ZERO_CONFIG.rows } }}
@@ -375,12 +373,12 @@ describe('표 감싸개는 배치에 끼어들지 않는다', () => {
     const grid = el.renderRoot.querySelector('[role=grid]') as HTMLElement
     const setting = el.renderRoot.querySelector('div[setting]') as HTMLElement
 
-    expect(setting, '설정 단추 자리가 없다').to.exist
-    expect(grid.contains(setting), '설정 단추가 표 안에 들어갔다 — 표 읽기가 깨진다').to.be.false
-    expect(grid.nextElementSibling, '인접 형제 규칙이 성립하지 않는다').to.equal(setting)
+    expect(setting, 'no settings slot').to.exist
+    expect(grid.contains(setting), 'settings button inside the grid breaks table reading').to.be.false
+    expect(grid.nextElementSibling, 'adjacent-sibling rule no longer holds').to.equal(setting)
   })
 
-  it('머리와 몸이 그대로 호스트의 세로 배치를 쓴다', async () => {
+  it('leaves header and body as flex items of the host', async () => {
     const el: any = await fixture(html`
       <div style="height: 300px; display: flex">
         <ox-grid
@@ -400,9 +398,9 @@ describe('표 감싸개는 배치에 끼어들지 않는다', () => {
 
     expect(getComputedStyle(wrapper).display).to.equal('contents')
 
-    /* 몸이 남는 높이를 다 쓴다 — 감싸개가 상자를 만들면 이 값이 머리 높이만큼으로 줄어든다 */
-    expect(body.offsetHeight, '몸이 남는 높이를 쓰지 못한다').to.be.greaterThan(100)
-    expect(body.offsetTop, '몸이 머리 아래에 있지 않다').to.be.greaterThan(0)
+    /* The body takes the remaining height; a wrapper with a box shrinks it to header height. */
+    expect(body.offsetHeight, 'body does not take the remaining height').to.be.greaterThan(100)
+    expect(body.offsetTop, 'body is not below the header').to.be.greaterThan(0)
     expect(header.offsetTop).to.equal(0)
   })
 })