Skip to content

Add some text to the loading dots for noscript users #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add some text to the loading dots for noscript users #72

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/MermaidParserFunction.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,8 @@ public function parse(array $params)
'div',
[
'class' => 'mermaid-dots',
]
],
"Loading Mermaid graphics... (JavaScript required)"
Copy link

@osnard osnard Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@gesinn-it-gea gesinn-it-gea Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx @osnard for your feedback!

)
);
}
Expand Down