Skip to content

Hparsons accessibility #1473

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
ascholerChemeketa wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Hparsons accessibility #1473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
184fce3
Hparsons: Improve keyboard and MathJax accessibility
Sep 3, 2026
b625c02
Hparsons: Announce feedback and reset status
Sep 3, 2026
f0a1acb
Hparsons: Cancel stale feedback announcements
Sep 3, 2026
186849a
Hparsons: Await queued MathJax block renders
Sep 3, 2026
8ddae3a
Add error handling to MathJax rendering
ascholerChemeketa Sep 3, 2026
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
12 changes: 7 additions & 5 deletions bases/rsptx/interactives/runestone/common/js/runestonebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,16 +620,18 @@ export default class RunestoneBase {
if (MathJax.typesetPromise) {
if (typeof window.runestoneMathReady !== "undefined") {
return window.runestoneMathReady.then(() =>
this.mjresolver(this.aQueue.enqueue(component)),
this.aQueue.enqueue(component),
);
} else {
return this.mjresolver(this.aQueue.enqueue(component));
return this.aQueue.enqueue(component);
}
} else {
console.log(`Waiting on MathJax!! ${MathJax.typesetPromise}`);
setTimeout(() => this.queueMathJax(component), 200);
console.log(`Returning mjready promise: ${this.mjReady}`);
return this.mjReady;
return new Promise((resolve, reject) => {
setTimeout(() => {
this.queueMathJax(component).then(resolve, reject);
}, 200);
});
}
}
}
Expand Down
26 changes: 26 additions & 0 deletions bases/rsptx/interactives/runestone/hparsons/js/BlockFeedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ export default class BlockFeedback extends HParsonsFeedback {
createOutput() {
// Block based grading output
this.messageDiv = document.createElement("div");
this.feedbackLiveRegion = document.createElement("div");
this.feedbackLiveRegion.setAttribute("role", "status");
this.feedbackLiveRegion.setAttribute("aria-live", "polite");
this.feedbackLiveRegion.setAttribute("aria-atomic", "true");
this.feedbackLiveRegion.classList.add("sr-only");
this.hparsons.outerDiv.appendChild(this.messageDiv);
this.hparsons.outerDiv.appendChild(this.feedbackLiveRegion);
}

customizeUI() {
Expand Down Expand Up @@ -158,6 +164,19 @@ export default class BlockFeedback extends HParsonsFeedback {
}
feedbackArea.innerHTML = t("msg_parson_wrong_order");
}
this.announceFeedback();
this.hparsons.hparsonsInput.refreshBlockAria();
}

announceFeedback(message = this.messageDiv.textContent.trim()) {
if (this.feedbackAnnouncementTimeout) {
clearTimeout(this.feedbackAnnouncementTimeout);
}
this.feedbackLiveRegion.textContent = "";
this.feedbackAnnouncementTimeout = setTimeout(() => {
this.feedbackLiveRegion.textContent = message;
this.feedbackAnnouncementTimeout = null;
}, 10);
Comment on lines +171 to +179

@ascholerChemeketa ascholerChemeketa Sep 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Addressed in followup commit

}

// Feedback UI for Block-based Feedback
Expand All @@ -171,6 +190,12 @@ export default class BlockFeedback extends HParsonsFeedback {
);
}
this.messageDiv.style.display = "none";
if (this.feedbackAnnouncementTimeout) {
clearTimeout(this.feedbackAnnouncementTimeout);
this.feedbackAnnouncementTimeout = null;
}
this.feedbackLiveRegion.textContent = "";
this.hparsons.hparsonsInput.refreshBlockAria();
}

reset() {
Expand All @@ -180,5 +205,6 @@ export default class BlockFeedback extends HParsonsFeedback {
this.solved = false;
}
this.clearFeedback();
this.announceFeedback("Blocks reset.");
}
}
72 changes: 56 additions & 16 deletions bases/rsptx/interactives/runestone/hparsons/js/hparsons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import RunestoneBase from "../../common/js/runestonebase.js";
import { disableMathJaxTabStops } from "../../common/js/mathjax-a11y.js";

import "../css/hljs-xcode.css";
import BlockFeedback from "./BlockFeedback.js";
import SQLFeedback from "./SQLFeedback.js";
Expand Down Expand Up @@ -193,25 +195,63 @@ export default class HParsons extends RunestoneBase {
return textarea.value;
}

renderMathInBlocks() {
if (this.language !== "math") return;
setTimeout(() => {
const blocks = document.querySelectorAll(
`#${this.divid}-container .parsons-block`,
observeMathJaxTabStops() {
if (this.mathTabStopObserver || typeof MutationObserver === "undefined") {
return;
}
this.mathTabStopObserver = new MutationObserver((mutations) => {
const needsCleanup = mutations.some(
(mutation) =>
mutation.type === "childList" ||
mutation.target.getAttribute("tabindex") !== "-1",
);
blocks.forEach((block) => {
block.innerHTML = this.decodeHTMLEntities(block.innerHTML);
if (block.innerHTML.indexOf("process-math") !== -1) {
// remove the span tag with process-math class
block.innerHTML = block.innerHTML.replace(
/<span class="process-math">|<\/span>/g,
"",
if (needsCleanup) {
disableMathJaxTabStops(this.hparsonsInput, [
".parsons-block",
]);
}
});
this.mathTabStopObserver.observe(this.hparsonsInput, {
subtree: true,
childList: true,
attributes: true,
attributeFilter: ["tabindex"],
});
}

renderMathInBlocks() {
if (this.language !== "math") return Promise.resolve();
this.observeMathJaxTabStops();
return new Promise((resolve, reject) => {
// MathJax may load just after the component; preserve the
// established deferral before submitting these block renders.
setTimeout(() => {
try {
const blocks = this.hparsonsInput.querySelectorAll(
".parsons-block",
);
const renderPromises = Array.from(blocks, (block) => {
block.innerHTML = this.decodeHTMLEntities(block.innerHTML);
if (block.innerHTML.indexOf("process-math") !== -1) {
block.innerHTML = block.innerHTML.replace(
/<span class="process-math">|<\/span>/g,
"",
);
}
return this.queueMathJax(block);
});
Promise.all(renderPromises).then(
() => {
disableMathJaxTabStops(this.hparsonsInput, [".parsons-block"]);
resolve();
},
reject,
);
} catch (err) {
reject(err);
}

this.queueMathJax(block);
});
}, 10);
}, 10);
});
}

// Return previous answers in local storage
Expand Down
Loading