fix(forms): Selection accessibility enhancement by using toggle buttons

Like PR #2781 but this time for Selection
dnbexperience · Oct 25, 2023 · dd055e6 · dd055e6
1 parent c60fe77
commit dd055e6
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 13 deletions.
diff --git a/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.d.ts b/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.d.ts
@@ -29,7 +29,7 @@ export interface ToggleButtonProps
   /**
    * <em>(required)</em> the text shown in the ToggleButton.
    */
-  text?: string;
+  text?: React.ReactNode;
   /**
    * Use either the `label` property or provide a custom one.
    */

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useContext, useCallback } from 'react'
 import {
-  Button,
+  ToggleButton,
   Dropdown,
   Radio,
   HelpButton,
@@ -14,6 +14,7 @@ import Option from '../Option'
 import { useDataValue } from '../../hooks'
 import { FormError, FieldProps, FieldHelpProps } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
+import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'
 
 interface IOption {
   title: string | React.ReactNode
@@ -153,17 +154,21 @@ function Selection(props: Props) {
       return (
         <FieldBlock {...fieldBlockProps}>
           <ButtonRow>
-            {options.map((option, i) => (
-              <Button
-                key={`option-${i}-${option.value}`}
-                id={id}
-                text={option.title}
-                on_click={option.handleSelect}
-                variant={option.value === value ? undefined : 'secondary'}
-                status={error ? 'error' : undefined}
-                disabled={disabled}
-              />
-            ))}
+            <ToggleButtonGroupContext.Provider
+              value={{
+                status: error ? 'error' : undefined,
+                disabled,
+              }}
+            >
+              {options.map((option, i) => (
+                <ToggleButton
+                  key={`option-${i}-${option.value}`}
+                  text={option.title}
+                  on_change={option.handleSelect}
+                  checked={option.value === value}
+                />
+              ))}
+            </ToggleButtonGroupContext.Provider>
           </ButtonRow>
         </FieldBlock>
       )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx
@@ -189,6 +189,57 @@ describe('Selection', () => {
         expect(radioButtons[1]).not.toBeChecked()
       })
     })
+
+    describe('button', () => {
+      it('has no selected value by defualt', () => {
+        render(
+          <Field.Selection variant="button">
+            <Field.Option value="foo">Fooo</Field.Option>
+            <Field.Option value="bar">Baar</Field.Option>
+          </Field.Selection>
+        )
+
+        const buttons = document.querySelectorAll('button')
+        expect(buttons.length).toEqual(2)
+        expect(buttons[0].getAttribute('aria-pressed')).toBe('false')
+        expect(buttons[1].getAttribute('aria-pressed')).toBe('false')
+      })
+
+      it('renders selected option', () => {
+        render(
+          <Field.Selection variant="button" value="bar">
+            <Field.Option value="foo">Fooo</Field.Option>
+            <Field.Option value="bar">Baar</Field.Option>
+          </Field.Selection>
+        )
+
+        const buttons = document.querySelectorAll('button')
+        expect(buttons.length).toEqual(2)
+        expect(buttons[0].getAttribute('aria-pressed')).toBe('false')
+        expect(buttons[1].getAttribute('aria-pressed')).toBe('true')
+      })
+
+      it('renders update selected option based on external value change', () => {
+        const { rerender } = render(
+          <Field.Selection variant="button" value="bar">
+            <Field.Option value="foo">Fooo</Field.Option>
+            <Field.Option value="bar">Baar</Field.Option>
+          </Field.Selection>
+        )
+
+        rerender(
+          <Field.Selection variant="button" value="foo">
+            <Field.Option value="foo">Fooo</Field.Option>
+            <Field.Option value="bar">Baar</Field.Option>
+          </Field.Selection>
+        )
+
+        const buttons = document.querySelectorAll('button')
+        expect(buttons.length).toEqual(2)
+        expect(buttons[0].getAttribute('aria-pressed')).toBe('true')
+        expect(buttons[1].getAttribute('aria-pressed')).toBe('false')
+      })
+    })
   })
 
   describe('event handlers', () => {