fix: use switch role for form toggle component, not checkbox

nl-design-system · Oct 4, 2021 · 73cdea3 · 73cdea3
1 parent d0c106d
commit 73cdea3
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/components/form-toggle/bem.js b/components/form-toggle/bem.js
@@ -20,7 +20,7 @@ export const FormToggle = ({ checked = false, disabled = false, hover = false, f
     disabled && 'utrecht-form-toggle--disabled',
     focus && 'utrecht-form-toggle--focus',
     hover && 'utrecht-form-toggle--hover',
-  )}" role="checkbox" tabindex="0"${checked ? ' aria-checked="true"' : ''}${disabled ? ' aria-disabled="true"' : ''}>
+  )}" role="switch" tabindex="0"${checked ? ' aria-checked="true"' : ''}${disabled ? ' aria-disabled="true"' : ''}>
   <div class="${clsx(
     'utrecht-form-toggle__track',
     checked && 'utrecht-form-toggle__track--checked',

diff --git a/components/form-toggle/stencil.tsx b/components/form-toggle/stencil.tsx
@@ -57,6 +57,7 @@ export class FormToggle {
           disabled && "utrecht-form-toggle--disabled"
         )}
         tabIndex={disabled ? null : 0}
+        role="switch"
         aria-disabled={disabled}
         onClick={handleClick}
         onKeyPress={handleKeyPress}