# Usability of server error traceback collapsibles

**URL:** <https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322>\
**Category:** Accessibility\
**Created:** [January 23, 2024, 8:19pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322 "2024-01-23T20:19:38Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [January 23, 2024, 8:19pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/1 "2024-01-23T20:19:38Z")

</div>

Hey all.

Please have a look at this UX issue: `[Issue #35137](https://code.djangoproject.com/ticket/35137)`

I already made some suggestions on how to improve the accessibility.

What do you think? What would be a good approach?

Cheers  
Denis

---

<div class="post-metadata">

**Author:** ![reedjones](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/reedjones/32/18450_2.png) [@reedjones](https://forum.djangoproject.com/u/reedjones)\
**Post date:** [January 24, 2024, 3:48am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/2 "2024-01-24T03:48:01Z")

</div>

Maybe just me but when I see that little carot/arrow thingy by the box it tells me that it’s collapsible - also the box itself kind of suggests that it’s an accordian. If you’re looking for UI stuff maybe one thing to look at could be the accessibility of the error pages? I’ve seen some comments that accessibility improvements are much needed.

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [January 25, 2024, 2:56pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/3 "2024-01-25T14:56:12Z")

</div>

Hi, I would like to write a patch for this, but this is also my first patch and might need light guidance, would anyone point me in the general direction for writing a patch?  
I have read the contribution guideline and now will be searching the code base for this.

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [January 27, 2024, 8:21am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/4 "2024-01-27T08:21:56Z")

</div>

Hay!

I wrote this quick prototype to discuss the implementation.

 ![unactive](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/9/4/945ee5ff6d719db82c58752935bf5d3f7f273243.png)  
Notable Additions :

- Hovering over an error reveals a message `Click to Expand` and there is an accordion style `+` at the right end of the error
- When Clicked it changes to `Click to Collapse` and the symbol at the right changes to the `-`.  
 ![active](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/c/b/cb650a5466af709d564fdb7efb2714fc290259ab.png)

On the code side, made some changes to the toggle function

```js
  function toggle() {
    for (var i = 0; i < arguments.length; i++) {
      var e = document.getElementById(arguments[i]);
      if (e && i < arguments.length - 2) {
        e.style.display = e.style.display == "none" ? "block" : "none";
        e.classList.toggle("active");
      } else if (i == arguments.length - 2) {
        e.classList.toggle("active"); 
      } else if (i == arguments.length - 1) {
        e.textContent = e.textContent.trim() == "-" ? "+" : "-"; 
      }
    }
    return false;
  }

```

and also added a couple of CSS rules handling the aesthetic side

```auto
  div.context ol li:hover::after{ /* #######ADDED###################### */
    content: "Click to Expand";
    position: absolute;
    background: white;
    color: black;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
  }
  div.context ol.active li:hover::after{ /* #######ADDED###################### */ 
    content: "Click to Collapse";
  }

```

and

```auto
  div.context ol.context-line li span { /* #######ADDED###################### */
    position: absolute;
    right: 56px;
    font-size: 30px;
    transform: translateY(-100%);
  }

```

If this sounds alright then I own the ticket and then submit a patch.

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [January 27, 2024, 10:09am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/5 "2024-01-27T10:09:09Z")

</div>

Some changes made per the suggestions in the ticket tracker

- Button on the left side which is accessible through the button  
 ![button-collaspe](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/1/9/1915e6468e39adda30152856f217337b1cd66daf.png)  
 ![button-expand](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/2/0/20845c0d868514913623652186a07ba3607a927d.png)

Behaviour:  
When hovering a pointer over the button it will grow in size marginally and change colour (helping to indicate that its interactive)

---

<div class="post-metadata">

**Author:** ![thibaudcolas](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/thibaudcolas/32/3956_2.png) [@thibaudcolas](https://forum.djangoproject.com/u/thibaudcolas)\
**Post date:** [February 2, 2024, 9:54pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/6 "2024-02-02T21:54:32Z")

</div>

@abhijeet-singh in the future please check discussions on tickets and whether someone else might be working on a task before creating a patch. From reading [#35137](https://code.djangoproject.com/ticket/35137), it seems clear to me @denisiko intended to work on this and put this forum thread together as part of working on a patch.

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [February 2, 2024, 11:21pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/7 "2024-02-02T23:21:24Z")

</div>

In my defence, the ticket was not assigned to anyone so I thought it might be ok to work on it , but you argument is perfectly valid too. I will ensure that this will not repeat in future

Thanks for pointing it out

---

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [February 3, 2024, 9:55am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/8 "2024-02-03T09:55:09Z")

</div>

Hi.

I don’t mind if someone goes ahead with their suggestions or even their own patch. I was just under the impression that now was not the right time to already implement something but rather discuss certain problematic UX issues. That’s why I did not yet come up with a patch.

So what would be the best approach now? Should I write my own patch so there are at least 2 design alternatives to discuss? Or do we wait for feedback on usability and accessibility?

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [May 4, 2024, 9:18pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/9 "2024-05-04T21:18:05Z")

</div>

I wrote a patch for this and was suggested to use the `<details>` tag and this introduced some changes in the UI elements, I have created a Discord Thread to discuss this and also submitted and Code Pen, I would appreciate it if you checked it out and provided feedback.

([Discord](https://discordapp.com/channels/856567261900832808/1236418777323671633))

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [May 7, 2024, 5:47pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/10 "2024-05-07T17:47:45Z")

</div>

Hay Again!  
I was working on `#35137` - Making Error Container Elements Interactive and I submitted a patch that involved me changing some of the JS code in the `technical_500.html` and was suggested to use `<details>` and `<summary>` tag citing its superior accessibility and less bloated code (effectively eliminating JS from the file and reducing CSS) and it turns out that there is no way to bi-bidirectionally expand the `<details>` tag ( expanding both forms below and above the tag ), so implementing it would result in major changes in the said UI element so I wanted to discuss its approach with the community before implementing the patch

https://codepen.io/abhijeet-singh800/embed/preview/VwNJJrp?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=VwNJJrp

Also, other places in the same file might use some refactoring using the `<details>` tag and possibly in other files too, if the community decided to refactor them, should it require its own ticket or submit a patch for them in the current ticket will do the job?

---

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [June 13, 2024, 3:35pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/11 "2024-06-13T15:35:12Z")

</div>

Hello.

I think I solved the mentioned issues and came up with my own solution using HTML5 details/summary tags. Check out my Pull Request linked in the Django ticket for more info.

 ![collapsibles](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/9/5/95f4f094264a9f4f801c87d4165e251ab8ea5cd3.png)

Having the elements positioned exactly like before required some additional JS. The end result however is now just like using built-in details/summary tags without JS and works by handling the attribute “open” on the summary node (plus the addition of a placeholder element for the inner error code line).

The accessibility issues are also solved now (“stepping” through the errors via tab/shift+tab and the enter key). Notice the E-Mail mode of the 500 debug page: It also works with the new changes and keeps the old layout to not falsely indicate interactivity.

Cheers

---

<div class="post-metadata">

**Author:** ![abhijeet-singh](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/abhijeet-singh/32/13069_2.png) [@abhijeet-singh](https://forum.djangoproject.com/u/abhijeet-singh)\
**Post date:** [June 16, 2024, 4:33am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/12 "2024-06-16T04:33:30Z")

</div>

Hay @denisiko  
I prefer your approach as it looks similar to the original approach and would be much more familiar to the developers apart form that the test looks great too.  
Great Work

---

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [June 17, 2024, 9:20am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/13 "2024-06-17T09:20:11Z")

</div>

Thanks @abhijeet-singh.

What do the other guys from DSF and the accessibility team think? (e.g. @thibaudcolas)

---

<div class="post-metadata">

**Author:** ![tom](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/tom/32/6818_2.png) [@tom](https://forum.djangoproject.com/u/tom)\
**Post date:** [June 25, 2024, 7:21pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/14 "2024-06-25T19:21:49Z")

</div>

Sorry - I have been following this but didn’t notice the recent replies. I will try to have a look at the PR soon.

---

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [August 6, 2024, 1:52pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/15 "2024-08-06T13:52:05Z")

</div>

No worries and thank you 🙂

---

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [September 3, 2024, 7:46am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/16 "2024-09-03T07:46:35Z")

</div>

Hey @tom. Do you know when you will have time to look into this?

---

<div class="post-metadata">

**Author:** ![tom](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/tom/32/6818_2.png) [@tom](https://forum.djangoproject.com/u/tom)\
**Post date:** [September 3, 2024, 10:47am UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/17 "2024-09-03T10:47:52Z")

</div>

@denisiko I won’t find the time in the coming weeks so I’ve asked someone else from the team to take a look. Hopefully it doesn’t take too long.

---

<div class="post-metadata">

**Author:** ![denisiko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/denisiko/32/18647_2.png) [@denisiko](https://forum.djangoproject.com/u/denisiko)\
**Post date:** [September 3, 2024, 4:15pm UTC](https://forum.djangoproject.com/t/usability-of-server-error-traceback-collapsibles/27322/18 "2024-09-03T16:15:42Z")

</div>

Okay thank you @tom.