Description
Code of Conduct
- I agree to follow Django's Code of Conduct
Feature Description
Add useful keyboard shortcuts to admin interface mainly for navigation, search and actions improving keyboard accessibility.
Problem
The admin interface mostly relies on mouse-driven navigation. Common tasks like model navigation, instance search or selecting rows for bulk operation are less efficient for keyboard-first users. Without shortcuts, one might have to tab through various elements to reach the desired one.
I notice two problems here:
- The navigation order could be lengthy. Tabbing through elements could be demanding for those who rely only on keyboard.
- The navigation order may not always be the best. Say if the user wants to select the next record on a change list page, they might have to tab through all the inline fields of the currently focused record. We may want to keep this behavior, but also have way to easily jump between row selections for bulk operations. Gmail's or Github's j/k vim-style navigation is a good example.
Introducing keyboard shortcuts for common tasks would bridge this accessibility gap for everyone.
Request or proposal
proposal
Additional Details
Relevant discussion: https://forum.djangoproject.com/t/request-for-vote-admin-keyboard-shortcuts-and-command-palette/41037
knyghty/django-admin-keyboard-shortcuts is a proof of concept. I don't think it is merge-ready. That said, I'd like to see if the feature itself is a good fit for Django core.
Here are some suggested shortcuts:
| Description | Shortcut | Scope |
|---|---|---|
| Show shortcuts help dialog | ? | Global |
| Go to the site index | g i | Global |
| Go to a change list page | g l | Global |
| Go to a model instance | g c | Global |
| Focus previous row for action | k | Change List |
| Focus next row for action | j | Change List |
| Toggle row selection | x | Change List |
| Focus actions dropdown | a | Change List |
| Focus searchbar | / | Change List |
| Go to next page | TBD | Change List |
| Go to previous page | TBD | Change List |
| Save and go to change list | Alt+s | Change Form |
| Save and add another | Alt+a | Change Form |
| Save and continue editing | Alt+c | Change Form |
| Delete | Alt+d | Change Form |
| Confirm deletion | Alt+y | Delete Confirmation |
| Cancel deletion | Alt+n | Delete Confirmation |
Go to model instance shortcut would popup a search box, in theory similar autocomplete_fields's autocomplete widget, to quickly search and go to model instance edit page from anywhere across admin:
Implementation Suggestions
I believe shortcut implementation and configuration are better handled on client side. Moving this to the server (django) adds unnecessary complexity. Instead shortcuts can be declared in html with sane defaults, and customizations can be done by overriding base templates or through js. It keeps the setup simple and avoids passing config through the backend.
Example: Focus searchbar
In search_form.html, aria-keyshortcut attribute with shortcut key is added to the searchbar input tag:
<input type="text" id="searchbar" aria-keyshortcut="/">A js script would collect and register such shortcuts, listen for key presses and focus the searchbar if the key sequence matches.
Example: Focus next row
Action-based shortcuts like "Focus next row for action" could be represented with a hidden button with an onclick event handler attached:
<button onclick="checkbox.next()" aria-keyshortcuts="j" hidden>Focus next row</button>This is similar to how Github does it with hotkey.
Model Instance Search
A new API JSON view would be required in admin similar to autocomplete/ to allow paginated search of a specified model. autocomplete/ has different semantics, and filters the results based on limit_choices_to which wouldn't help in this case.
Secondly, a combobox component would be needed but select2+jQuery used by autocomplete seems outdated.
Metadata
Metadata
Assignees
Type
Projects
Status