Dragndrop /matching keyboard updates#1315
Draft
ascholerChemeketa wants to merge 2 commits into
Draft
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR follows up on prior keyboard-accessibility work for Runestone’s DragNDrop and Matching interactives, adding NVDA-friendly click handling, arrow-key navigation, and stricter focus/tab behavior to reduce invalid interactions.
Changes:
- Matching: adds keyboard navigation helpers (Tab trapping, arrow navigation), click-to-activate support, and disables MathJax/tabbable nested math inside boxes.
- DragNDrop: adds click-based selection/placement, improves arrow navigation across “columns”, and disables MathJax/tabbable nested math inside premises.
- Removes the CSS pointer-events hack for MathJax in drop targets, relying instead on event handling using
currentTarget.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| bases/rsptx/interactives/runestone/matching/test/matching.test.js | Adds keyboard/mouse interaction tests for Matching (tab trapping, arrows, click behavior, math tab stops). |
| bases/rsptx/interactives/runestone/matching/js/matching.js | Implements Matching keyboard navigation, click activation, and MathJax tab-stop disabling. |
| bases/rsptx/interactives/runestone/dragndrop/test/dragndrop.test.js | Expands DragNDrop coverage for arrow navigation, click activation, and math tab stops. |
| bases/rsptx/interactives/runestone/dragndrop/js/dragndrop.js | Adds click interactions, improves focus movement logic, and hardens drop handling via currentTarget. |
| bases/rsptx/interactives/runestone/dragndrop/css/dragndrop.css | Removes pointer-events CSS workaround for MathJax inside drop zones. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
679
to
+682
| if (e.key === "Enter") { | ||
| e.preventDefault(); | ||
| if (!this.selectedBox) { | ||
| this.selectedBox = box; | ||
| box.classList.add("selected"); | ||
| } else { | ||
| if (box !== this.selectedBox) | ||
| this.createPermanentLine(this.selectedBox, box); | ||
| this.selectedBox.classList.remove("selected"); | ||
| this.selectedBox = null; | ||
| const currentIndex = this.allBoxes.indexOf(box); | ||
| const next = this.allBoxes[currentIndex + 1]; | ||
| if (next) next.focus(); | ||
| else this.allBoxes[0].focus(); | ||
| } | ||
| this.activateBox(box); | ||
| } else if (this.selectedBox && e.key === "Tab") { |
Comment on lines
+627
to
+631
| if (!this.selectedPremise || ev.target.closest(".premise")) { | ||
| return; | ||
| } | ||
| ev.preventDefault(); | ||
| this.placeSelectedPremise(dpSpan); |
Member
|
Now I can't select anything in dragndrop. It is still tabbing into the math instead of stopping the top level. |
ascholerChemeketa
force-pushed
the
dragndrop-keyboard-fixes
branch
from
July 22, 2026 02:45
ec5be45 to
b144415
Compare
Contributor
Author
|
Just did a fresh build of the JS. I can't reproduce your failure to reproduce. :) Just force pushed with a change to also make response Mathjax untabbable. Now the only way to reach them is when placing a premise. Looks like the two new Copilot suggestions are existing code that is working. Will let you decide whether to adopt those two suggestions. If you still can't reproduce I'll loop back in a week. |
Comment on lines
+445
to
+458
| activateBox(box) { | ||
| if (!this.selectedBox) { | ||
| this.setSelectedBox(box); | ||
| const firstOppositeBox = this.getTabbableBoxes()[0]; | ||
| firstOppositeBox?.focus(); | ||
| return; | ||
| } | ||
|
|
||
| if (box !== this.selectedBox) { | ||
| this.createPermanentLine(this.selectedBox, box); | ||
| } | ||
| this.setSelectedBox(null); | ||
| box.focus(); | ||
| } |
Comment on lines
+491
to
+498
| dgSpan.addEventListener("click", (ev) => { | ||
| ev.preventDefault(); | ||
| if (this.selectedPremise === dgSpan) { | ||
| this.deselectPremise(); | ||
| } else { | ||
| this.selectPremise(dgSpan); | ||
| } | ||
| }); |
ascholerChemeketa
marked this pull request as draft
July 22, 2026 02:50
Contributor
Author
|
Found a quirk when NVDA is engaged. Marking as draft until I'm back from Colorado. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow up to address issues in #1308
Also fixes another issue: when NVDA is active it consumes Enter/Space and generates click events, so we need to allow for those as if they were enter
Also implements changes to matching questions: