aaronshaf / react-toggle

Elegant, accessible toggle component for React. Also a glorified checkbox.
http://aaronshaf.github.io/react-toggle/
MIT License
945 stars 159 forks source link

Add label to toggle's input for accessibility #186

Open FarisMarouane opened 1 year ago

FarisMarouane commented 1 year ago

When running Web vitals test on a web page using react-toggle, the test complains that there's no accompanying label to the input.

You could surround the Toggle component with a label tag, but it messes up with the styling.

I am talking of cases where you don't need any visible label (before the toggle for instance).

This PR just add a label tag, with the already existing css class "react-toggle-screenreader-only"; before the input element when an id prop is specified. This is done to improve the library accessibility.

Thank you !