Matching: fix timing issue for rendering dragables with mathjax content - #1417
Conversation
There was a problem hiding this comment.
Pull request overview
This PR addresses an accessibility timing issue where Matching box labels containing MathJax content may be rendered before MathJax’s speech text is available, leaving stale/incorrect aria-label values for draggable/droppable boxes.
Changes:
- Add a
MutationObserverinMatchingProblemto detect when MathJax speech attributes become available and refresh affected box labels. - Add a unit test to verify box labels update after MathJax speech content appears.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| bases/rsptx/interactives/runestone/matching/js/matching.js | Adds a MathJax speech attribute observer to refresh box aria-labels after MathJax updates. |
| bases/rsptx/interactives/runestone/matching/test/matching.test.js | Adds a test ensuring aria-label updates when MathJax speech becomes available asynchronously. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| this.mathJaxSpeechObserver = new MutationObserver((mutations) => { | ||
| for (const mutation of mutations) { | ||
| const box = mutation.target.closest?.(".box"); | ||
| if (box && this.allBoxes.includes(box)) { | ||
| this.updateBoxAriaLabel(box); | ||
| } | ||
| } | ||
| }); |
There was a problem hiding this comment.
Resolved in a new commit
|
https://github.com/RunestoneInteractive/interactives updated with extensive math sample |
|
Checking on that issue... |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (1)
bases/rsptx/interactives/runestone/matching/js/matching.js:510
- MutationObserver is configured to watch only
data-semantic-speech-nonechanges. However,getAccessibleElementText()(viagetMathJaxSpeechText) also uses MathJax-providedaria-labelas speech text, so updates delivered viaaria-labelwon’t trigger refreshes of box/connection aria-labels or the connection list. Consider also observingaria-label(and/or broadening the observer to catch MathJax speech becoming available via node insertion).
this.mathJaxSpeechObserver.observe(this.containerDiv, {
subtree: true,
attributes: true,
attributeFilter: ["data-semantic-speech-none"],
});
Found a timing issue with grabbing mathjax content in matching labels.