superlist icon indicating copy to clipboard operation
superlist copied to clipboard

Proposal: Super Lists should support List Titles with <figcaption>

Open aurooba opened this issue 3 years ago • 0 comments

I've been thinking about List Titles, and how semantically there is no real way currently to add one. You just add a heading or something above the list, but it's not directly connected to the list itself.

While doing research on the topic, I came across this StackOverflow comment that suggests using <figure> and <figcaption> for this purpose:

Example from the comment itself:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

The Mozilla Developer Docs reference about <figure> says the following (emphasis mine):

Usage notes

  • Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
  • A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure's caption.

And we know from the definition <figcaption> that it "represents a caption or legend describing the rest of the contents of its parent <figure> element."

So, this leads me to think that:

  • if a list doesn't have a title, then it doesn't necessarily need to be wrapped in <figure>
  • if a list does have a title, it should be wrapped in <figure> and include a <figcaption> so it can be interpreted as a section correctly – this bodes well for accessibility as well as semantic accuracy.

This is a relatively easy refactor to do, but now that the plugin is live, it must be done in such a way as to not break any existing Super Lists in use.

aurooba avatar Feb 02 '22 22:02 aurooba