fix(Table.Accordion): prevent accordion from opening on label click (#…

…3228)
dnbexperience · Jan 17, 2024 · ee5014f · ee5014f
1 parent 1791fe8
commit ee5014f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/dnb-eufemia/src/components/table/TableAccordion.tsx b/packages/dnb-eufemia/src/components/table/TableAccordion.tsx
@@ -171,6 +171,7 @@ export function useTableAccordion({
        * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
        */
       target.tagName !== 'INPUT' &&
+      target.tagName !== 'LABEL' &&
       /**
        * Let the user select text,
        * without triggering the accordion.

diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableAccordion.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableAccordion.test.tsx
@@ -311,7 +311,10 @@ describe('TableAccordion', () => {
         <tbody>
           <Tr>
             <Td>
-              <input type="text" />
+              <label>
+                Label
+                <input type="text" />
+              </label>
               <button>button</button>
             </Td>
             <Td.AccordionContent>accordion content</Td.AccordionContent>
@@ -321,6 +324,7 @@ describe('TableAccordion', () => {
     )
 
     const trElement = document.querySelector('tr')
+    const labelElement = document.querySelector('label')
     const inputElem = trElement.querySelector('input')
     const buttonElem = trElement.querySelector('button')
 
@@ -350,6 +354,12 @@ describe('TableAccordion', () => {
       'dnb-table__tr--expanded'
     )
 
+    fireEvent.click(labelElement)
+
+    expect(Array.from(trElement.classList)).not.toContain(
+      'dnb-table__tr--expanded'
+    )
+
     fireEvent.click(buttonElem)
 
     expect(Array.from(trElement.classList)).toContain(
@@ -390,6 +400,22 @@ describe('TableAccordion', () => {
       'dnb-table__tr--expanded'
     )
 
+    jest
+      .spyOn(document, 'activeElement', 'get')
+      .mockReturnValue(labelElement)
+
+    fireEvent.keyDown(labelElement, { keyCode: 13 }) // enter
+
+    expect(Array.from(trElement.classList)).not.toContain(
+      'dnb-table__tr--expanded'
+    )
+
+    fireEvent.keyDown(labelElement, { keyCode: 32 }) // space
+
+    expect(Array.from(trElement.classList)).not.toContain(
+      'dnb-table__tr--expanded'
+    )
+
     jest.spyOn(document, 'activeElement', 'get').mockReturnValue(null)
   })