Contrib.social

Showcase Figure/Figcaption together and with image

Open on Drupal.org →
Created on 21 August 2020, almost 5 years ago
Updated 3 October 2024, 9 months ago

Problem/Motivation

As it is now, Styleguide by default shows the HTML tags <figure> and <figcaption> in isolation (as if they were inline tags, like <strong>) and with text:

    $items['figcaption'] = array(
      'title' => $this->t('Figcaption'),
      'content' => [
        '#type' => 'inline_template',
        '#template' => '{{ pre }} <figcaption>{{ figcaption }}</figcaption> {{ post }}.',
        '#context' => [
          'pre' => $this->generator->words(3, 'ucfirst'),
          'figcaption' => $this->generator->words(3),
          'post' => $this->generator->words(4),
        ],
      ],
    );
    $items['figure'] = array(
      'title' => $this->t('Figure'),
      'content' => [
        '#type' => 'inline_template',
        '#template' => '{{ pre }} <figure>{{ figure }}</figure> {{ post }}.',
        '#context' => [
          'pre' => $this->generator->words(3, 'ucfirst'),
          'figure' => $this->generator->words(3),
          'post' => $this->generator->words(4),
        ],
      ],
    );

I think this is not the best outcome, since those tags are required to be used together and <figure> is used to hold an image-like element, not text.

For reference, MDN states that

"The HTML or Figure Caption element represents a caption or legend describing the rest of the contents of its parent element." (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)

And;

Usually a 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.(link)

As a result, the Styleguide is failing to provide with an accurate representation of the HTML element as it will be used in real code.

Proposed resolution

Merge both figure and figcaption under a single element, since they can't be found in isolation and <figcaption> is always the child of a <figure>.

Change the content of <figure> to include an image instead of text.

✨ Feature request
Status

Needs review

Version

1.0

Component

Code

Created by

🇪🇸Spain idiaz.roncero Madrid

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • First commit to issue fork.
  • Comment 9 months ago →
    🇺🇸United States dcam

    dcam → changed the visibility of the branch 3166502-showcase-figurefigcaption-together to hidden.

  • Comment 9 months ago →
    🇺🇸United States dcam
  • Merge request !21Merge the figure and figcaption items → (Open) created by dcam
  • Pipeline finished with Success
    9 months ago
    Total: 177s
    #300278
  • Comment 9 months ago →
    🇺🇸United States dcam

    +1 for this. I converted the patch in #4 to an MR. There's no need to give me credit for doing that.

    My accessibility validator was also complaining about the <figcaption> outside of a <figure> element because it doesn't like invalid HTML. To be honest, this was going to be one of the things that I let go, but then I found this open issue. Applying the changes stopped that error. The patch looks good. The resulting HTML looks good. I don't know that there's much more to say about it. RTBC from me.

    I'm reclassifying this as a bug report with normal priority since this causes an HTML validation error that may impact things like automatic scanning tools.

  • Status changed to RTBC 2 months ago
  • Comment 2 months ago →
    System Message
    • dcam → committed 94200565 on 2.x 
      Issue #3166502 by idiaz.roncero, orodicio: Showcase Figure/Figcaption...
  • Comment 2 months ago →
    🇺🇸United States dcam

    The comment in the OP about text not being valid content of a <figure> is incorrect. Figures can contain any flow content. MDN's own doc page has included an example of a <figure> that contains a <blockquote> for a long time. I know because I use that page for reference too.

    So I removed that part of the issue summary, but I'm leaving the change from text to an image anyway just because I like it and I think that probably is how it's used most of the time.

    Anyway, thanks for working on this fix!

  • Comment 2 months ago →
    🇺🇸United States dcam

    dcam → changed the visibility of the branch 3166502-figure-and-figcaption to hidden.

  • Comment about 2 months ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024