Skip to content

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

@aurooba

Description

@aurooba

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions