Use details tag to show/hide a draft version TOC

We were using JavaScript to show/hide the Table of Contents.

In my humble opinion, the <details> tag has a few shortcomings [1][2],
which means we should be careful about when to use it.

IMHO a Table of Contents is a good candidate for this tag because it's a
very common pattern to add a show/hide behavior for it, even if using it
means the "navigation" role (which we are *not* using anyway) wouldn't
be identified correctly.

I'm adding a <details> tag to the comments section as well for
consistency and in order to simplify the code. I'm not sure this is as
good an application of the <details> tag, though, but then again I'm not
sure about the interface we use to show/hide the comments (and this
feeling is increased by the fact that we use a different interface on
small screens). If we decide to change the interface in the future, we
might consider using the <details> tag for the Table of Contents but not
for the comments.

Since the <details> tag is not supported on Internet Explorer, I'm
only adding styles to this tag using the `:not([open])` option. On
Internet Explorer <details> will always be opened and so these styles
will be ignored.

[1] https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html
[2] https://daverupert.com/2019/12/why-details-is-not-an-accordion/
This commit is contained in:
Javi Martín
2020-11-14 12:50:30 +01:00
parent 220b1de01e
commit 41e5ddbcdf
5 changed files with 57 additions and 110 deletions

View File

@@ -139,7 +139,6 @@ var initialize_modules = function() {
App.MarkdownEditor.initialize();
App.HTMLEditor.initialize();
App.LegislationAdmin.initialize();
App.LegislationAllegations.initialize();
App.Legislation.initialize();
if ($(".legislation-annotatable").length) {
App.LegislationAnnotatable.initialize();