Add role="switch"

[thom-nic]

Tools like Cypress don't play well with react-toggle because while the input exists, Cypress can tell that it is hidden. So you have to cy.get('input', {force: true}) to select it.

By adding role="switch" aria-checked="checked" it is possible to treat the visible div as the interactive widget. When using testing-library we can then do things like

cy.findByRole('switch', { label: "lights" }).should('be.checked')

As a knock on effect, I think other attributes also should be moved to the outer div as well:

• aria-label
• aria-labelledby
• aria-disabled

Finally, the input should no longer be needed for the screen reader, because the screen reader should understand that the div is the widget. The only purpose that the input serves (I think) would be so it could still be submitted as a form.