Research any use cases for non phrasing content inside accordion summary line

[hannalaakso]

What

As part of the new accordion iteration, we're

• adding a new ‘Show this section’ text to the button
• moving the summary line, if it's being used, to be inside the button

We move the summary for design purposes:

We’ve decided to move the summary in order to better visually illustrate the additional context of accordion heading by placing it directly beneath the heading as opposed to placing it directly beneath the reveal/expand button

From 42e80d9

However, this restricts what elements the summary can contain as buttons can only contain phrasing content.

We plan to update our docs to reflect this change and also make it clear in the release note of the breaking release 4.0 that in the new design the heading/summary should explain the content of the section, and using block level elements in this context probably isn't appropriate or necessary.

Why

This feels like an edge case and low risk but we should do a bit of research to see if there are any known use cases of elements other than phrasing content being hosted inside accordion summaries.

Further detail

We don't have any evidence that services need to include any elements other than phrasing content inside of the summary line. In any such cases, it’s likely that the team are not using the accordion as intended (and as part of this design iteration we’re looking to make the guidance explain more clearly that accordions should be used as last resort - see alphagov/govuk-design-system#1684 for more info) and that the new more button like design of the section headings would be harder to understand if the summary spanned multiple lines.

Who needs to know about this

Developers

Done when

• We’ve asked the community of any known use cases of elements other than phrasing content being hosted inside the summary line
• We've analysed some GitHub repositories to find any examples of such use cases

[hannalaakso]

Update

• asked on x-gov Slack for any examples but didn't get any replies
• did a search of GitHub (thanks @frankieroberto for providing me with a list of 166 GitHub gov repos using the accordion!)

Findings from scouring GitHub

• Whilst I didn't get to look at every single example, overall the usage of the summary seemed to be single line text. I did find a couple of examples of things like <span> and <br> tags being used but these are phrasing content.
• The only example I found that seemed to contain non phrasing content was here and here but after asking around I didn't find any evidence that this pattern had made its way to a live service and in any case the usage of the paragraph tag and some kind of badge in the summary line seem pretty non-standard and stretching what the accordion is intended for and not a use case we'd advise. edit: apparently the code template is in use on an internal facing tool, but there's a lack of clarity about the future of the (covid related) tool, and in any case the use case doesn't appear to be one we'd support.