[Django] #35137: Collapsible error container elements do not indicate that they are interactive
Django
interactive
------------------------------------------------+------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: Uncategorized | Version: 5.0
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
------------------------------------------------+------------------------
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/]
--
Ticket URL: <https://code.djangoproject.com/ticket/35137>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
interactive
Reporter: Denis Anuschewski | Owner: nobody
Cleanup/optimization |
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Denis Anuschewski):
* Attachment "stacktrace-error.png" added.
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: | Status: new
Cleanup/optimization |
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> 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/]
New description:
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/]
[[Image(https://code.djangoproject.com/attachment/ticket/35137/stacktrace-
error.png)]]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:1>
Django
Old description:
> [[Image(https://code.djangoproject.com/attachment/ticket/35137
> /stacktrace-error.png)]]
New description:
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/]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:2>
Django
interactive
Reporter: Denis Anuschewski | Owner: nobody
Component: Uncategorized | Version: 5.0
Severity: Normal | Resolution:
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Denis Anuschewski):
* type: Cleanup/optimization => Bug
Old description:
> 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/]
New description:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/35137
/stacktrace-error.png)]]
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/]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:3>
Django
interactive
Reporter: Denis Anuschewski | Owner: nobody
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Natalia Bidart):
* cc: Thibaud Colas, Tom Carrick, Sarah Abderemane (added)
* type: Bug => Cleanup/optimization
* version: 5.0 => dev
* component: Uncategorized => Error reporting
* stage: Unreviewed => Accepted
Comment:
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
([https://forum.djangoproject.com/c/internals/accessibility/26 via the
Django forum]) to agree on a proper accessible design fix. Thank you!
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:4>
Django
interactive
--------------------------------------+------------------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by Denis Anuschewski):
Hey Natalia.
Thx, will do that.
Shout out to Thibaud Colas who 1st found this behaviour.
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:5>
Django
interactive
--------------------------------------+------------------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by Denis Anuschewski):
https://forum.djangoproject.com/t/usability-of-server-error-traceback-
collapsibles/27322
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:6>
Django
interactive
--------------------------------------+------------------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
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
[https://github.com/django/django/commit/3f6d939c62efd967f548c27a265748cc2cc47ca5
how GitHub does it]).
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:7>
Django
interactive
--------------------------------------+------------------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:8>
Django
interactive
--------------------------------------+------------------------------------
Reporter: Denis Anuschewski | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Hay!
Have a look at this quick prototype
Notable Additions :
Hovering Messages
[[Image(file:///home/prometheus/Pictures/hover-expand.png)]]
[[Image(file:///home/prometheus/Pictures/hover-collaspe.png)]]
And a Button on the left side to indicate that the element is interactable
:
[[Image(file:///home/prometheus/Pictures/button-expand.png)]]
[[Image(file:///home/prometheus/Pictures/button-collaspe.png)]]
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:9>
Django
interactive
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Abhijeet Singh):
* owner: nobody => Abhijeet Singh
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:10>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Abhijeet Singh):
* cc: Abhijeet Singh (added)
* has_patch: 0 => 1
Comment:
I created a PR: https://github.com/django/django/pull/17784
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:11>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Note that #35189 also deals with collapsible elements and accessibility
concerns might be similar both (and might make sense to be reviewed
together).
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:12>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
* needs_tests: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:13>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 1 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Hay! I just opened a Discord Thred to discuss the Patch Improvement, I
would appreciate if you checked it out
(https://discordapp.com/channels/856567261900832808/1236418777323671633)
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:14>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 1 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "collapsibles.png" added.
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 1 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Hey there.
In the meantime I came up with my own approach. You can check out my PR if
you like: https://github.com/django/django/pull/18198
The collapsible code line elements are now rendered as details/summary
tags and are slightly more highlighted by having a thin border plus a
differently colored icon (+/-) which indicates toggling functionality.
Some javascript was needed for adjusting the behavior of the
details/summary tags as they did not allow the center code line element to
be in the middle after opening (it always pops up on top). But it's not
much and the end result works and feels the same as with native details
and summary tags. Plus the HTML markup is now more semantic.
With the new changes you can also "step" through the elements by clicking
on tab/shift+tab and easily open and close them without losing focus.
Keyboard ninjas will hopefully appreciate this ⌨️🥷
[[Image(https://code.djangoproject.com/attachment/ticket/35137/collapsibles.png)]]
Cheers
Denis
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:15>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Abhijeet
Type: | Singh
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
-------------------------------------+-------------------------------------
* needs_better_patch: 1 => 0
* needs_tests: 1 => 0
Comment:
From the last [https://forum.djangoproject.com/t/usability-of-server-
error-traceback-collapsibles/27322/17 forum post] it appears the new PR is
ripe for an initial review & assessment about test coverage.
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:16>
Django
interactive
-------------------------------------+-------------------------------------
Type: | Anuschewski
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Jacob Walls):
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:17>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Denis
Type: | Anuschewski
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Replying to [comment:16 Jacob Walls]:
error-traceback-collapsibles/27322/17 forum post] it appears the new PR is
ripe for an initial review & assessment about test coverage.
Yes indeed, thanks for drawing some attention on this issue. I would be
very happy to get some feedback and continue to work on the debug page.
--
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:18>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Denis
Type: | Anuschewski
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
* needs_tests: 0 => 1
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:19>
Django
interactive
-------------------------------------+-------------------------------------
Reporter: Denis Anuschewski | Owner: Denis
Type: | Anuschewski
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
-------------------------------------+-------------------------------------
* needs_better_patch: 1 => 0
Ticket URL: <https://code.djangoproject.com/ticket/35137#comment:20>