DataTable: Add current-page row selection

.changeset/selectable-data-table-rows.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+DataTable: Add controlled and uncontrolled row selection.

e2e/components/DataTable.test.ts

@@ -5,7 +5,7 @@ import {themes} from '../test-helpers/themes'
 const stories: ReadonlyArray<{
   title: string
   id: string
-  aat?: boolean
+  snapshotTitle?: string
 }> = [
   {
     title: 'Default',
@@ -54,12 +54,27 @@ const stories: ReadonlyArray<{
   {
     title: 'With Groups',
     id: 'experimental-components-datatable-features--with-groups',
-    aat: true,
+  },
+  {
+    title: 'With Row Selection',
+    id: 'experimental-components-datatable-features--with-row-selection',
+  },
+  {
+    title: 'With Grouped Row Selection',
+    id: 'experimental-components-datatable-features--with-grouped-row-selection',
   },
   {
     title: 'With Sortable Groups',
     id: 'experimental-components-datatable-features--with-sortable-groups',
-    aat: true,
+  },
+  {
+    title: 'With Standalone And Grouped Row Selection',
+    id: 'experimental-components-datatable-features--with-standalone-and-grouped-row-selection',
+    snapshotTitle: 'With Mixed Row Selection',
+  },
+  {
+    title: 'With Paginated Row Selection',
+    id: 'experimental-components-datatable-features--with-paginated-row-selection',
   },
 ]
 
@@ -79,27 +94,49 @@ test.describe('DataTable', () => {
             // Default state
             expect(
               await page.screenshot({
+                animations: 'disabled',
                 mask: await page
                   .locator('td', {
                     has: page.locator('relative-time'),
                   })
                   .all(),
               }),
-            ).toMatchSnapshot(`DataTable.${story.title}.${theme}.png`)
+            ).toMatchSnapshot(`DataTable.${story.snapshotTitle ?? story.title}.${theme}.png`)
           })
 
-          if (story.aat) {
-            test('axe @aat', async ({page}) => {
-              await visit(page, {
-                id: story.id,
-                globals: {
-                  colorScheme: theme,
-                },
+          if (story.id === 'experimental-components-datatable-features--with-grouped-row-selection') {
+            for (const state of ['mixed', 'all selected'] as const) {
+              test(`${state} @vrt`, async ({page}) => {
+                await visit(page, {id: story.id, globals: {colorScheme: theme}})
+                const selectAll = page.getByRole('checkbox', {name: 'Select rows', exact: true})
+                if (state === 'mixed') {
+                  await page.getByRole('checkbox', {name: 'Select strapi', exact: true}).click()
+                  await expect(selectAll).toBeChecked({indeterminate: true})
+                } else {
+                  await selectAll.click()
+                  await expect(selectAll).toBeChecked()
+                }
+                await expect(page.getByRole('checkbox', {name: 'Select codeql-dca-worker'})).toBeDisabled()
+                expect(
+                  await page.screenshot({
+                    animations: 'disabled',
+                    mask: await page.locator('td', {has: page.locator('relative-time')}).all(),
+                  }),
+                ).toMatchSnapshot(`DataTable.${story.title}.${state}.${theme}.png`)
               })
+            }
+          }
 
-              await expect(page).toHaveNoViolations()
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
             })
-          }
+
+            await expect(page).toHaveNoViolations()
+          })
 
           if (story.id === 'experimental-components-datatable-features--with-groups') {
             test('continued group on next page @vrt', async ({page}) => {
@@ -111,70 +148,108 @@ test.describe('DataTable', () => {
           }
         })
       }
-
-      if (story.id === 'experimental-components-datatable-features--with-groups') {
-        test('pagination across a group boundary @aat', async ({page}) => {
-          await visit(page, {id: story.id})
-          const table = page.getByRole('table', {name: 'Paginated repositories by visibility'})
-          await expect(table.getByRole('rowheader')).toHaveCount(10)
-          await expect(table.getByRole('columnheader', {name: /^Public\s*, 9 rows$/})).toBeVisible()
-          await expect(table.getByRole('columnheader', {name: /^Internal\s*, 3 rows$/})).toHaveCount(0)
-          await expect(table.getByRole('rowheader').first()).toHaveText('standalone/before')
-
-          await page.getByRole('button', {name: 'Next page', exact: true}).click()
-          await expect(table.getByRole('rowheader')).toHaveCount(7)
-          await expect(table.getByRole('columnheader', {name: /^Public\s*, 3 rows$/})).toBeVisible()
-          await expect(table.getByRole('columnheader', {name: /^Internal\s*, 3 rows$/})).toBeVisible()
-          await expect(table.getByRole('rowheader', {name: 'public/repository-10', exact: true})).toBeVisible()
-          await expect(table.getByRole('rowheader', {name: 'public/repository-1', exact: true})).toHaveCount(0)
-          await expect(table.getByRole('rowheader').last()).toHaveText('standalone/after')
-          const standalone = table.getByRole('rowheader', {name: 'standalone/after', exact: true})
-          const rowHeaderId = await standalone.getAttribute('id')
-          const columnId = await table.getByRole('columnheader', {name: 'Visibility', exact: true}).getAttribute('id')
-          await expect(table.getByRole('row', {name: 'standalone/after Unassigned'}).getByRole('cell')).toHaveAttribute(
-            'headers',
-            `${rowHeaderId} ${columnId}`,
-          )
-
-          const unresolvedHeaders = await table
-            .locator('[headers]')
-            .evaluateAll(cells =>
-              cells.flatMap(cell =>
-                (cell.getAttribute('headers') ?? '')
-                  .split(' ')
-                  .filter(id => !cell.closest('table')?.querySelector(`[id="${id}"]`)),
-              ),
-            )
-          expect(unresolvedHeaders).toEqual([])
-          await expect(page).toHaveNoViolations()
-
-          const sortButton = table.getByRole('button', {name: 'Name', exact: true})
-          await sortButton.click()
-          await sortButton.click()
-          await expect(table.getByRole('rowheader')).toHaveText([
-            'public/repository-12',
-            'public/repository-11',
-            'public/repository-10',
-            'internal/repository-3',
-            'internal/repository-2',
-            'internal/repository-1',
-            'standalone/after',
-          ])
-          await expect(table.getByRole('columnheader', {name: 'Name', exact: true})).toHaveAttribute(
-            'aria-sort',
-            'descending',
-          )
-          await expect(table.getByRole('row', {name: 'standalone/after Unassigned'}).getByRole('cell')).toHaveAttribute(
-            'headers',
-            `${rowHeaderId} ${columnId}`,
-          )
-
-          await page.getByRole('button', {name: 'Previous page', exact: true}).click()
-          await expect(table.getByRole('rowheader')).toHaveCount(10)
-          await expect(table.getByRole('columnheader', {name: /^Public\s*, 9 rows$/})).toBeVisible()
-          await expect(table.getByRole('rowheader', {name: 'public/repository-1', exact: true})).toBeVisible()
-        })
-      }
     })
   }
+
+  test('standalone and grouped selection stays wired through keyboard input and sorting @aat', async ({page}) => {
+    await visit(page, {id: 'experimental-components-datatable-features--with-standalone-and-grouped-row-selection'})
+    const standalone = page.getByRole('checkbox', {name: 'Select codeql-dca-worker', exact: true})
+    const grouped = page.getByRole('checkbox', {name: 'Select strapi', exact: true})
+    const selectAll = page.getByRole('checkbox', {name: 'Select rows', exact: true})
+
+    await expect(standalone).toBeEnabled()
+    await standalone.focus()
+    await page.keyboard.press('Space')
+    await expect(standalone).toBeChecked()
+    await expect(standalone).toBeFocused()
+    await grouped.click()
+    await page.getByRole('button', {name: 'Name', exact: true}).click()
+    await expect(standalone).toBeChecked()
+    await expect(grouped).toBeChecked()
+    await expect(selectAll).toBeChecked({indeterminate: true})
+    await selectAll.focus()
+    await page.keyboard.press('Space')
+    await expect(selectAll).toBeChecked()
+    await expect(selectAll).toBeFocused()
+    await expect(page).toHaveNoViolations()
+  })
+
+  test('paginated selection example selects only the current page @aat', async ({page}) => {
+    await visit(page, {id: 'experimental-components-datatable-features--with-paginated-row-selection'})
+    const selectAll = page.getByRole('checkbox', {name: 'Select rows', exact: true})
+    const checkedRows = page.locator('tbody input[type="checkbox"]:checked')
+
+    await selectAll.click()
+    await expect(checkedRows).toHaveCount(10)
+    await page.getByRole('button', {name: 'Next page', exact: true}).click()
+    await expect(checkedRows).toHaveCount(0)
+    await expect(selectAll).toHaveAccessibleDescription('Select all 7 rows')
+    await selectAll.click()
+    await expect(checkedRows).toHaveCount(7)
+    await page.getByRole('button', {name: 'Previous page', exact: true}).click()
+    await expect(checkedRows).toHaveCount(0)
+    await expect(page).toHaveNoViolations()
+  })
+
+  test('pagination across a group boundary @aat', async ({page}) => {
+    await visit(page, {id: 'experimental-components-datatable-features--with-groups'})
+    const table = page.getByRole('table', {name: 'Paginated repositories by visibility'})
+    await expect(table.getByRole('rowheader')).toHaveCount(10)
+    await expect(table.getByRole('columnheader', {name: /^Public\s*, 9 rows$/})).toBeVisible()
+    await expect(table.getByRole('columnheader', {name: /^Internal\s*, 3 rows$/})).toHaveCount(0)
+    await expect(table.getByRole('rowheader').first()).toHaveText('standalone/before')
+
+    await page.getByRole('button', {name: 'Next page', exact: true}).click()
+    await expect(table.getByRole('rowheader')).toHaveCount(7)
+    await expect(table.getByRole('columnheader', {name: /^Public\s*, 3 rows$/})).toBeVisible()
+    await expect(table.getByRole('columnheader', {name: /^Internal\s*, 3 rows$/})).toBeVisible()
+    await expect(table.getByRole('rowheader', {name: 'public/repository-10', exact: true})).toBeVisible()
+    await expect(table.getByRole('rowheader', {name: 'public/repository-1', exact: true})).toHaveCount(0)
+    await expect(table.getByRole('rowheader').last()).toHaveText('standalone/after')
+    const standalone = table.getByRole('rowheader', {name: 'standalone/after', exact: true})
+    const rowHeaderId = await standalone.getAttribute('id')
+    const columnId = await table.getByRole('columnheader', {name: 'Visibility', exact: true}).getAttribute('id')
+    await expect(table.getByRole('row', {name: 'standalone/after Unassigned'}).getByRole('cell')).toHaveAttribute(
+      'headers',
+      `${rowHeaderId} ${columnId}`,
+    )
+
+    const unresolvedHeaders = await table
+      .locator('[headers]')
+      .evaluateAll(cells =>
+        cells.flatMap(cell =>
+          (cell.getAttribute('headers') ?? '')
+            .split(' ')
+            .filter(id => !cell.closest('table')?.querySelector(`[id="${id}"]`)),
+        ),
+      )
+    expect(unresolvedHeaders).toEqual([])
+    await expect(page).toHaveNoViolations()
+
+    const sortButton = table.getByRole('button', {name: 'Name', exact: true})
+    await sortButton.click()
+    await sortButton.click()
+    await expect(table.getByRole('rowheader')).toHaveText([
+      'public/repository-12',
+      'public/repository-11',
+      'public/repository-10',
+      'internal/repository-3',
+      'internal/repository-2',
+      'internal/repository-1',
+      'standalone/after',
+    ])
+    await expect(table.getByRole('columnheader', {name: 'Name', exact: true})).toHaveAttribute(
+      'aria-sort',
+      'descending',
+    )
+    await expect(table.getByRole('row', {name: 'standalone/after Unassigned'}).getByRole('cell')).toHaveAttribute(
+      'headers',
+      `${rowHeaderId} ${columnId}`,
+    )
+
+    await page.getByRole('button', {name: 'Previous page', exact: true}).click()
+    await expect(table.getByRole('rowheader')).toHaveCount(10)
+    await expect(table.getByRole('columnheader', {name: /^Public\s*, 9 rows$/})).toBeVisible()
+    await expect(table.getByRole('rowheader', {name: 'public/repository-1', exact: true})).toBeVisible()
+  })
 })

e2e/components/Table.test.ts

@@ -2,6 +2,75 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
+test.describe('Table With Row Selection', () => {
+  const storyId = 'experimental-components-table-features--with-row-selection'
+
+  for (const theme of themes) {
+    test.describe(theme, () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {id: storyId, globals: {colorScheme: theme}})
+        expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Table.With Row Selection.${theme}.png`)
+      })
+
+      test('axe @aat', async ({page}) => {
+        await visit(page, {id: storyId, globals: {colorScheme: theme}})
+        await expect(page).toHaveNoViolations()
+      })
+    })
+  }
+
+  test('composed selection keyboard wiring and header associations @aat', async ({page}) => {
+    await visit(page, {id: storyId})
+    const table = page.getByRole('table', {name: 'Selectable repositories using Table'})
+    const selectionColumn = table.getByRole('columnheader', {name: 'Select rows', exact: true})
+    const selectionColumnId = await selectionColumn.getAttribute('id')
+    const selectAll = selectionColumn.getByRole('checkbox', {name: 'Select rows', exact: true})
+    const react = table.getByRole('checkbox', {name: 'Select primer/react', exact: true})
+    const css = table.getByRole('checkbox', {name: 'Select primer/css', exact: true})
+    const disabled = table.getByRole('checkbox', {name: 'Select github/github', exact: true})
+
+    await expect(selectAll).toHaveAccessibleDescription('Select all 2 rows')
+    await expect(selectAll).toBeChecked({indeterminate: true})
+    await expect(react).toBeChecked()
+    await expect(css).not.toBeChecked()
+    await expect(disabled).toBeDisabled()
+    await expect(disabled).not.toBeChecked()
+
+    for (const group of [
+      {name: /^Internal\s*, 1 row$/, rows: ['github/github']},
+      {name: /^Public\s*, 2 rows$/, rows: ['primer/react', 'primer/css']},
+    ]) {
+      const groupHeader = table.getByRole('columnheader', {name: group.name})
+      await expect(groupHeader).toHaveAttribute('colspan', '3')
+      const groupHeaderId = await groupHeader.getAttribute('id')
+
+      for (const name of group.rows) {
+        const rowHeaderId = await table.getByRole('rowheader', {name, exact: true}).getAttribute('id')
+        const checkbox = table.getByRole('checkbox', {name: `Select ${name}`, exact: true})
+        const cell = table.getByRole('cell', {name: `Select ${name}`, exact: true})
+        await expect(cell).toHaveAttribute('headers', `${groupHeaderId} ${selectionColumnId}`)
+        const labelledBy = await checkbox.getAttribute('aria-labelledby')
+        expect(labelledBy?.split(' ')).toContain(rowHeaderId)
+      }
+    }
+
+    await selectAll.focus()
+    await page.keyboard.press('Space')
+    await expect(selectAll).toBeChecked()
+    await expect(selectAll).not.toBeChecked({indeterminate: true})
+    await expect(selectAll).toBeFocused()
+    await expect(css).toBeChecked()
+    await expect(disabled).not.toBeChecked()
+    await react.focus()
+    await page.keyboard.press('Space')
+    await expect(react).not.toBeChecked()
+    await expect(react).toBeFocused()
+    await expect(selectAll).toBeChecked({indeterminate: true})
+    await expect(selectionColumn).toHaveAccessibleName('Select rows')
+    await expect(page).toHaveNoViolations()
+  })
+})
+
 test.describe('Table With Groups', () => {
   for (const theme of themes) {
     test.describe(theme, () => {