fix(Dl): remove span as direct sibling for horizontal direction (#1625)

packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx

@@ -18,10 +18,12 @@ render(<Dl>
   <Dd>Description 1</Dd>
   <Dd>Description 2</Dd>
   <Dd>Description 3</Dd>
-  <dl className="dnb-dl">
-  <Dt>Sub Term</Dt>
-  <Dd>Sub Description</Dd>
-  </dl>
+  <Dd>
+    <Dl>
+      <Dt>Sub Term</Dt>
+      <Dd>Sub Description</Dd>
+    </Dl>
+  </Dd>
   </Dl>)
   `
     }

packages/dnb-eufemia/src/elements/Dl.tsx

@@ -37,9 +37,10 @@ Dl.Item = ({
   children,
 }: DlItemProps & React.AllHTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span className={classnames(className, 'dnb-dl__item')}>
+    <>
       {children}
-    </span>
+      <dd aria-hidden className={classnames(className, 'dnb-dl__item')} />
+    </>
   )
 }
 

packages/dnb-eufemia/src/elements/__tests__/Lists.screenshot.test.js

@@ -52,7 +52,7 @@ describe('List screenshot', () => {
 
   it('have to match dl list', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '40rem' },
+      style: { width: '35rem' },
       selector: '[data-visual-test="lists-dl-horizontal"]',
     })
     expect(screenshot).toMatchImageSnapshot()

packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * Dl Test
+ *
+ */
+
+import React from 'react'
+import { axeComponent } from '../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
+import Dl from '../Dl'
+import Dt from '../Dt'
+import Dd from '../Dd'
+
+describe('Dl', () => {
+  describe('in horizontal direction', () => {
+    it('should validate with ARIA rules', async () => {
+      const Component = render(
+        <Dl direction="horizontal">
+          <Dl.Item>
+            <Dt>Term</Dt>
+            <Dd>Description</Dd>
+          </Dl.Item>
+          <Dl.Item>
+            <Dt>Term</Dt>
+            <Dd>Description</Dd>
+          </Dl.Item>
+        </Dl>
+      )
+      expect(await axeComponent(Component)).toHaveNoViolations()
+    })
+  })
+
+  describe('with nested Dls', () => {
+    it('should validate with ARIA rules', async () => {
+      const Component = render(
+        <Dl>
+          <Dt>Term</Dt>
+          <Dd>Description</Dd>
+          <Dd>
+            <Dl>
+              <Dt>Term</Dt>
+              <Dd>Description</Dd>
+            </Dl>
+          </Dd>
+        </Dl>
+      )
+      expect(await axeComponent(Component)).toHaveNoViolations()
+    })
+  })
+})

packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx

@@ -139,8 +139,19 @@ export const ListSandbox = () => (
               <Dt>Term</Dt>
               <Dd>Description</Dd>
             </Dl.Item>
+            <Dl.Item>
+              <Dt>A term with several</Dt>
+              <Dd>
+                Description with several words lorem nulla mi posuere
+                cubilia vel vulputate
+              </Dd>
+            </Dl.Item>
             <Dl.Item>
               <Dt>A term with several words</Dt>
+              <Dd>Description</Dd>
+            </Dl.Item>
+            <Dl.Item>
+              <Dt>Term word</Dt>
               <Dd>
                 Description with several words lorem nulla mi posuere
                 cubilia vel vulputate

packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap

@@ -726,24 +726,29 @@ a.dnb-button {
   .dnb-dl dd {
     padding: 0;
     margin: 0.5rem 0 1rem; }
-  .dnb-dl > dl,
-  .dnb-dl:not([class*='dnb-space']) > dl {
+  .dnb-dl > dd > dl,
+  .dnb-dl:not([class*='dnb-space']) > dd > dl {
     margin-top: 1.5rem;
     margin-left: 2rem; }
   @media screen and (min-width: 40em) {
     .dnb-dl__direction--horizontal {
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       gap: 0.5rem; }
-      .dnb-dl__direction--horizontal dt,
+      .dnb-dl__direction--horizontal dt {
+        margin-right: 0.5rem;
+        max-width: 30%; }
       .dnb-dl__direction--horizontal dd {
+        width: calc(70% - 1.5rem); }
+      .dnb-dl__direction--horizontal dt,
+      .dnb-dl__direction--horizontal dd,
+      .dnb-dl__direction--horizontal dd ~ dt {
         margin-top: 0;
         margin-bottom: 0; }
-      .dnb-dl__direction--horizontal dt {
-        margin-right: 1rem;
-        max-width: 60ch; }
-    .dnb-dl__item {
-      display: flex; } }
+    .dnb-dl dd.dnb-dl__item {
+      width: 100%;
+      height: 0;
+      overflow: hidden; } }
 
 .dnb-spacing .dnb-ul:not([class*='dnb-space__top']),
 .dnb-spacing .dnb-ol:not([class*='dnb-space__top']) {

packages/dnb-eufemia/src/style/elements/lists.scss

@@ -130,8 +130,8 @@
     // In case we really want / need to have a indented definition content
     // margin-left: 2rem;
   }
-  & > dl,
-  &:not([class*='dnb-space']) > dl {
+  & > dd > dl,
+  &:not([class*='dnb-space']) > dd > dl {
     margin-top: 1.5rem;
     margin-left: 2rem;
   }
@@ -140,22 +140,29 @@
   @include allAbove(small) {
     &__direction--horizontal {
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
       gap: 0.5rem;
 
-      & dt,
+      & dt {
+        margin-right: 0.5rem;
+        max-width: 30%;
+      }
       & dd {
+        // width: calc(70% - 1.5rem); // minus margin-right and the gap
+        width: calc(70% - 1.5rem); // minus margin-right and the gap
+      }
+      & dt,
+      & dd,
+      & dd ~ dt {
         margin-top: 0;
         margin-bottom: 0;
       }
-      & dt {
-        margin-right: 1rem;
-        max-width: 60ch;
-      }
     }
 
-    &__item {
-      display: flex;
+    dd#{&}__item {
+      width: 100%;
+      height: 0;
+      overflow: hidden;
     }
   }
 }