fix(forms): enhance accessibility by using toggle buttons (#2781)

dnbexperience · Oct 25, 2023 · aee0113 · aee0113
1 parent cbf1cb9
commit aee0113
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 40 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx
@@ -219,7 +219,28 @@ describe('Field.Boolean', () => {
   describe('variant: buttons', () => {
     it('renders label', () => {
       render(<Field.Boolean variant="buttons" label="Boolean label" />)
-      expect(screen.getByLabelText('Boolean label')).toBeInTheDocument()
+      expect(screen.getByText('Boolean label')).toBeInTheDocument()
+    })
+
+    it('has no selected value by defualt', () => {
+      render(<Field.Boolean variant="buttons" />)
+      const buttons = document.querySelectorAll('button')
+      expect(buttons[0].getAttribute('aria-pressed')).toBe('false')
+      expect(buttons[1].getAttribute('aria-pressed')).toBe('false')
+    })
+
+    it('has "false" selected', () => {
+      render(<Field.Boolean variant="buttons" value={false} />)
+      const buttons = document.querySelectorAll('button')
+      expect(buttons[0].getAttribute('aria-pressed')).toBe('false')
+      expect(buttons[1].getAttribute('aria-pressed')).toBe('true')
+    })
+
+    it('has "true" selected', () => {
+      render(<Field.Boolean variant="buttons" value={true} />)
+      const buttons = document.querySelectorAll('button')
+      expect(buttons[0].getAttribute('aria-pressed')).toBe('true')
+      expect(buttons[1].getAttribute('aria-pressed')).toBe('false')
     })
 
     it('renders error', () => {
@@ -241,8 +262,10 @@ describe('Field.Boolean', () => {
           error={new Error('This is what went wrong')}
         />
       )
-      const element = document.querySelector('.dnb-button')
-      expect(element.className).toContain('dnb-button__status--error')
+      const element = document.querySelector('.dnb-toggle-button')
+      expect(element.className).toContain(
+        'dnb-toggle-button__status--error'
+      )
     })
 
     it('should show error when no value is given', () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
@@ -1,17 +1,13 @@
 import React, { useContext, useCallback } from 'react'
-import {
-  Checkbox,
-  ToggleButton,
-  Button,
-  Space,
-} from '../../../../components'
+import { Checkbox, ToggleButton } from '../../../../components'
 import classnames from 'classnames'
 import ButtonRow from '../../Form/ButtonRow'
 import FieldBlock from '../../FieldBlock'
 import { useDataValue } from '../../hooks'
 import { FieldProps } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import SharedContext from '../../../../shared/Context'
+import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'
 
 export type Props = FieldProps<unknown> & {
   valueOn: unknown
@@ -49,18 +45,13 @@ function Toggle(props: Props) {
     },
     [handleChange, valueOn, valueOff]
   )
-
-  const setOn = useCallback(() => {
-    if (value !== valueOn) {
-      handleChange?.(valueOn)
-    }
-  }, [handleChange, value, valueOn])
-
-  const setOff = useCallback(() => {
-    if (value !== valueOff) {
-      handleChange?.(valueOff)
-    }
-  }, [handleChange, value, valueOff])
+  const handleToggleChange = useCallback(
+    ({ value }) => {
+      console.log('value', value)
+      handleChange?.(value === 'on' ? valueOn : valueOff)
+    },
+    [handleChange, valueOn, valueOff]
+  )
 
   const cn = classnames('dnb-forms-field-toggle', className)
 
@@ -121,26 +112,30 @@ function Toggle(props: Props) {
       )
     case 'buttons':
       return (
-        <FieldBlock {...fieldBlockProps}>
-          <ButtonRow>
-            <Button
-              id={id}
-              text={textOn ?? sharedContext?.translation.Forms.booleanYes}
-              on_click={setOn}
-              variant={isOn ? undefined : 'secondary'}
-              status={error ? 'error' : undefined}
-              disabled={disabled}
-            />
-            <Button
-              id={id}
-              text={textOff ?? sharedContext?.translation.Forms.booleanNo}
-              on_click={setOff}
-              variant={isOff ? undefined : 'secondary'}
-              disabled={disabled}
-              status={error ? 'error' : undefined}
-            />
+        <FieldBlock {...fieldBlockProps} asFieldset>
+          <ButtonRow bottom="x-small">
+            <ToggleButtonGroupContext.Provider
+              value={{
+                value: isOn ? 'on' : isOff ? 'off' : undefined,
+                onChange: handleToggleChange,
+                status: error ? 'error' : undefined,
+                disabled,
+              }}
+            >
+              <ToggleButton
+                text={
+                  textOn ?? sharedContext?.translation.Forms.booleanYes
+                }
+                value="on"
+              />
+              <ToggleButton
+                text={
+                  textOff ?? sharedContext?.translation.Forms.booleanNo
+                }
+                value="off"
+              />
+            </ToggleButtonGroupContext.Provider>
           </ButtonRow>
-          <Space bottom="x-small" />
         </FieldBlock>
       )
     case 'checkbox-button':