Opened 6 months ago

Closed 4 months ago

#33728 closed Cleanup/optimization (fixed)

Tab order should match visual order for admin model forms’ submit buttons

Reported by: Thibaud Colas Owned by: Alexander Freyr Lúðvíksson
Component: contrib.admin Version: dev
Severity: Normal Keywords: accessibility, keyboard, ux
Cc: Carlton Gibson, elky Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Thibaud Colas)

In the Django admin, in a model form, the tab order of the submit buttons is different from the visual order. Here is a screenshot of the tab stops:

In LTR languages, focus should follow the reading order of the page, top-to-bottom, left to right. Here, the correct focus order for those buttons would be:

  1. Save and add another
  2. Save and continue editing
  3. SAVE (not sure why this one is shouting)

We need to change the order of the buttons in the DOM so it matches the visual order. Or if we do want the default button to be reached first, then remove the styling that changes the visual order currently. I assume this implementation was done intentionally, but it’s confusing for keyboard users if focus moves counter to the expected sequential flow of the elements.

Attachments (1)

tab-stop-modelform.png (41.6 KB) - added by Thibaud Colas 6 months ago.

Download all attachments as: .zip

Change History (9)

Changed 6 months ago by Thibaud Colas

Attachment: tab-stop-modelform.png added

comment:1 Changed 6 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 6 months ago by Mehrdad Moradizadeh

Yes, I agree with you. I have made several mistakes before because of this design decision. I think the order should be "save", "save and add another", and "save and continue editing" respectively. I would like to work on this issue if gets accepted.

comment:3 Changed 6 months ago by Mariusz Felisiak

Cc: Carlton Gibson elky added
Triage Stage: UnreviewedAccepted
Type: BugCleanup/optimization

I agree that it's confusing. The situation is even more complicate on edit views where we also have a Delete button. Moreover we need to remember about RTL languages. I'd reorder the buttons as follows:

  • LTR: Save, Save and add another, Save and continue editing, Delete,
  • RTL: Delete, Save and continue editing, Save and add another, Save,

maybe with a small visual space before/after Delete (but I'm not a designer).

comment:4 Changed 6 months ago by Alexander Freyr Lúðvíksson

Owner: changed from nobody to Alexander Freyr Lúðvíksson
Status: newassigned

comment:5 Changed 6 months ago by Alexander Freyr Lúðvíksson

Has patch: set

comment:6 Changed 6 months ago by Mariusz Felisiak

Patch needs improvement: set

comment:7 Changed 4 months ago by Mariusz Felisiak

Patch needs improvement: unset
Triage Stage: AcceptedReady for checkin

comment:8 Changed 4 months ago by Mariusz Felisiak <felisiak.mariusz@…>

Resolution: fixed
Status: assignedclosed

In b4817d20:

Fixed #33728 -- Reordered submit buttons in admin.

Thanks Tom Carrick and Thibaud Colas for reviews.

Note: See TracTickets for help on using tickets.
Back to Top