Move criterion keyboard navigation into React components

[david-yz-liu]

Proposed Changes

Moves the grading page keyboard navigation bindings out of the global keybinding.js jQuery-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 entire MarksPanel class instance as window.marksPanel and calling methods on it from keybinding.js. The global is eliminated: MarksPanel now binds these keys directly in componentDidMount and unbinds them in componentWillUnmount.

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. RubricCriterionInput now tracks the highlighted level as hoveredLevelIndex state 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+down were silently suppressed whenever a flexible or checkbox criterion's <input> had focus, because Mousetrap blocks all keybindings on form elements by default. A targeted stopCallback override in keybinding.js now allows navigation combos. (2) Navigating between criteria now ensures the active criterion is scrolled into view.

Type of Change

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)	X
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)	X
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have added tests for my changes, if applicable.
  • This is required for all bug fixes and new features.
• I have updated the project documentation, if applicable.
  • This is required for new features.
• If this is my first contribution, I have added myself to the list of contributors.

After opening your pull request:

• I have updated the project Changelog (this is required for all changes).
• I have verified that the pre-commit.ci checks have passed.
• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• I have requested a review from a project maintainer.

Questions and Comments

As a side effect, this work unblocks wrapping MarksPanel with React.memo in a future PR, which would prevent the entire marks panel from re-rendering when unrelated state (e.g. the annotation dialog) changes in the parent Result component.

[coveralls]

Coverage Report for CI Build 27080148407

Coverage increased (+0.1%) to 90.304%

Details

• Coverage increased (+0.1%) from the base build.
• Patch coverage: 65 of 65 lines across 5 files are fully covered (100%).
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	50162
Covered Lines:	46268
Line Coverage:	92.24%
Relevant Branches:	2243
Covered Branches:	1056
Branch Coverage:	47.08%
Branches in Coverage %:	Yes
Coverage Strength:	125.98 hits per line

---

💛 - Coveralls