github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-07-18 00:44:29 -05:00
Code Issues 276 Packages Projects Releases 26 Wiki Activity

[PR #1857] [MERGED] fix(staffml): keep command-palette active row in view during keyboard nav #30958

New Issue
Closed
opened 2026-06-21 20:35:57 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-06-21 20:35:57 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1857
Author: @farhan523
Created: 6/12/2026
Status: ✅ Merged
Merged: 6/16/2026
Merged by: @profvjreddi

Base: dev ← Head: fix/staffml-cmdk-scroll-active

📝 Commits (1)

  • fafc5b5 fix(staffml): keep command-palette active row in view during keyboard nav

📊 Changes

3 files changed (+97 additions, -0 deletions)

View changed files

➕ interviews/staffml/src/__tests__/command-palette-scroll.test.tsx (+78 -0)
📝 interviews/staffml/src/__tests__/setup.ts (+6 -0)
📝 interviews/staffml/src/components/CommandPalette.tsx (+13 -0)

📄 Description

Problem (accessibility)

The Cmd+K command-palette result list is scrollable (max-h-[60vh]). Arrowing past the fold updated aria-activedescendant and the highlight class, but nothing scrolled the active row back into the viewport — so keyboard-only users lost the highlight off-screen on longer result sets (e.g. a question search returning Pages + Topics + 12 questions).

Fix

Scroll the active row into view whenever activeIdx changes, using block: "nearest" so an already-visible row — e.g. one set active via onMouseEnter hover — never triggers a scroll jump.

useEffect(() => {
  if (!open) return;
  document.getElementById(`cmdk-row-${activeIdx}`)?.scrollIntoView({ block: "nearest" });
}, [activeIdx, open]);

Test

Adds command-palette-scroll.test.tsx covering ArrowDown/ArrowUp navigation, plus a jsdom scrollIntoView stub in the shared test setup (jsdom doesn't implement it). Full suite: 113 passing. tsc --noEmit clean.

Note

Best reviewed/merged after #1856 — the command palette is currently not mounted in app/layout.tsx, so this keyboard behavior is only reachable once that mount lands. The two changes touch different files and do not conflict.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1857 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 6/12/2026 **Status:** ✅ Merged **Merged:** 6/16/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/staffml-cmdk-scroll-active` --- ### 📝 Commits (1) - [`fafc5b5`](https://github.com/harvard-edge/cs249r_book/commit/fafc5b545345c0b2c610431bcddb7596fb3ffddf) fix(staffml): keep command-palette active row in view during keyboard nav ### 📊 Changes **3 files changed** (+97 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `interviews/staffml/src/__tests__/command-palette-scroll.test.tsx` (+78 -0) 📝 `interviews/staffml/src/__tests__/setup.ts` (+6 -0) 📝 `interviews/staffml/src/components/CommandPalette.tsx` (+13 -0) </details> ### 📄 Description ## Problem (accessibility) The Cmd+K command-palette result list is scrollable (`max-h-[60vh]`). Arrowing past the fold updated `aria-activedescendant` and the highlight class, but nothing scrolled the active row back into the viewport — so **keyboard-only users lost the highlight off-screen** on longer result sets (e.g. a question search returning Pages + Topics + 12 questions). ## Fix Scroll the active row into view whenever `activeIdx` changes, using `block: "nearest"` so an already-visible row — e.g. one set active via `onMouseEnter` hover — never triggers a scroll jump. ```tsx useEffect(() => { if (!open) return; document.getElementById(`cmdk-row-${activeIdx}`)?.scrollIntoView({ block: "nearest" }); }, [activeIdx, open]); ``` ## Test Adds `command-palette-scroll.test.tsx` covering ArrowDown/ArrowUp navigation, plus a jsdom `scrollIntoView` stub in the shared test setup (jsdom doesn't implement it). Full suite: 113 passing. `tsc --noEmit` clean. ## Note Best reviewed/merged **after** #1856 — the command palette is currently not mounted in `app/layout.tsx`, so this keyboard behavior is only reachable once that mount lands. The two changes touch different files and do not conflict. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-06-21 20:35:57 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area: book
area: collabs
area: kits
area: labs
area: socratiq
area: staffml
area: tinytorch
area: tools
area: website
bug
dependencies
format: epub
format: pdf
javascript
link-health
link-rot
priority-high
pull-request
Mirrored from GitHub Pull Request
 staffml
type: bug
type: citation
type: code
type: errata
type: improvement
type: new
type: question
vault-sli
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#30958
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?