Skip to content

[FEAT] CD: Add Keybindings #32591

Closed

Description

@zJaaal

User Story

As a content author, I want to use common keybindings to navigate, select and filter content.

Shortcuts added

Key What it does Where
/ Focus the search field Content Drive, Asset Picker
Cmd/Ctrl + K Focus the search field (alias for /) Content Drive, Asset Picker
↑ ↓ Move focus between rows (does not change the selection) Content Drive, Asset Picker
Shift + ↑/↓ Grow or shrink the selection from the anchor row Content Drive
Shift + click Select everything between the anchor row and the clicked one Content Drive
Esc Clear the selection Content Drive
Cmd/Ctrl + B Show or hide the folder tree Content Drive

Decisions worth knowing

  • Esc clears the selection only. An earlier version also wiped every active filter once
    nothing was selected. That put a destructive, hard-to-undo action behind the most-reached-for key on
    the keyboard, so it was pulled. Clearing filters stays on the visible Clear all button.
  • Cmd+F was rejected even though it is the obvious "search" key. It would take
    away the browser's own find-in-page, which people rely on. / is the web convention for
    focusing a search box and collides with nothing.
  • Cmd+K is kept as an alias, not the primary. It conventionally opens a command
    palette, so if we ever want one, that key is still available.
  • Every shortcut stands down while a dialog is over the listing. Search, Escape and the tree
    toggle all decline when something is stacked above, so a keypress can never act on a listing the
    user cannot see. The Asset Picker is the exception by design: it takes the search key for as long
    as it is open, then hands it straight back.
  • Selections never span pages. Changing page clears the selection.
  • No Delete binding. Content Drive has no plain delete — removal goes through
    permission-dependent workflow actions, so the same key would do nothing on some rows and destroy
    content on others.
  • Enter and Space were left alone. The table already uses them for row selection.

Bugs fixed along the way

Both were already in the listing before this work and are reachable without touching a shortcut:

  • Every row sat in the tab order, so tabbing through the listing took roughly twenty presses to get past.
  • After sorting a column, the listing became completely unreachable by keyboard — no row could be
    focused at all.

QA

Test in Content Drive unless a row says otherwise. Shortcuts are per-surface, so the Asset Picker cases
matter as much as the portlet ones.

Search

  • / focuses the search box and does not open the browser's quick-find bar
  • Typing a/b into the search box enters a literal slash rather than re-triggering the shortcut
  • Cmd+K does the same thing as /
  • A term already typed is still there after pressing the shortcut again
  • Open the Asset Picker over Content Drive, press / — the dialog's asset search takes
    focus, not the one on the page behind it. Close the dialog and the shortcut goes back to the portlet
  • Open one of Content Drive's own dialogs (Action Center, New Folder, the content-type selector,
    Upload) and press /, then Cmd+K. Neither should do anything, and
    focus must not jump to the search box hidden behind the dialog. Close it and both work again

Moving through the listing

  • Tab into the listing lands on one row, and tabbing again leaves the listing
  • ↑/↓ move focus without selecting anything, and the listing does not scroll away
  • Focus stops at the first and last row of the page — arrows never change page
  • Sort a column, then press the arrows without clicking a row first. This is the regression that
    used to kill keyboard access entirely
  • Same check after changing page, changing page size, applying a filter, and running a search

Selecting

  • Shift+↓ grows the selection; Shift+↑ shrinks it back
    toward where you started rather than growing the other way
  • Pressing an arrow without Shift collapses the selection to the focused row
  • Shift+click a checkbox selects everything between it and the previously selected row
  • Select a range, then run a workflow action — it acts on exactly the rows shown as selected
  • Change page with a selection active: the selection clears

Escape and the tree

  • Esc clears the selection and leaves the filters and the search term untouched
  • Esc with nothing selected does nothing — filters stay
  • With a dialog or the content-editing panel open, Esc closes that and does not touch the
    selection or filters
  • Cmd+B collapses and expands the folder tree
  • With the cursor inside a rich-text field, Cmd+B bolds text and does not
    toggle the tree

Should not change

  • Browser back/forward still walk the folder history
  • Find-in-page (Cmd+F) still works normally
  • The read-only listing in the Action Center preview takes no row focus and no shortcut changes its
    selection

Known gap

Screen readers announce which rows are selected, but the listing is not yet a full ARIA grid (no
cell-level navigation contract). Tracked separately.

Proposed Objective

User Experience

Proposed Priority

Priority 3 - Average

Activity

  1. added theissue type on Jul 8, 2025
  2. changed the title [-][FEAT]: Add Keybindings[/-] [+][FEAT] CD: Add Keybindings[/+] on Jul 8, 2025
  3. wezell commented on Sep 3, 2026

    @wezell
    Member

    Also shift + click checkbox

  4. 4 remaining items

  5. removed their assignment
    on Sep 8, 2026
  6. moved this from In Review to QA in dotCMS - Product Planningon Sep 8, 2026
  7. rjvelazco commented on Sep 14, 2026

    @rjvelazco
    Member

    QA Result

    Case #1: Shift + click opens the dialog and loses the selection

    When Shift is held and an element is clicked out of the bxo by mistake or click twice by mistake, the dialog can open. Since Shift is a selection modifier, clicking with it held should only extend/modify the selection; it should not open a dialog. When the dialog opens, the current selection is lost.

    • Steps: Hold Shift and click/double click an element in the table.
    • Expected: The click/double adds to / modifies the selection; no dialog opens.
    • Actual: The dialog opens and the existing selection is lost.
    shift-and-click-opens-dialog.mov

    Case #2: Checkboxes respond to Enter inconsistently depending on navigation method

    When navigating the table with Tab, checkboxes can only be toggled with Space, not Enter. But when navigating with the arrow keys, Enter does toggle them. The behavior should be consistent across both navigation methods.

    • Steps: Navigate to a checkbox with Tab, press Enter; then navigate to a checkbox with the arrow keys, press Enter.
    • Expected: Enter (and Space) toggle the checkbox regardless of how you navigated to it.
    • Actual: With Tab navigation only Space toggles the checkbox; with arrow-key navigation Enter works.
    checkbox-are-not-selectable-with-enter-but-with-space.mov
  8. rjvelazco commented on Sep 14, 2026

    @rjvelazco
    Member

    Passed QA

    The feedback above will be taken in consideration and worked on a separted ticket.

    • dotCMS Docker Image: [dotcms/dotcms:trunk_ea12fe1]
  9. zJaaal commented on Sep 14, 2026

    @zJaaal
    MemberAuthor

    Case #1 is fixed on 37166-bulk-file-upload-frontend-impl (a19a090), since that branch already touches this component.

    The listing was not judging the modifier at all: the row's binding was (dblclick)="onDoubleClick(item)", passing no event, so there was nowhere for the check to live. Guarded in the two handlers every open affordance already routes through rather than per binding, since the row's dblclick, the title and the thumbnail all converge on onDoubleClick (the latter two via onTitleClick). Three tests cover it, including one that a plain double click still opens, so the fix cannot pass by disabling opening altogether.

    Case #2 I would push back on, and it is your call rather than a defect.

    The cause is not our code. Nothing in dot-folder-list-view binds Enter or Space. The difference is where focus lands:

    • Arrow keys keep focus on the <tr pSelectableRow>, so PrimeNG's row handler answers Enter.
    • Tab moves focus into p-tableCheckbox, and a checkbox answers Space and not Enter by HTML and ARIA convention.

    So the inconsistency is real, but "fixing" it means deliberately overriding platform behaviour for checkboxes. Screen-reader users are told a checkbox is operated with Space, and Enter inside a form is conventionally submit. Worth weighing that against table-internal consistency before we change it.

    If you do want it, it is small: a keydown binding on the checkbox cell that treats Enter as Space. I did not do it here because it is a design decision on your feature, not a bug in it. Happy to take it if you decide it should change.


    Written by Claude (Opus 5) on @zJaaal's behalf.

  10. removed their assignment
    on Sep 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions