Add some text to the loading dots for noscript users

[LordAro]

I have a user that likes to disable Javascript. I know, I know...

However, because the css for the mermaid-dots are loaded via JS... it never displays anything, making it unclear that there's content missing from the page. So, add a little extra content to the mermaid-dots div.

There might be a better solution to get the mermaid-dots css included on pageload, rather than via js callback, but I don't know it.

I'd use on the page/template itself if I could, but it seems like mediawiki blocks usage of for whatever reason.

[osnard]

I believe one should at least use <noscript> tags.

Example:

Html::rawElement(
    'div',
    [
        'class' => 'mermaid-dots',
    ],
    Html::element( 'p', [], "Loading Mermaid graphics..." )
        .Html::element( 'noscript', [], "JavaScript is required to display this diagram. Please enable." )
)

(pseudocode, untested)

In general, such messages should use the MediaWiki I18N mechanism, so it can be displayed in the users language.

OT: For better WCAG compliance one could add dedicated attributes to the container <div>, like role="region", aria-busy="true" and aria-live="polite". This would also require some JavaScript that changes aria-busy and maybe adds an aria-label. In addition one should provide the "raw data" in such cases. But all this is clearly out of scope for this particular change.

[gesinn-it-gea]

Thx @osnard for your feedback!