Collapsible error container elements do not indicate that they are interactive

[Denis Anuschewski]

On the debug page for a server error the collapsible elements in the traceback view do not clearly indicate that they are in fact interactive:

1) The little icon on the right corner is way too small I think and also far away from the element's inner content (see ​https://ant.design/components/collapse for a possible alternative).

2) The element does not stand out in a way that it indicates it's interactive. It could have e.g. a border to separate it from the background.

Also the elements are not selectable via keyboard and the tab button.

Example: ​https://django-admin-tests.netlify.app/django_admin_tests/v5.1/english/defaults/500/

[Natalia Bidart]

Accepting on the basis that I have used Django for more than 15 years and I did not know this existed!!!
I agree that improving the discoverability of this feature would certainly be a positive thing for the framework.

Denis, would you like to prepare a patch? I would suggest to first reach out to the Django Accessibility Team (​via the Django forum) to agree on a proper accessible design fix. Thank you!

[Denis Anuschewski]

Hey Natalia.

Thx, will do that.

Shout out to Thibaud Colas who 1st found this behaviour.

[Denis Anuschewski]

​https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322

[Thibaud Colas]

Note there are three separate issues here:

1. Bug: the current implementation is unusable for keyboard and voice control users due to adding interactivity to list item elements.
2. Somewhere between a bug and a usability fail: placing the "this is collapsible" signifier all the way to the right means it’s more or less impossible to spot for users of screen magnification
3. And usability issue – it’s hard to understand this is interactive.

I’d recommend fixing them all at once by introducing a "toggle" button to the left of the line number, so we can solve the issue at hand without reinventing the current designs. That button will be focusable and can either have a visible "toggle" label or icon + tooltip, plus hover styles (see for example ​how GitHub does it).

[Denis Anuschewski]

Another suggestion for a simple solution:

Adapt the icon for the collapsible link "Local vars" just under the gray error box (placed on the left of the line number just like Thibaud mentioned).
Plus implement a thin border to let the box stand out more.

[Abhijeet Singh]

Hay!

Have a look at this quick prototype
Notable Additions :

• Hovering Messages
• And a Button on the left side to indicate that the element is interactable and also accessible by the keyboard

Check it out on the discussion page: ​https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322

[Abhijeet Singh]

I created a PR: ​https://github.com/django/django/pull/17784

[Sarah Boyce]

Note that #35189 also deals with collapsible elements and accessibility concerns might be similar both (and might make sense to be reviewed together).