Replace fragile Firefox workaround for <summary> arrow icon

[robinwhittleton]

The styling for <summary> on GOV.UK currently expects the focus ring to shrinkwrap the text. This works fine in Chrome, but fails in Firefox. I worked around this with some horrendous code but:

1. that just resets Firefox back to not shrinkwrapping, and
2. it turned out that the Firefox implementation is based on the WHATWG suggested initial rendering for summary.

Having read through I started worrying that other browsers might implement the WHATWG initial styles in the future, but a different way of fixing the problem did occur to me. While we can’t use display: list-item directly, we can include the list icons directly using counters. The following example code seems to work in Firefox and Chrome at least, although it’s untested beyond that and would need a proper accessibility run through etc:

summary {
  display: inline-block;
  counter-reset: summary-closed;
}
summary::before {
  content: counter(summary-closed, disclosure-closed) " ";
}
details[open] > summary {
  counter-reset: summary-open;
}
details[open] > summary::before {
  content: counter(summary-open, disclosure-open) " ";
}

disclosure-closed and disclosure-open are the default markers used for <summary> elements. The " " just inserts an empty space inbetween the marker and the text.

Does this sound like a reasonable approach?

[36degrees]

This was done in https://github.com/alphagov/govuk_elements/pull/611.