Svelte: A11y: <figcaption> must be an immediate child of <figure>

[meydjer]

<script>
    let caption = 'Lorem ipsum';
</script>

<figure>
    <img src="https://placekitten.com/200/300" alt="kitty" />
    {#if caption}
        <figcaption>{caption}</figcaption>
    {/if}
</figure>

This outputs the following warning: A11y: <figcaption> must be an immediate child of <figure>

REPL: https://svelte.dev/repl?version=3.1.0&gist=81856872f651e9f460d8f7497dedceb5

[EmilTholin]

I wonder what blocks should be discarded when checking the figure/figcaption relationship.

Possibly {#if}, {:else if}, {:else}, and {#await}, {:then}, {:catch}?

<script>
  let caption = 'foo';
  let captionPromise = Promise.resolve('foo');
</script>

<figure>
  <img src="https://placekitten.com/200/300" alt="kitty" />
  {#if caption === 'foo'}
    <figcaption>{caption}</figcaption>
  {:else if caption === 'bar'}
    <figcaption>{caption}</figcaption>
  {:else}
    <figcaption>{caption}</figcaption>
  {/if}
</figure>

<figure>
  <img src="https://placekitten.com/200/300" alt="kitty" />
  {#await captionPromise}
    <figcaption>Loading</figcaption>
  {:then c}
    <figcaption>{c}</figcaption>
  {:catch e}
    <figcaption>{e}</figcaption>
  {/await}
</figure>

[Conduitry]

I think we should probably just be looking for the nearest ancestor of the Element node type, and making sure that it's a <figure>.