Skip to content

Add keyboard shortcuts to enhance issue board navigation

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Purpose

Currently in issue and epic boards users can reorder lists and can reorder cards within a list (relative priority). Reordering lists can only be done via drag-and-drop using a mouse. Reordering cards can be done via drag-and-drop or using the card actions to move to the top/bottom of the list.

Users who cannot rely on drag and drop currently are unsupported when using boards. Further, enhancing keyboard support will additionally support users who can utilize mouse interactions but prefer keyboard actions, which are supported within issues and epics accessed from the board — in other words, the entire journey of finding, opening, and interacting with issues and epics should be fully supported for keyboard-first and keyboard-only users.

Original detail: There are already a few great proposals to introduce vim-like shortcuts for navigating GitLab lists of issues, commits, etc (https://gitlab.com/gitlab-org/gitlab-ce/issues/27652, https://gitlab.com/gitlab-org/gitlab-ce/issues/23400, https://gitlab.com/gitlab-org/gitlab-ce/issues/32309). In addition to these, I think vim-like navigation would be helpful to navigate issue boards.

Proposal

This proposal prioritizes moving cards ahead of moving lists, as moving cards has more functional benefit (prioritization) and is likely to continue to be a need in the foreseeable future. Moving lists is not a feature in many similar products, and while nice to have, is not required to effectively utilize boards so is prioritized lower.

tl;dr make items focusable, traversable with arrow keys, movable with opt modifier.

Enhance keyboard support within lists (cards)

  1. Make cards focusable: Currently only elements within cards (e.g. title) are focusable. Allow the outer card element to be focusable to support card-level actions.
    1. When a card is focused, enter opens the card item. If the work items drawer has not yet been implemented, this should open the sidebar (act as equivalent to clicking the card). cmd-enter opens in new tab (only after work item drawer).
  2. Add up/down navigation: When a card is focused, up and down should traverse to the prev/next card in the list.
  3. Add left/right navigation: When a card is focused, left and right should traverse to the first item in the list to the left/right of the list the focused card is in
  4. Add keyboard prioritization: When a card is focused, opt-up and opt-down move an item up or down one position in the list (change relative priority)
    1. Add card actions menu items for "Move up" and "Move down" with keyboard shortcuts listed to aid discovery
  5. Add left/right move: When a card is focused, opt-left and opt-right move the card to the first position in the list to the left-right of the current list.
    1. Card remains focused, and list scrolled to ensure visibility. Top of list is used both to align with board "new item" pattern and ensure card is visible regardless of pagination.
  6. Add keyboard support for start/end shortcuts: When a card is focused, shift-opt-up and shift-opt-down move an item to the start or end of the list (shortcut for existing menu functions)
    1. Show keyboard shortcuts in the actions menu to aid discovery
  • ↓ or j: Navigate to issue below
  • ↑ or k: Navigate to issue above
  • ← or h: Navigate to column to the left
  • → or l: Navigate to column to the right
  • o or enter: Open selected issue
  • opt + down: Move selected issue down
  • opt + up: Move selected issue up
  • opt + left: Move selected issue to the column to the left
  • opt + right: Move selected issue to the column to the right (currently conflicts with global milestone shortcut
  • shift + opt + down: Move selected issue to bottom
  • shift + opt + up: Move selected issue to top

Alternate move approach

Utilize Space to initiate a "drag" mode, with Space again to "drop". While in "drag" mode, use Arrow keys to move the card up or down, or left/right across lists. Escape to cancel and revert, similar to mouse dragging.

This could be implemented at the system level, as part of the drag and drop behavior, to provide a more consistent experience. This would also allow for users to move items further much easier, and reduce moves to a single call, though it would make moving an item 1-2 positions more cumbersome.

The ideal solution may be to combine approaches supporting both the open ended space-to-move and board-specific controls for moving up/down incrementally.

Add keyboard support for moving lists

  1. Make lists focusable: Make lists themselves focusable, not just content within
    1. Users should still be able to focus content within as the next tabstop after the outer list
  2. Add left/right navigation: When a list is focused, left and right should traverse to the prev/next list in horizontal order.
  3. Add keyboard list move: When a list is focused, opt-left and opt-right move a list relative to other lists (list remains focused)
    1. Optional: Add shift-opt-left and shift-opt-right to move to the first/last list position.
  4. Optional: Add move actions to list actions menu with keyboard shortcuts listed
Edited by Nick Leonard