ocaml-forester
www.forester-notes.org
static-site-generator blogging hypertext ocaml
Star 8
Fork 2
Watch

Don't use \<details\> tag for collapsible sections #40

Closed kento.tngl.sh
Closed opened by kento.tngl.sh

This is an accessibility faux-pas, so we should do this with some javascript instead.

jonmsterling.com

I'm with you on this. Ideally the structure of a section could be something like

<section>
  <header>
    <h#X>foo</h#X>
  </header>
  <div class="mainmatter">
    <!-- ... --> 
  </div>
</section>

and the expanding/collapsing behaviour would be handled by JavaScript, possibly by dynamically setting and unsetting a collapsed class of the section>div.body element. The CSS would just hide anything that is collapsed.

I think this would result in pretty graceful behaviour for non-JS-enabled viewers: when the transclusion is set to be collapsed by default (using \tranclude/expanded), in the absence of JS it would just be not expandable at all, which is (to me) a perfectly acceptable behaviour.

jonmsterling.com

Did you try this out? It is a little unusual 😉

Image

  1. The headers are a little crazy
  2. The collapsing doesn't work at all. Everything is always expanded and there is no way to collapse anything.
jonmsterling.com

Keep in mind, too, that we'll need to change the CSS and we need to do it in a way that doesn't impact the XML theme, so now is a good time to split the stylesheets I think.

kento.tngl.sh

Hang on, let me check if I forgot to track some changes, this definitely worked.

kento.tngl.sh

I forgot to track the changes to the stylesheet lmao. I'll split the stylesheet as you suggest.

kento.tngl.sh
jonmsterling.com

This styles are fixed, but expand/collapse still doesn't do anything.

jonmsterling.com

OK, it's working now !!! Thanks so much 😃

There's just one minor tweak I might like to make. Currently the section>header has display:inline, which means that you have to literally click the text to toggle the state, vs. being able to do so by clicking anywhere in it. I think maybe it might be a good idea to have it be displayed as a block. What do you think?

kento.tngl.sh

I see you already fixed this, so closing 😉

Sign up or Sign in to add to the discussion.