Move criterion keyboard navigation into React components#7989
Merged
Conversation
Shift+up/shift+down (criterion navigation) are now bound in MarksPanel's componentDidMount, removing the window.marksPanel global. Up/down/enter (rubric level navigation) are now bound in RubricCriterionInput via a useEffect, replacing jQuery DOM class mutation with a hoveredLevelIndex state value. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Mousetrap blocks all keybindings when a form input has focus. Override stopCallback to allow navigation combos (shift+up/down/left/right, ctrl+shift+right, alt+enter) through — these don't produce characters so suppression was incorrect. shift+n remains blocked while typing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Collaborator
Coverage Report for CI Build 27080148407Coverage increased (+0.1%) to 90.304%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
Mousetrap.init() creates an internal documentMousetrap instance and copies forwarding wrappers onto the constructor. At event time, stopCallback is resolved via prototype lookup on that instance, so patching the static wrapper had no effect. Patch Mousetrap.prototype.stopCallback instead. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Each criterion component now holds a ref to its root <li> and calls
scrollIntoView({ block: "nearest", behavior: "smooth" }) when its active
prop becomes true, so keyboard navigation keeps the selected criterion
visible without scrolling unnecessarily when it is already on screen.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…yDown Replaces all Mousetrap.trigger() calls in marks_panel tests with fireEvent.keyDown(), which fires real DOM events through Mousetrap's full pipeline including stopCallback. Moves the Mousetrap.prototype.stopCallback patch and a scrollIntoView stub into jest_after_env_setup.js so they apply globally. Removes workaround optional chaining (?.scrollIntoView and ?.preventDefault) from application code now that tests exercise the real path. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
david-yz-liu
force-pushed
the
criterion-navigation-keybindings
branch
from
37f1aa0 to
78dd85d
Compare
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
2 participants
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.
Proposed Changes
Moves the grading page keyboard navigation bindings out of the global
keybinding.jsjQuery-based handlers and into the React components that own the relevant state.shift+up/shift+down(navigate between criteria) were previously implemented by exposing the entireMarksPanelclass instance aswindow.marksPaneland calling methods on it fromkeybinding.js. The global is eliminated:MarksPanelnow binds these keys directly incomponentDidMountand unbinds them incomponentWillUnmount.up/down/enter(navigate rubric levels within a criterion) were previously implemented with jQuery DOM queries ($(".active-rubric")) that mutated CSS classes directly, bypassing React.RubricCriterionInputnow tracks the highlighted level ashoveredLevelIndexstate and binds the three keys via Mousetrap while the criterion is active (and unbinds them on deactivation or unmount).Bug fixes: (1)
shift+up/shift+downwere silently suppressed whenever a flexible or checkbox criterion's<input>had focus, because Mousetrap blocks all keybindings on form elements by default. A targetedstopCallbackoverride inkeybinding.jsnow allows navigation combos. (2) Navigating between criteria now ensures the active criterion is scrolled into view.Type of Change
Checklist
Before opening your pull request:
After opening your pull request:
Questions and Comments
As a side effect, this work unblocks wrapping
MarksPanelwithReact.memoin a future PR, which would prevent the entire marks panel from re-rendering when unrelated state (e.g. the annotation dialog) changes in the parentResultcomponent.