Use <details> instead of roll-your-own content hiding

[fluffy-critter]

Pitch

Update the web UI HTML to use <details> instead of <button> for content warnings, to improve the markup semantics.

This is similar to #1464

Motivation

This would improve accessibility, particularly for users of screen readers.

[jalcine]

Even using a :focus approach could work here!

[ZoeBijl]

Related to the :focus part: #12275

[nightpool]

@fluffy-critter Can you (or someone else) update this issue with the actual, practical accessibility benefits using <details> would provide here? Just saying "This would improve accessibility" is not enough justification—what accessibility goals or success criteria are we attempting to fulfill, or currently don't meet? (aside from the Read More :focus issue, which is unrelated and should be tracked separately)

In particular, as far as trade-offs go, is it possible to keep details collapsed/expanded state in sync across multiple different DOM elements, the way our current content warnings work? (If a status's content warning is expanded, then it is expanded in all views a status can be shown in, and similarly when it is collapsed)

[nightpool]

(The :focus issue is unrelated, it's an unintentional bug in the CSS code for statuses, caused by weird selector priority, and would still be the case using <details> or any other element)

[fluffy-critter]

Expanding/collapsing <details> elements can be accomplished by setting/clearing the .open attribute on them. See the snippets at https://stackoverflow.com/a/43009778/318857 for examples.

As far as the specific accessibility concern, using a semantic tag means that a screen reader has a better chance of understanding what the tag is and providing appropriate voice narration accordingly. It's good to be proactive about supporting these things so that the greater ecosystem gets a positive impact in the long term; breaking the chicken-and-egg accessibility cycle is important.

(Which is to say it isn't an urgent accessibility need at the moment, but it's the right thing to do.)

[bkil]

Related: #17115