#33728: Tab order should match visual order for admin model forms’ submit
buttons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Alexander
Type: | Freyr Lúðvíksson
Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Ready for
keyboard, ux | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by awiebe):
* status: closed => new
* resolution: fixed =>
Comment:
Replying to [ticket:33728 Thibaud Colas]:
I believe that applying a **tabindex** attribute, which forces the button
marked 6 to come before the button marked 5 is sufficient to fix the
accessibility issue without a breaking change for people who like to click
the buttons with the mouse.
I think that actually the best solution is probably for the tabbing
preference to be set int the `settings.py`. While obviously the ideal
order is probably not to put delete first. I think that the order that
someone who is visually impaired might want to traverse the form is going
to be up to their workflow preference. If they want to create a lot of
objects with manual entry, then it should flow from left to right. But if
their job involves opening an existing customer record, making changes,
and then saving it back, it would be preferable to have the save button
first.
> 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:
>
> [[Image(https://code.djangoproject.com/raw-attachment/ticket/33728/tab-
stop-modelform.png)]]
>
> 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/33728#comment:11>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/010701898f67753e-f1b6a875-292a-4847-87aa-2e83133ee6ce-000000%40eu-central-1.amazonses.com.
