Closed tremby closed 4 years ago
Well. I now find out that readonly
doesn't actually do anything on checkboxes.
A note on the article on MDN's readonly section says
Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
I don't see how this is correct, given that a read-only control still submits its value (so a checked, read-only checkbox ought to submit its value) whereas a disabled one does not. Still, that's how it is. There's discussion here: https://github.com/whatwg/html/issues/2311
This likely makes this PR moot.
The HTML input element's
readonly
attribute is different from thedisabled
attribute: a read-only control and its contents will still be visible (to everyone, including screen reader users) and will still submit its value along with the form.I wasn't sure how to style this. I decided at least for now to style it the same as "disabled" in terms of transparency and the "not-allowed" cursor, but still allow focus etc.
This PR is based on https://github.com/aaronshaf/react-toggle/pull/154 since it touches some of the same code. As a result, the same gotcha I mentioned in that PR is present here: the tests for not being able to change a toggle via touch when it's disabled or read-only pass when the code preventing this is disabled, i.e. they will not correctly detect a regression.