The switch accessibility can be improved

[poi33]

Description of the bug

• The switch component will read as a normal checkbox for user agents that don't render the page. The switch role might improve it?
• I don't think its possible to check the the current state of the switch for the browser. Can an aria attribute of checked help here?
• It has no label for being readonly while the component can be in that state. The aria-readonly could mark it correctly?

<input
    className={`fds-switch__input`}
    ref={ref}
    {...omit(['size', 'error'], rest)}
    {...inputProps}
/>

Steps To Reproduce

Render a switch component. Inspect it with a accessibility tool

The switch reads as a checkbox with the name "switch"

Additional Information

No response

[mimarz]

Good catch! We should fix this. Would you delight us with a PR? :D

[poi33]

After creating and better understanding the Switch component. I don't think any of these fields would improve the switch.

If its an option of two choices in a form submission, the aria-labels would not convey how to better use the part in a better way.

I think the part will be used (as I initially thought) for a functional switch on a page to toggle states (outside form). Like a dark - light theme toggler. This use case would require changes mentioned in this issue.

[poi33]

https://github.com/digdir/designsystemet/pull/2073#issuecomment-2140347060.

If we have a checkbox for forms and a switch for more settings simple toggles there should be a bigger refactor of the switch component. Like switching away from using an input element.

This is probably part of a bigger refactoring and the accessibility mentioned here should be of the refactored switch. Closing this as there might be an bigger refactor needed for the switch component.