search

digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
68 stars 34 forks source link

feat(switch): Accessibility update #2073

Closed poi33 closed 1 month ago

poi33 commented 1 month ago

Fix for #2057

Tested with NVDA for readout for screen readers.

Before code changes: "clickable (label text) check box not checked"

After code changes: "clickable (label text) switch off"

For a standard switch this would be an improvement. (Not part of a form submission. A toggle switch on a website)

For the design system usecase: "A choice between two options" and being a part of forms I think the checkbox (eg code before this pull request) conveys how to use the component to screen readers.

poi33 commented 1 month ago

@Barsnes what about the role="switch" having a confusing readout for a form submission input? If its part of a form I would suggest to not use the changes.

mimarz commented 1 month ago

@Barsnes what about the role="switch" having a confusing readout for a form submission input? If its part of a form I would suggest to not use the changes.

hmm, I haven't had a chance to test this, but our guidelines you should use Checkbox for forms and Switch for more "settings" and simple toggle actions in a UI.

I see react-aria also use this role, so I suggest lets go for it!

poi33 commented 1 month ago

Closing this, as the switch will need a bigger refactor if we don't want to use it for form submissions.