Merge pull request #1496 from dhis2/LIBS-572/switch-accessibility

feat(switch): accessibility improvements for the switch component
dhis2 · Jun 3, 2024 · 6d499cc · 6d499cc
2 parents d8aea01 + bf9927a
commit 6d499cc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/components/switch/src/switch/__tests__/switch.test.js b/components/switch/src/switch/__tests__/switch.test.js
@@ -28,4 +28,17 @@ describe('<Switch />', () => {
 
         expect(onKeyDown).toHaveBeenCalledTimes(1)
     })
+
+    it('renders the switch with aria label', () => {
+        const ariaLabel = 'test switch'
+        render(
+            <Switch
+                aria-label={ariaLabel}
+                name="foo"
+                value="bar"
+                checked={false}
+            />
+        )
+        expect(screen.getAllByLabelText(ariaLabel)).toHaveLength(1)
+    })
 })
diff --git a/components/switch/src/switch/switch.js b/components/switch/src/switch/switch.js
@@ -47,7 +47,7 @@ class Switch extends Component {
 
     render() {
         const {
-            ariaLabel,
+            'aria-label': ariaLabel,
             checked,
             className,
             disabled,
@@ -172,7 +172,7 @@ Switch.defaultProps = {
 
 Switch.propTypes = {
     /** Sets an aria-label attribute on the input */
-    ariaLabel: PropTypes.string,
+    'aria-label': PropTypes.string,
     checked: PropTypes.bool,
     className: PropTypes.string,
     dataTest: PropTypes.string,

diff --git a/components/switch/types/index.d.ts b/components/switch/types/index.d.ts
@@ -23,7 +23,7 @@ export interface SwitchProps {
     /**
      * Sets an aria-label attribute on the input
      */
-    ariaLabel?: string
+    'aria-label'?: string
     checked?: boolean
     className?: string
     dataTest?: string