Use CSS instead of javascript to hide / unhide sensitive content

[ghost]

I notice that mastodon is blocking some content behind javascripts.

css-toggle-box.txt

Attached is a way to do it with just CSS and no Javascript. I didn't figure out this specific way, it turned up on a forum a month or so ago.

Reducing JS use decreases complexity and maintenance requirements and increases accessibility, performance, and security.

[daprice]

Wouldn't it be better to use the <details> element with a polyfill for unsupported browers? This would be semantically correct unlike <input>s and <span>s (and if we're following separation of concerns, content warnings should be something that applies to the actual content, not just in styling), and works without JS in most browsers. Even if the browser doesn't support <details> and has js disabled (so it wouldn't run the polyfill), the content will still at least be readable.

[blackle]

If you have javascript disabled, mastodon's web interface won't work at all since it's heavily dependent on it to function, so supporting such browsers is far out of scope. I appreciate the effort to implement this using css and checkboxes, but the fact of the matter is the code we already have is much more compact and easier to read when implemented in JS.

[ghost]

Obviously, ridding mastadon's web interface from dependence on JS can't happen overnight as it needs to happen in many smaller steps. This would be one step.

Regardless, the details HTML element could still be used in the mean time for the hidden content, even in conjunction with JS. Then as the element gains more support, that particular bit of JS can become deprecated thus saving on code maintenance. With code less is more.

[jpdevries]

The "using a checkbox as as accordion pattern" is a neat example of something you can do without JS and with some clever CSS but it isn't very semantic, or accessible, without ARIA roles to convey that it isn't really acting as a checkbox but more as a toggle button that controls the visibility of another element.

<details> is nice, have to wait until React v16 to listen to the onToggle event.