Fluentui: Need a way to override Toggle components' role attribute

[ArpitaGhattuMicrosoft]

• Our accessibility requires the toggle button to say "checked" or "unchecked" on "On" and "Off" respectively, just like the behavior we get when role="checkbox",

• For this purpose, it would be convenient if the role attribute of Toggle component(which always defaults to role="switch") is allowed to be overridden, so that any team can change this component behavior according to the features accessibility need.

Actual behavior:

role="switch" attribute is added by default

Expected behavior:

role attribute should be allowed to be overridden

[marygans]

Hi @ArpitaGhattuMicrosoft ! Thank you for filing this. I think this is a reasonable request. @phkuo what do you think about this?

[phkuo]

Yep that sounds totally reasonable.

[philipzloh]

I'll take the contrarian view here and ask why. If a team needs a checkbox, they should use a checkbox?

[phkuo]

@philipzloh by that argument we shouldn't have a toggle component, and only provide a checkbox. Both fulfill the same function of providing a binary input. So the answer to your question is that it's a matter of aesthetics. But we need to make sure aesthetics does not interfere with functionality (in this case for accessibility software).

I AM curious, though, as to why "switch" is insufficient and what we lose for having it.

[philipzloh]

@phkuo Uh, what?

Swtiches are Switches and Checkboxes are Checkboxes

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role

It's not just a matter of aesthetics; the way a control looks provides the affordance to the user for how to interact with the control. Anytime we mess with what roles mean, we destroy the user's ability to have a proper mental model of how to interact with the page. Not just for users who can't see the screen -- even sighted users have a right to usability.

[phkuo]

@philipzloh Sorry, I misunderstood your question. I took it to mean "if they want a binary input, they should always use a checkbox" so I was arguing against that. So I agree we should have both toggles and checkboxes.

[khmakoto]

@ArpitaGhattuMicrosoft I think there is no need for you to change the role. If you need to have the screenreader say that info you can just specify that via the ariaLabel prop. I've written an example of this in this codepen which would hopefully help you.

Let me know if there is anything else I can do to help!

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!