`data-fragment-index` attribute assignment is inconsistent

[salbeira]

What may be the cause of this issue?

Using { }-Syntax, dataset attributes get an additional "data-" prefixed to their name if they are attached to an image and get separated from the element the classes get attached to.

How does it impact the user?

Usually you can put a {.fragment data-fragment-index="2"} on elements to determine an order in which the elements get revealed. This breaks if applied to media elements as the <div><figure>-wrapping results in

<div class="media" data-data-fragment-index="2">
  <figure class="fragment">
    <img>
    </img>
  </figure>
</div>

Because the inner fragment has no data-fragment-index pre-assigned it gets assigned a value behind those that have.

How can I replicate the issue?

# Index Test

[Third]{.fragment data-fragment-index="3"}

[First]{.fragment data-fragment-index="1"}

Always Visible

![Second](./images/test.png){.fragment data-fragment-index="2"} <!-- this will be shown last -->

This gets turned into the following html source:

<div class="box block">
  <p><span class="fragment" data-fragment-index="3">Third</span></p>
  <p><span class="fragment" data-fragment-index="1">First</span></p>
  <p>Always Visible</p>
  <div class="media" data-data-fragment-index="2">
    <figure class="fragment image">
      <img src="images/test.png" aria-label="Second" alt="images/test.png" />
      <figcaption>
        Second
      </figcaption>
    </figure>
  </div>
</div>

The fragment mechanism of reveal then turns it into this DOM:

<div class="box block">
  <p><span class="fragment" data-fragment-index="1">Third</span></p>
  <p><span class="fragment" data-fragment-index="0">First</span></p>
  <p>Always Visible</p>
  <div class="media" data-data-fragment-index="2">
    <figure class="fragment image" data-fragment-index="2">
      <img src="images/test.png" aria-label="Second" alt="images/test.png" />
      <figcaption>
        Second
      </figcaption>
    </figure>
  </div>
</div>

What do I expect to happen instead?

<div class="box block">
  <p><span class="fragment" data-fragment-index="3">Third</span></p>
  <p><span class="fragment" data-fragment-index="1">First</span></p>
  <p>Always Visible</p>
  <div class="media fragment" data-fragment-index="2">
    <figure class="image">
      <img src="images/test.png" aria-label="Second" alt="images/test.png" />
      <figcaption>
        Second
      </figcaption>
    </figure>
  </div>
</div>

or

<div class="box block">
  <p><span class="fragment" data-fragment-index="3">Third</span></p>
  <p><span class="fragment" data-fragment-index="1">First</span></p>
  <p>Always Visible</p>
  <div class="media">
    <figure class="image fragment" data-fragment-index="2">
      <img src="images/test.png" aria-label="Second" alt="images/test.png" />
      <figcaption>
        Second
      </figcaption>
    </figure>
  </div>
</div>