Switch toggle state sometimes reported incorrectly

[afercia]

Looks like the switch toggle state is sometimes reported incorrectly. While, visually, everything looks OK, in some cases the actual state seems reported wrongly when using a screen reader. Testing with Safari + VoiceOver:

correct: "unchecked"

incorrect: "checked"

incorrect: "unchecked"

[afercia]

Can reproduce also with Firefox + NVDA:

[afercia]

I'm a bit surprised by how react treats the checked attribute, see facebook/react#7051 and how it is deviating from simple, basic HTML requirements. These kind of deviations can easily produce side effects, like in this example. Following these React patterns, it may appear explicitly setting a checked attribute is not really needed. Instead, omitting it causes a serious accessibility issue.
Looks like just explicitly adding a checked attribute, even if it's not printed in the DOM, fixes the issues because software, including screen readers, rely on its presence.

[youknowriad]

I think we should probably use the checked prop instead of the value (we're currently using). I suspect this would resolve the issue.

[afercia]

@youknowriad yep adding a checked attribute seems to fix it, see the PR.