Wrap backtrace of UI warnings/notices in a details element

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.

Seems like a neat request.

Tagging for tests as we will need coverage for this change.
Tagging for usability review so they can see if there is any issue. Will admit the arrows for the collapsed section just looked like bullets. If I didn't know to looked for collapsed not sure I would of clicked on them.

Adding screenshots

i've quickly tested the patch in drupal 9.5.3. . in general it is a great idea. i've noticed one or two details.

1. i've tested the patch with voiceover (in macos 12.6.1 - see voiceover.mp4). i've only tabbed to the first notice and pressed command-option-space as voiceover recommended. what i have expected is that the rest of the content of the detail element is announced (the one wrapped in the pre tag). but instead first the summary of the second warning, then the summary of the third warning, and after that the rest of the content of the first expanded detail element is announced. if i wouldn't been able to follow along visually that would be super confusing and i would be unable or at least have a hard time to distinguish between the content of the different warnings.
2. the color of the focus outline is dark blue on black in olivero which is probably not meeting WCAG SC 1.4.11. i was unable to switch on the focus in safaris webprofiler and get the actual hex values (instead i've only used a color picker which isnt providing the exact values :( ). but the values i got for the warnings in olivero were #24396f for the focus outline and #0e1215 for the background which leads to a contrast of 1.69:1 instead of 3:1 (and visually it looks like it has too less color contrast plus the outline isn'T shown on all four sides for none of the three detail elements). the outline would have to be checked for claro as well (but i dont know how to simulate such an error for claro as well - was just using the error test module with /error-test/generate-warnings)
3. and from a sighted users perspective the readability might be improved. i consider it difficult to grasp the visual structure. the content in pre tags might have a slightly too large line height. and some of the lines which are too long are instead of being wrapped just being cut/hidden. i wonder would it make sense to get some design input for the notices?

Patch 11 works on 10.1.x as well.

@rkoller Thx for the usability review in #16.
As of your points:
> 2. [colors]
> 3. [line height]
This is undoubtably theme dependent. I'd propose to tacke these optimizations in followup issues per theme.

> 1. [details difficult to navigate via text-to-speech assistive technology]
I'm not into a11y of details elements. I guess adding some kind of aria-foo attribute may help.
Do you have a suggestion what this might be?

As of a11y, a line of error summary with option to read aloud a backtrace is obviously better than a 50+-lines bob of backtrace.
As of theme optimization, i can open followups.
Now we have the feature and a green test.

Looked at this with @lauriii at DrupalCon Pittsburgh for the usability tag and didn't notice any issues with the change.

Testing out it functions as expected
Used the error_test module
Went to /error-test/generate-warnings
Errors were in a detail tag now.

Let's open a followup to deal with the accessibility issues raised in #16 through #20; I don't believe this is any worse than it was previously and so this shouldn't block commit.

Not eligible for backport as this is a UI change in 10.1.x, even if this is developer-facing only.

Committed 87afd2c and pushed to 11.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.

This needs work for the followups, see #24