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:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user