feat(Table): add support for row scope only header (#1971)

dnbexperience · Feb 3, 2023 · aff2e40 · aff2e40
1 parent 762c667
commit aff2e40
Show file tree

Hide file tree

Showing 17 changed files with 349 additions and 253 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx
@@ -214,7 +214,7 @@ export const TableVariantComplex = () => (
         <caption>A Table Caption</caption>
         <thead>
           <Tr noWrap>
-            <Th></Th>
+            <Th />
             <Th>
               Column 2<br />
               newline
@@ -224,13 +224,14 @@ export const TableVariantComplex = () => (
         </thead>
         <tbody>
           <Tr variant="even">
-            <Th scope="row">Row 1 Header</Th>
+            <Th scope="rowgroup" rowSpan={2}>
+              Row 1+2 Header
+            </Th>
             <Td rowSpan={2}>Row 1 that spans</Td>
             <Td>Row 1</Td>
             <Td>Row 1</Td>
           </Tr>
           <Tr variant="even">
-            <Th scope="row">Row 2 Header</Th>
             <Td>Row 2</Td>
             <Td>Row 2</Td>
           </Tr>
@@ -258,6 +259,28 @@ export const TableVariantComplex = () => (
   </ComponentBox>
 )
 
+export const TableRowScopeOnly = () => (
+  <ComponentBox hideCode data-visual-test="table-row-scope-only">
+    <Table.ScrollView>
+      <Table outline border>
+        <caption>A Table Caption</caption>
+        <tbody>
+          <Tr>
+            <Th scope="row">Header A</Th>
+            <Td>Row 1</Td>
+            <Td>Row 1</Td>
+          </Tr>
+          <Tr>
+            <Th>Header B</Th>
+            <Td>Row 2</Td>
+            <Td>Row 2</Td>
+          </Tr>
+        </tbody>
+      </Table>
+    </Table.ScrollView>
+  </ComponentBox>
+)
+
 export const TableVariantFixed = () => (
   <ComponentBox hideCode data-visual-test="table-fixed">
     {() => {
@@ -381,19 +404,18 @@ export const TableStackedContainer = () => {
             min-width: 800px;
           }
           table {
-            thead {
-              th:nth-of-type(1) {
-                width: 30%;
-              }
-              th:nth-of-type(2) {
-                width: 30%;
-              }
-              th:nth-of-type(3) {
-                width: 20%;
-              }
-              th:nth-of-type(4) {
-                width: 20%;
-              }
+            th:nth-of-type(1),
+            td:nth-of-type(1) {
+              width: 30%;
+            }
+            th:nth-of-type(2) {
+              width: 30%;
+            }
+            th:nth-of-type(3) {
+              width: 20%;
+            }
+            th:nth-of-type(4) {
+              width: 20%;
             }
           }
         `
@@ -478,6 +500,22 @@ export const TableStackedContainer = () => {
                   </Tr>
                 </tbody>
               </Table>
+
+              <Table fixed border>
+                <tbody>
+                  <Tr>
+                    <Th scope="rowgroup" rowSpan={2}>
+                      Row Header Group
+                    </Th>
+                    <Td>Row 1</Td>
+                    <Td>Row 1</Td>
+                  </Tr>
+                  <Tr>
+                    <Td>Row 2</Td>
+                    <Td>Row 2</Td>
+                  </Tr>
+                </tbody>
+              </Table>
             </TableContainer.Body>
 
             <TableContainer.Foot>
@@ -634,7 +672,7 @@ export const TableAccordion = () => (
 
           return (
             <>
-              <Button icon="bell" variant="secondary">
+              <Button top icon="bell" variant="secondary">
                 Ring the bell
               </Button>
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/demos.md
@@ -5,6 +5,7 @@ showTabs: true
 import {
 TableVariantBasic,
 TableVariantComplex,
+TableRowScopeOnly,
 TableVariantFixed,
 TableStackedContainer,
 TableContainerEmptyHeaderFooter,
@@ -30,8 +31,16 @@ TableAccordion,
 
 You can force a row to overwrite the automated odd/even counting by providing e.g. `variant="even"` to a `<Tr />`. You can use this in combination with `rowSpan`.
 
+**NB:** The table header in the first column needs to have `scope="row"`!
+
 <TableVariantComplex />
 
+### Row scope headers only
+
+This table has only `scope="row"` and `scope="rowgroup"` headers – without the default `scope="col"`.
+
+<TableRowScopeOnly />
+
 ### Fixed table
 
 <TableVariantFixed />

diff --git a/packages/dnb-eufemia/src/components/table/TableTh.tsx b/packages/dnb-eufemia/src/components/table/TableTh.tsx
@@ -53,8 +53,11 @@ export default function Th(
     ...props
   } = componentProps
 
-  const role = props.scope === 'row' ? 'rowheader' : 'columnheader'
-  const scope = props.scope === 'row' ? 'row' : 'col'
+  const role =
+    props.scope === 'row' || props.scope === 'rowgroup'
+      ? 'rowheader'
+      : 'columnheader'
+  const scope = props.scope === 'row' ? 'row' : props.scope || 'col'
   const ariaSort = sortable
     ? reversed
       ? 'descending'

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx
@@ -31,6 +31,13 @@ describe('Table screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match a row scope only table layout', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="table-row-scope-only"] .dnb-table',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match a fixed table layout', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="table-fixed"]',

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx
@@ -90,6 +90,23 @@ describe('TableTh', () => {
     expect(element.getAttribute('scope')).toBe('row')
   })
 
+  it('should set correct role when scope is rowgroup', () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableTh scope="rowgroup">th content</TableTh>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const element = document.querySelector('th')
+
+    expect(element.getAttribute('role')).toBe('rowheader')
+    expect(element.getAttribute('scope')).toBe('rowgroup')
+  })
+
   it('should set correct sortable class', () => {
     render(
       <table>