fix(Forms): align Value.SummaryList when Value.* has no label

packages/dnb-design-system-portal/src/docs/uilib/elements/lists/demos.mdx

@@ -11,6 +11,7 @@ import {
   OrderedListStylePositionExample,
   OrderedListOtherTypesExample,
   RemoveListExample,
+  DefinitionListHorizontalExampleWithoutDtValue,
 } from 'Docs/uilib/elements/lists/Examples'
 
 ## Demos

packages/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>
+)

packages/dnb-design-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>

packages/dnb-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()
+  })
 })

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()
 

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