@svgrid/grid 1.1.1 → 1.2.1

package/src/SvGridDropdown.svelte

@@ -334,14 +334,18 @@
             style={opt?.color ? colorfulChipStyleInline(opt.color) : ''}
           >
             {opt ? opt.label : String(v)}
-            <button
-              type="button"
+            <!-- A <button> can't be nested inside the trigger <button>; this is a
+                 pointer-only affordance (tabindex -1), so a role="button" span is
+                 valid HTML and preserves identical behaviour. -->
+            <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+            <span
               class="sv-grid-chip-remove"
+              role="button"
               aria-label="Remove {opt ? opt.label : String(v)}"
               tabindex={-1}
               onmousedown={(event) => event.preventDefault()}
               onclick={(event) => removeChip(v, event)}
-            >×</button>
+            >×</span>
           </span>
         {/each}
       </span>

package/src/a11y.contract.test.ts

@@ -1,49 +1,49 @@
-import { describe, expect, it } from 'vitest'
-import {
-  getGridCellA11yProps,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-} from './a11y'
-
-function attrsToHtml(attrs: Record<string, string | number | boolean>) {
-  return Object.entries(attrs)
-    .map(([key, value]) => `${key}="${String(value)}"`)
-    .join(' ')
-}
-
-describe('a11y contract rendering', () => {
-  it('builds expected headless markup attributes', () => {
-    const root = getGridRootA11yProps()
-    const header = getGridHeaderA11yProps({
-      sortable: true,
-      sortDirection: 'descending',
-    })
-    const row = getGridRowA11yProps(1)
-    const cell = getGridCellA11yProps({
-      rowIndex: 1,
-      colIndex: 2,
-      selected: true,
-    })
-
-    const html = [
-      `<table ${attrsToHtml(root)}><thead>`,
-      `<tr ${attrsToHtml(row)}>`,
-      `<th ${attrsToHtml(header)}>Age</th>`,
-      `</tr></thead><tbody>`,
-      `<tr ${attrsToHtml(row)}><td ${attrsToHtml(cell)}>42</td></tr>`,
-      `</tbody></table>`,
-    ].join('')
-
-    expect(html).toContain('role="grid"')
-    expect(html).toContain('role="columnheader"')
-    expect(html).toContain('aria-sort="descending"')
-    expect(html).toContain('aria-selected="true"')
-    expect(html).toContain('aria-colindex="2"')
-  })
-
-  it('creates stable active descendant ids', async () => {
-    const { getGridCellDomId } = await import('./a11y')
-    expect(getGridCellDomId('svgrid', 3, 4)).toBe('svgrid_cell_3_4')
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+} from './a11y'
+
+function attrsToHtml(attrs: Record<string, string | number | boolean>) {
+  return Object.entries(attrs)
+    .map(([key, value]) => `${key}="${String(value)}"`)
+    .join(' ')
+}
+
+describe('a11y contract rendering', () => {
+  it('builds expected headless markup attributes', () => {
+    const root = getGridRootA11yProps()
+    const header = getGridHeaderA11yProps({
+      sortable: true,
+      sortDirection: 'descending',
+    })
+    const row = getGridRowA11yProps(1)
+    const cell = getGridCellA11yProps({
+      rowIndex: 1,
+      colIndex: 2,
+      selected: true,
+    })
+
+    const html = [
+      `<table ${attrsToHtml(root)}><thead>`,
+      `<tr ${attrsToHtml(row)}>`,
+      `<th ${attrsToHtml(header)}>Age</th>`,
+      `</tr></thead><tbody>`,
+      `<tr ${attrsToHtml(row)}><td ${attrsToHtml(cell)}>42</td></tr>`,
+      `</tbody></table>`,
+    ].join('')
+
+    expect(html).toContain('role="grid"')
+    expect(html).toContain('role="columnheader"')
+    expect(html).toContain('aria-sort="descending"')
+    expect(html).toContain('aria-selected="true"')
+    expect(html).toContain('aria-colindex="2"')
+  })
+
+  it('creates stable active descendant ids', async () => {
+    const { getGridCellDomId } = await import('./a11y')
+    expect(getGridCellDomId('svgrid', 3, 4)).toBe('svgrid_cell_3_4')
+  })
+})

package/src/a11y.test.ts

@@ -1,59 +1,59 @@
-import { describe, expect, it } from 'vitest'
-import {
-  getGridCellA11yProps,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-} from './a11y'
-
-describe('a11y helpers', () => {
-  it('returns grid role props', () => {
-    expect(
-      getGridRootA11yProps({
-        activeDescendantId: 'svgrid_cell_0_0',
-        rowCount: 10,
-        colCount: 5,
-      }),
-    ).toEqual({
-      role: 'grid',
-      tabindex: 0,
-      'aria-activedescendant': 'svgrid_cell_0_0',
-      'aria-rowcount': 10,
-      'aria-colcount': 5,
-    })
-  })
-
-  it('returns header sort semantics', () => {
-    expect(
-      getGridHeaderA11yProps({
-        sortable: true,
-        sortDirection: 'ascending',
-      }),
-    ).toEqual({
-      role: 'columnheader',
-      'aria-sort': 'ascending',
-    })
-  })
-
-  it('returns row and cell indices for accessibility metadata', () => {
-    expect(getGridRowA11yProps(2)).toEqual({
-      role: 'row',
-      'aria-rowindex': 2,
-    })
-
-    expect(
-      getGridCellA11yProps({
-        id: 'svgrid_cell_2_3',
-        rowIndex: 2,
-        colIndex: 3,
-        selected: true,
-      }),
-    ).toEqual({
-      role: 'gridcell',
-      id: 'svgrid_cell_2_3',
-      'aria-colindex': 3,
-      'aria-rowindex': 2,
-      'aria-selected': true,
-    })
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  getGridCellA11yProps,
+  getGridHeaderA11yProps,
+  getGridRootA11yProps,
+  getGridRowA11yProps,
+} from './a11y'
+
+describe('a11y helpers', () => {
+  it('returns grid role props', () => {
+    expect(
+      getGridRootA11yProps({
+        activeDescendantId: 'svgrid_cell_0_0',
+        rowCount: 10,
+        colCount: 5,
+      }),
+    ).toEqual({
+      role: 'grid',
+      tabindex: 0,
+      'aria-activedescendant': 'svgrid_cell_0_0',
+      'aria-rowcount': 10,
+      'aria-colcount': 5,
+    })
+  })
+
+  it('returns header sort semantics', () => {
+    expect(
+      getGridHeaderA11yProps({
+        sortable: true,
+        sortDirection: 'ascending',
+      }),
+    ).toEqual({
+      role: 'columnheader',
+      'aria-sort': 'ascending',
+    })
+  })
+
+  it('returns row and cell indices for accessibility metadata', () => {
+    expect(getGridRowA11yProps(2)).toEqual({
+      role: 'row',
+      'aria-rowindex': 2,
+    })
+
+    expect(
+      getGridCellA11yProps({
+        id: 'svgrid_cell_2_3',
+        rowIndex: 2,
+        colIndex: 3,
+        selected: true,
+      }),
+    ).toEqual({
+      role: 'gridcell',
+      id: 'svgrid_cell_2_3',
+      'aria-colindex': 3,
+      'aria-rowindex': 2,
+      'aria-selected': true,
+    })
+  })
+})

package/src/a11y.ts

@@ -1,59 +1,59 @@
-export type GridSortDirection = 'ascending' | 'descending' | 'none' | 'other'
-
-export type GridColumnA11yInput = {
-  sortable?: boolean
-  sortDirection?: GridSortDirection
-}
-
-export type GridCellA11yInput = {
-  colIndex?: number
-  rowIndex?: number
-  selected?: boolean
-  id?: string
-}
-
-export function getGridRootA11yProps(input: {
-  activeDescendantId?: string | null
-  rowCount?: number
-  colCount?: number
-} = {}) {
-  return {
-    role: 'grid',
-    tabindex: 0,
-    ...(input.activeDescendantId
-      ? { 'aria-activedescendant': input.activeDescendantId }
-      : {}),
-    ...(input.rowCount !== undefined ? { 'aria-rowcount': input.rowCount } : {}),
-    ...(input.colCount !== undefined ? { 'aria-colcount': input.colCount } : {}),
-  } as const
-}
-
-export function getGridHeaderA11yProps(input: GridColumnA11yInput = {}) {
-  const { sortable = false, sortDirection = 'none' } = input
-  return {
-    role: 'columnheader',
-    ...(sortable ? { 'aria-sort': sortDirection } : {}),
-  } as const
-}
-
-export function getGridRowA11yProps(rowIndex?: number) {
-  return {
-    role: 'row',
-    ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
-  } as const
-}
-
-export function getGridCellA11yProps(input: GridCellA11yInput = {}) {
-  const { colIndex, rowIndex, selected = false, id } = input
-  return {
-    role: 'gridcell',
-    ...(id ? { id } : {}),
-    ...(colIndex !== undefined ? { 'aria-colindex': colIndex } : {}),
-    ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
-    ...(selected ? { 'aria-selected': true } : {}),
-  } as const
-}
-
-export function getGridCellDomId(baseId: string, rowIndex: number, colIndex: number) {
-  return `${baseId}_cell_${rowIndex}_${colIndex}`
-}
+export type GridSortDirection = 'ascending' | 'descending' | 'none' | 'other'
+
+export type GridColumnA11yInput = {
+  sortable?: boolean
+  sortDirection?: GridSortDirection
+}
+
+export type GridCellA11yInput = {
+  colIndex?: number
+  rowIndex?: number
+  selected?: boolean
+  id?: string
+}
+
+export function getGridRootA11yProps(input: {
+  activeDescendantId?: string | null
+  rowCount?: number
+  colCount?: number
+} = {}) {
+  return {
+    role: 'grid',
+    tabindex: 0,
+    ...(input.activeDescendantId
+      ? { 'aria-activedescendant': input.activeDescendantId }
+      : {}),
+    ...(input.rowCount !== undefined ? { 'aria-rowcount': input.rowCount } : {}),
+    ...(input.colCount !== undefined ? { 'aria-colcount': input.colCount } : {}),
+  } as const
+}
+
+export function getGridHeaderA11yProps(input: GridColumnA11yInput = {}) {
+  const { sortable = false, sortDirection = 'none' } = input
+  return {
+    role: 'columnheader',
+    ...(sortable ? { 'aria-sort': sortDirection } : {}),
+  } as const
+}
+
+export function getGridRowA11yProps(rowIndex?: number) {
+  return {
+    role: 'row',
+    ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
+  } as const
+}
+
+export function getGridCellA11yProps(input: GridCellA11yInput = {}) {
+  const { colIndex, rowIndex, selected = false, id } = input
+  return {
+    role: 'gridcell',
+    ...(id ? { id } : {}),
+    ...(colIndex !== undefined ? { 'aria-colindex': colIndex } : {}),
+    ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
+    ...(selected ? { 'aria-selected': true } : {}),
+  } as const
+}
+
+export function getGridCellDomId(baseId: string, rowIndex: number, colIndex: number) {
+  return `${baseId}_cell_${rowIndex}_${colIndex}`
+}