Use dnb-sr-only to hide the dt

dnbexperience · Nov 21, 2024 · 0f564d8 · 0f564d8
1 parent eeb85e2
commit 0f564d8
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 57 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx
@@ -52,42 +52,6 @@ export const DefinitionListHorizontalExample = () => (
   </ComponentBox>
 )
 
-export const DefinitionListHorizontalExampleWithoutDtValue = () => (
-  <ComponentBox
-    hideCode
-    data-visual-test="lists-dl-horizontal-without-dt-value"
-  >
-    <Dl layout="horizontal">
-      <Dl.Item>
-        <Dt></Dt>
-        <Dd>Description 1</Dd>
-      </Dl.Item>
-      <Dl.Item>
-        <Dt>Term 2</Dt>
-        <Dd>Description 2</Dd>
-      </Dl.Item>
-      <Dl.Item>
-        <Dt></Dt>
-        <Dd>Description 3</Dd>
-      </Dl.Item>
-      <Dl.Item>
-        <Dt>
-          A term with several words lorem dolor sit amet consectetur
-          adipiscing
-        </Dt>
-        <Dd>
-          Description with several words lorem nulla mi posuere cubilia vel
-          vulputate
-        </Dd>
-      </Dl.Item>
-      <Dl.Item>
-        <Dt></Dt>
-        <Dd>Description 4</Dd>
-      </Dl.Item>
-    </Dl>
-  </ComponentBox>
-)
-
 export const DefinitionListGridExample = () => (
   <ComponentBox hideCode data-visual-test="lists-dl-grid">
     <Dl layout="grid">

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/demos.mdx
@@ -73,7 +73,3 @@ The term and description are aligned on the bottom.
 ### Remove list styles
 
 <RemoveListExample />
-
-<VisibleWhenVisualTest>
-  <DefinitionListHorizontalExampleWithoutDtValue />
-</VisibleWhenVisualTest>
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx
@@ -147,3 +147,13 @@ export function InheritLabel() {
     </ComponentBox>
   )
 }
+
+export const HorizontalLayoutWithoutLabel = () => (
+  <ComponentBox data-visual-test="forms-value-summary-horizontal-empty-label">
+    <Value.SummaryList layout="horizontal">
+      <Value.String value="foo" label="Foo" />
+      <Value.String value="bar" />
+      <Value.String value="baz" label="Baz" />
+    </Value.SummaryList>
+  </ComponentBox>
+)
diff --git a/...esign-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx b/...esign-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx
@@ -31,3 +31,7 @@ Using [Value.Composition](/uilib/extensions/forms/Value/Composition/) to combine
 ### Inherit label
 
 <Examples.InheritLabel />
+
+<VisibleWhenVisualTest>
+  <Examples.HorizontalLayoutWithoutLabel />
+</VisibleWhenVisualTest>
diff --git a/packages/dnb-eufemia/src/elements/lists/__tests__/Lists.screenshot.test.ts b/packages/dnb-eufemia/src/elements/lists/__tests__/Lists.screenshot.test.ts
@@ -71,15 +71,6 @@ describe('List', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
-
-  it('have to match dl horizontal list without dt value', async () => {
-    const screenshot = await makeScreenshot({
-      style: { width: '35rem' },
-      selector:
-        '[data-visual-test="lists-dl-horizontal-without-dt-value"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 })
 
 describe('Lists with skeleton', () => {

diff --git a/...age_snapshots__/list-have-to-match-dl-horizontal-list-without-dt-value.snap.png b/...age_snapshots__/list-have-to-match-dl-horizontal-list-without-dt-value.snap.png
diff --git a/packages/dnb-eufemia/src/elements/lists/style/lists-mixins.scss b/packages/dnb-eufemia/src/elements/lists/style/lists-mixins.scss
@@ -162,10 +162,6 @@
         margin-top: 0;
         margin-right: calc(var(--column-gap) - 0.5rem);
         max-width: var(--dt-max-width);
-
-        &:empty {
-          margin-right: 0;
-        }
       }
 
       & dd {

diff --git a/...b-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts b/...b-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts
@@ -35,4 +35,13 @@ describe('Field.SummaryList', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match without a label', async () => {
+    const screenshot = await makeScreenshot({
+      style: { width: '6rem' },
+      selector:
+        '[data-visual-test="forms-value-summary-horizontal-empty-label"] ',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx
@@ -17,6 +17,15 @@ describe('Field.SummaryList', () => {
     expect(element.getAttribute('aria-label')).toBe('Aria Label')
   })
 
+  it('should have dnb-sr-only class when no label is given', () => {
+    render(
+      <SummaryList>
+        <Value.String value="Value" />
+      </SummaryList>
+    )
+    expect(document.querySelector('dt')).toHaveClass('dnb-sr-only')
+  })
+
   it('should warn when child is not a Value.* component', () => {
     const log = jest.spyOn(console, 'log').mockImplementation()
 

diff --git a/...s__/__image_snapshots__/fieldsummarylist-have-to-match-without-a-label.snap.png b/...s__/__image_snapshots__/fieldsummarylist-have-to-match-without-a-label.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
@@ -116,7 +116,12 @@ function ValueBlock(props: Props) {
           value={{ ...summaryListContext, isNested: true }}
         >
           <Item>
-            <Dt className="dnb-forms-value-block__label">
+            <Dt
+              className={classnames(
+                'dnb-forms-value-block__label',
+                !label && 'dnb-sr-only'
+              )}
+            >
               {label && <strong>{label}</strong>}
             </Dt>
             <Dd

diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
@@ -497,9 +497,6 @@ del .dnb-code {
     margin-right: calc(var(--column-gap) - 0.5rem);
     max-width: var(--dt-max-width);
   }
-  .dnb-dl__layout--horizontal dt:empty {
-    margin-right: 0;
-  }
   .dnb-dl__layout--horizontal dd {
     width: var(--dd-max-width);
     align-self: end;