feat(Forms): add labelSrOnly to Value.* components (#4319)

Based on #4311

---------

Co-authored-by: -l <anderslangseth@gmail.com>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/properties.mdx

@@ -8,4 +8,7 @@ import { SummaryListProperties } from '@dnb/eufemia/src/extensions/forms/Value/S
 
 ## Properties
 
-<PropertiesTable props={SummaryListProperties} />
+<PropertiesTable
+  props={SummaryListProperties}
+  omit={['label', 'labelSrOnly']}
+/>

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryList.tsx

@@ -7,7 +7,10 @@ import ValueProvider from '../Provider/ValueProvider'
 import { ValueProps } from '../../types'
 import { useVerifyChildren } from './useVerifyChildren'
 
-export type Props = Omit<DlAllProps, 'label' | 'children'> & {
+export type Props = Omit<
+  DlAllProps,
+  'label' | 'labelSrOnly' | 'children'
+> & {
   children: React.ReactNode
   transformLabel?: ValueProps['transformLabel']
   inheritVisibility?: ValueProps['inheritVisibility']

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx

@@ -26,6 +26,18 @@ describe('Field.SummaryList', () => {
     expect(document.querySelector('dt')).toHaveClass('dnb-sr-only')
   })
 
+  it('should set dnb-sr-only class when labelSrOnly is true', () => {
+    render(
+      <Value.SummaryList>
+        <Value.String label="Label" labelSrOnly showEmpty />
+      </Value.SummaryList>
+    )
+
+    const element = document.querySelector('dt')
+    expect(element).toHaveClass('dnb-sr-only')
+    expect(element).toHaveTextContent('Label')
+  })
+
   it('should warn when child is not a Value.* component', () => {
     const log = jest.spyOn(console, 'log').mockImplementation()
 

packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts

@@ -16,6 +16,11 @@ export const ValueProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
+  labelSrOnly: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional',
+  },
   transformLabel: {
     doc: 'Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.',
     type: 'function',

packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx

@@ -43,6 +43,7 @@ function ValueBlock(props: Props) {
   const {
     className,
     label: labelProp,
+    labelSrOnly,
     transformLabel = (label: Props['label']) => label,
     inline,
     maxWidth = props.composition ? props.maxWidth : 'large',
@@ -119,7 +120,7 @@ function ValueBlock(props: Props) {
             <Dt
               className={classnames(
                 'dnb-forms-value-block__label',
-                !label && 'dnb-sr-only'
+                (!label || labelSrOnly) && 'dnb-sr-only'
               )}
             >
               {label && <strong>{label}</strong>}
@@ -163,6 +164,7 @@ function ValueBlock(props: Props) {
             element="strong" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49
             className="dnb-forms-value-block__label"
             labelDirection={inline ? 'horizontal' : 'vertical'}
+            srOnly={labelSrOnly}
           >
             {label}
           </FormLabel>

packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.test.tsx

@@ -69,6 +69,18 @@ describe('ValueBlock', () => {
     expect(element).toHaveClass('dnb-forms-value-block--max-width-medium')
   })
 
+  it('should set dnb-sr-only class when labelSrOnly is true', () => {
+    render(
+      <ValueBlock label="Label" labelSrOnly>
+        content
+      </ValueBlock>
+    )
+
+    const element = document.querySelector('.dnb-form-label')
+    expect(element).toHaveClass('dnb-sr-only')
+    expect(element).toHaveTextContent('Label')
+  })
+
   it('should put children in a wrapper element "__content"', () => {
     render(<ValueBlock>content</ValueBlock>)
 

packages/dnb-eufemia/src/extensions/forms/types.ts

@@ -436,6 +436,9 @@ export interface ValueProps<Value = unknown>
    */
   label?: React.ReactNode
 
+  /** Use `true` to make the label only readable by screen readers. */
+  labelSrOnly?: boolean
+
   /**
    * Use `true` to inherit the label from a visible (rendered) field with the same path.
    */