Improve accessibility of rendered Mermaid diagrams

[bollwyvl]

Elevator Pitch

If provided by a content author, hoist the MermaidJS accessibility elements out of the rendered SVG img to allow assistive technology to announce them correctly.

References

• follow-on to Add mermaidjs 10.2.3 #1957

Alternatives

• alt text
• title attribute (not as desirable due to mouseover effects)
• <details><summary>_View Source_
• <button>_Copy Mermaid Source_ a la GitHub
• <figure><img><figcaption>

Design Ideas

The most complex, but likely most correct option is a mix of the above:

<figure class="jp-Mermaid">
  <img alt/>
  <pre>
    <code></code>
  </pre>
  <figcaption>
</figure>

...with some additional aria-* attributes linking them.

In addition, as the "at-rest" mermaid source text is in some cases more interpretable than the full rendered SVG markup, offering the full source behind a visually discrete <details> would be useful in cases beyond the assistive technology case.

Future Work

There is a broader conversation about making the actual diagram content announceable, which would require the Jupyter implementations to full expose the full SVG DOM, likely in an isloated iframe to avoid collisions.

[bollwyvl]

Some follow-on here: mermaid has now declared a de facto mimetype, which the JupyterLab implementation also supports... likely would also add support for this here. On the doomed JEP, there was also a request for embedding the svg (which would be out-of-scope for nbconvert itself, at this time) so there would also be the possibility of a pre-rendered SVG in the mime bundle of a lab-rendered notebook... presumably this would preempt the js thing, and ideally not invoke the mermaid loading mechanism.