Disable checkboxes (#154)

[kukimik]

This disables the checkboxes, as discussed in #154.

I decided to submit this solution, because it is simple, it is consistent with the tasks template.

The downside is that the checkboxes appear gray/less opaque/hardly visible etc., depending on your browser. Changing this is possible, but rather complicated, because checkboxes are displayed using platform-native styling (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling#styling_checkboxes_and_radio_buttons).

Another option is to make the checkboxes unclickable using JS (e.g. onclick="event.preventDefault()"), but it's not very intuitive (we have an enabled checkbox, but clicking it has no effect) and moreover I'd be concerned whether this follows the accessibility guidelines.

We can also replace the checkboxes with some svg icons (probably with some accessibility-related attributes included).

[srid]

Can you post some screenshots?

We can also replace the checkboxes with some svg icons

Feel free to prototype this if you are inclined. See comments from @j-steinbach (who is not fan of using checkboxes to style tasklists) at #181 (reply in thread)

[kukimik]

Feel free to prototype this if you are inclined.

I'll do it if I find some free time. Right now pretty much is happening in my private life.

[j-steinbach]

Also got lots of stuff going on, but I will try my hand on some more mockups. Probably the weekend.

[kukimik]

Here are the checkboxes made using the ballot box unicode characters, as proposed in #181 (comment).

Using the text-shadow CSS property we can add some fanciness.

Note that, as the checkbox is now a regular character, it can be selected and copied. This may be considered a feature or a misfeature (and, I think, can be avoided if needed).

However, in my opinion this does not look consistent with the rest of the site style.

[j-steinbach]

I think the simple un-ticked checkbox is fine (i mean, its a simple box..), but you are right, the ticked variant doesn't really fit. Sorry about that :/ I am also not a big fan of the styled variants.

I guess that means we should go back to the disabled html-checkboxes, maybe with a size of w-4 h-4?

[kukimik]

I've prepared two variants of SVG-based checkboxes.

---

---

---

The checkboxes are just <img> tags. In a text browser they're rendered as unicode ballot boxes ☐ ☑, because this is what I put inside the alt attribute (the screenshot below is from links, I've also tried it in lynx). Does anyone of you know if this is acceptable from the accessibility point of view?

[srid]

@kukimik Is there a live demo of that somewhere? Just want to test in different OS, display resolutions (I have 5k monitor, for instance).

[kukimik]

https://kukimik.github.io/out1/index.html
https://kukimik.github.io/out2/index.html

Unfortunately there is some problem with fonts loading, so I pushed the prototype in the current PR. You just need to comment out one of the variants in pandoc.tpl to try it out.

Keep in mind that this is just a prototype, prepared to check whether the appearance of the checkboxes is acceptable.

The mb-1 is for setting the vertical alignment of the image. This looks like a hack to me, but I have little experience in the frontend, so it may as well be a standard approach... (Tailwind's vertical-align didn't work for me.) Perhaps it may fail in some configurations?

As the image is going to be used in different places (pandoc.tpl, the task index), it should probably be put in a separate .svg file instead of a data URI.

[srid]

@kukimik out1 looks good to me, let's go with that. Is there a way to prevent checkbox from being selected/copied along with text? The current version already does that.

No need to create a separate .svg file; you can just create a separate .tpl file -- checked.tpl and unchecked.tpl -- and then "include" that in the places where checkboxes are used.

[kukimik]

Is there a way to prevent checkbox from being selected/copied along with text? The current version already does that.

I switched to inline SVG and used the <desc> tag to provide the textual description of the image (which in this case is a single unicode ballot box character). This way:

• the checkboxes are not selected/copied;
• some description of the image is provided for screen readers;
• text-based browsers (at least links and lynx) display the unicode ballot box.

This is an abuse (as far as I know <title> should contain a short description of the image, and <desc> should contain a longer one), but:

• links does not display the content of the <title> tag (probably it recognizes it as a duplicate title tag for the whole document and simply ignores it);
• the content of the <title> tag is displayed as a tooltip by many modern browsers (e.g. Firefox), which in this case looks strange.

I don't know how to handle this better.

you can just create a separate .tpl file -- checked.tpl and unchecked.tpl -- and then "include" that in the places where checkboxes are used.

Nice!

[kukimik]

I just parametrized checkbox-checked.tpl and checkbox-unchecked.tpl in the latest force push, so that they can accept content. I think it looks better this way.

@srid Is there something more to be done here?