Bug#838178: tracker.debian.org: "action needed" details show only with Javascript enabled

On Mon, Sep 19, 2016 at 2:39 AM, Raphael Hertzog <hertzog@debian.org> wrote:

On Sun, 18 Sep 2016, Thomas Schmitt wrote:
> When i discussed the hint on debian-mentors i got the advise to file
> a bug because the detail information is supposed to be visible without
> toggle if the browser has no _javascript_ enabled.
> https://lists.debian.org/debian-mentors/2016/09/msg00305.html

Well, it's visible if you don't have CSS IIRC and as such in text browsers
that don't have _javascript_, it's visible. But if you apply CSS, you get
the hidden by default and you need _javascript_ to unhide the folded entry.

I'm not sure if we can add CSS that apply only when _javascript_ is disabled...

There are two technical things strategies worth considering here.

1. Use JS to modify the className of the body element

One technique for doing this is to use Javsacript, to add/remove a CSS class from the body of the page. For example:

https://web-design-weekly.com/snippets/add-class-to-body-f-_javascript_-is-enabled/

https://css-tricks.com/snippets/_javascript_/css-for-when-_javascript_-is-enabled/

You could have the page start out with

document.documentElement.className = "js";

</script>

And now your CSS rules can switch based on this body class.

2. Create show/hide behavior that relies on CSS, not _javascript_

For this particular case, a non-JS solution that fits the desired behavior might be something along these lines:

http://www.inserthtml.com/2012/04/css-click-states/

For a long discussion of other options that achieve the same thing, see: http://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery

If operating without JS is a design goal, but CSS is OK, then these might be a really good fit. If the site's UI needs can be implemented via CSS, then you can provide the dynamic interface you want without having to build two different interfaces or think about fallbacks. Going that route might allow you to skip the BODY class thing.

3. Conclusion

I'm hoping that this technical contribution is useful, but I know that I don't have the full context on what everyone here needs, so if not useful, then thanks for reading it anyway!

I sympathize with you Raphael when you say it's not the kind of work you find really useful/enjoyable. I surf the web with JS enabled. I think it'd be nice if the non-JS users could submit patches to make sure the app works in their environment.

I would find it supremely interesting to have a set of people get together and publish a set of technical suggestions/recommendations for Debian websites, with tricks like the above. That way, the people who want websites to work with JS disabled can do the education work once, and the people building the websites can look at a quick reference and write code that works once without surprises down the road. I can't commit time to that at the moment, but I would attend a sprint, for example.