revealjs: `incremental: true` conflicts with `code-annotations`

[avras]

Bug description

I have a slide deck with a slide containing code annotations. The code itself is an XML file. But I mark the code block as python as I couldn't figure out the comment syntax which the code annotater will recognize when I mark the code block as xml.

The slides freeze at that slide. Neither the right arrow nor the "click on forward button" works.

Steps to reproduce

---
title: "Slides Freeze at Code Annotation"
author: Saravanan Vijayakumaran
format:
    revealjs:
        incremental: true
        theme: default
        controls: true
        scrollable: false
        mermaid:
          theme: default
date: October 5, 2023
date-format: long
link-external-newwindow: true
slide-number: c/t
code-annotations: hover
---

## First slide

## Right Arrow Does Not Work

``` python
<?xml version="1.0" encoding="UTF-8"?>                     # <1>
<OfflinePaperlessKyc referenceId="372520231003155749167">  # <2>
  <UidData> # <3>
    <Poi dob="DD-MM-YYYY" # <4>                                  
      e="558d55fe5740c50058...518b702521b1448a6509ccb" # <5>
      gender="M"
      m="328f6d1c0adad4ad4...cf3589b98c617aa1d45afcf2" # <6>
      name="Saravanan Vijayakumaran"
    />
    <Poa careof="S/O XXXXXXXXXXXXX XXXXXXXXX"
         country="India"
         dist="Mumbai"
         vtc="Mumbai"
    />
    <Pht> ..snip.. </Pht> # <7>
  </UidData> # <8>
</OfflinePaperlessKyc>
```

1.  XML version
2.  4 digits of Aadhaar + timestamp
3.  Start of user data
4.  `dob` is the date of birth
5.  Hash of email address
6.  Hash of phone number
7.  Photo encoded in base64 format

## Last slide

Expected behavior

The slides should progress to the slide titled "Last slide"

Actual behavior

The slide progress freezes at the slide titled "Right Arrow Does Not Work"

Your environment

• OS: Ubuntu 22.04.3 LTS jammy
• IDE: RStudio 2023.06.1+524
  • This bug also appears when generating the html with "quarto render" on the command line

Quarto check output

$ quarto check
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.450
      Path: /opt/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.12
      Path: /usr/bin/python3
      Jupyter: 4.9.1
      Kernels: sagemath, python3

(/) Checking Jupyter engine render....[IPKernelApp] WARNING | debugpy_stream undefined, debugging will not be enabled
[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.1.2
      Path: /usr/lib/R
      LibPaths:
        - /home/sarva/R/x86_64-pc-linux-gnu-library/4.1
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.42
      rmarkdown: 2.21

[✓] Checking Knitr engine render......OK

[cderv]

Thanks for the report. This is an issue with incremental: true. If you set to false this is working.

I believe what happens is that incremental: true will apply on the List that is used for annotations.

This leads to 7 items to show incrementally by fragment one after the other. (https://quarto.org/docs/presentations/#incremental-lists)

Try rendering with

• code-annotations: false and moving in presentation you'll see the 7 items as a classic bullet list that are fragmented
• code-annotations: true and this times the 7 items formatted as annotation, but are revealed bullet then text so you need to click 14 times to go to new slide

The slides freeze at that slide. Neither the right arrow nor the "click on forward button" works.

It works - you just need to click lot of time as mentioned right above.

We look into how to make the two feature works together.

Extract of how the code annotation items looks like

You can notice the fragment class on each of them 😓

<dl class="code-annotation-container-grid">
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="1" data-fragment-index="0">1</dt>
  <dd class="fragment" data-fragment-index="1">
    <span data-code-cell="annotated-cell-1" data-code-lines="1" data-code-annotation="1">XML version</span>
  </dd>
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="2" data-fragment-index="2">2</dt>
  <dd class="fragment" data-fragment-index="3">
    <span data-code-cell="annotated-cell-1" data-code-lines="2" data-code-annotation="2">4 digits of Aadhaar + timestamp</span>
  </dd>
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="3" data-fragment-index="4">3</dt>
  <dd class="fragment" data-fragment-index="5">
    <span data-code-cell="annotated-cell-1" data-code-lines="3" data-code-annotation="3">Start of user data</span>
  </dd>
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="4" data-fragment-index="6">4</dt>
  <dd class="fragment" data-fragment-index="7">
    <span data-code-cell="annotated-cell-1" data-code-lines="4" data-code-annotation="4">
      <code>dob</code> is the date of birth </span>
  </dd>
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="5" data-fragment-index="8">5</dt>
  <dd class="fragment" data-fragment-index="9">
    <span data-code-cell="annotated-cell-1" data-code-lines="5" data-code-annotation="5">Hash of email address</span>
  </dd>
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="6" data-fragment-index="10">6</dt>
  <dd class="fragment" data-fragment-index="11">
    <span data-code-cell="annotated-cell-1" data-code-lines="7" data-code-annotation="6">Hash of phone number</span>
  </dd>
  <dt class="fragment" data-target-cell="annotated-cell-1" data-target-annotation="7" data-fragment-index="12">7</dt>
  <dd class="fragment" data-fragment-index="13">
    <span data-code-cell="annotated-cell-1" data-code-lines="15" data-code-annotation="7">Photo encoded in base64 format</span>
  </dd>
</dl>

[avras]

Thanks for the quick response. I actually had 18 code annotations. Removed a few for the minimal example. 😅

Thanks to your explanation, I have a workaround. Once I am done explaining the code annotations on the slide, I can use "Alt+Right Arrow" which moves to the next slide.

This assumes that Alt button is accessible. If I share the slides on a website, a reader on a phone will get stuck. I will have to share the slides with incremental: false or set the code-annotations to below.

[cderv]

I will have to share the slides with incremental: false

You could also switch to manually setting .incremental class around List you want to be incremental.

::: {.incremental}

- Eat spaghetti
- Drink wine

:::

This way you would not loose any feature. This is just more typing initially if you have lots of lists in your presentation

[avras]

Thanks for sharing the tip about .incremental.

Also, thanks to you and your team for developing Quarto as a free tool. After 10 years of beamer, I have switched to Quarto this year for my course slides https://www.ee.iitb.ac.in/~sarva/courses/EE720/Autumn2023.html.