@svgrid/grid 2.2.27 → 2.2.29

package/src/svgrid.cell-dom-ids.test.ts

@@ -0,0 +1,96 @@
+/**
+ * DOM: cell ids are scoped per grid instance (#77).
+ *
+ * Every cell used to be minted as `svgrid_cell_<row>_<col>`, so two grids on
+ * one page emitted the same ids. Duplicate ids break `getElementById` and made
+ * the second grid's `aria-activedescendant` point at the first grid's cell, so
+ * a screen reader announced the wrong cell.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+import type { ColumnDef } from './index'
+
+type Row = { id: number; name: string }
+const features = tableFeatures({ rowSortingFeature })
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 160 },
+]
+const data: Row[] = [
+  { id: 1, name: 'one' },
+  { id: 2, name: 'two' },
+]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns: cols,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 240,
+      virtualization: false,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const cleanups: Array<() => void> = []
+afterEach(() => {
+  while (cleanups.length) cleanups.pop()!()
+})
+
+describe('cell DOM ids', () => {
+  it('gives two grids on the same page disjoint cell ids (#77)', async () => {
+    const a = mountGrid()
+    const b = mountGrid()
+    cleanups.push(a.destroy, b.destroy)
+    await tick()
+
+    const idsOf = (root: HTMLElement) =>
+      [...root.querySelectorAll('[role="gridcell"][id]')].map((el) => el.id)
+    const aIds = idsOf(a.target)
+    const bIds = idsOf(b.target)
+
+    expect(aIds.length).toBeGreaterThan(0)
+    expect(bIds.length).toBe(aIds.length)
+    // No id appears in both grids.
+    expect(aIds.filter((id) => bIds.includes(id))).toEqual([])
+    // And every id in the document is unique.
+    const all = [...aIds, ...bIds]
+    expect(new Set(all).size).toBe(all.length)
+  })
+
+  it('points aria-activedescendant at a cell inside its own grid (#77)', async () => {
+    const a = mountGrid()
+    const b = mountGrid()
+    cleanups.push(a.destroy, b.destroy)
+    await tick()
+
+    for (const { target } of [a, b]) {
+      const grid = target.querySelector('[aria-activedescendant]')
+      expect(grid).not.toBeNull()
+      const descendantId = grid!.getAttribute('aria-activedescendant')!
+      expect(target.querySelector(`[id="${descendantId}"]`)).not.toBeNull()
+    }
+  })
+})