Govuk-frontend: Deprecation warning on details component

[alex-ju]

Description of the issue

The usage of ::webkit-details-marker pseudoselector in details component is flagged as deprecated in Google Chrome for a while now. That's not news, but this deprecation started to affect page rank on 24 March 2021, causing a drop in 'Best Practices' from 93 to 87 for GOV.UK.

Steps to reproduce the issue

Load any page that requires the details component styles and check the console.
Check SpeedCurve or run a Lighthouse audit to see how this affects page ranking.
For people with access to GDS SpeedCurve here are the before and after reports.

Actual vs expected behaviour

No deprecation warnings.

Environment (where applicable)

Google Chrome Version 89.0.4389.90 (Official Build) (x86_64)
macOS 10.15.7 (19H524)

[36degrees]

Thanks for flagging this, @alex-ju.

It looks like our use of display: inline-block on the summary mirrors the 'modern' way of doing this as suggested in https://chromestatus.com/feature/6730096436051968.

However, I haven't been able to find a way to remove references to ::-webkit-details-marker without causing duplicate markers to appear in Safari and Chrome < 86. There are a couple of other comments on the tracking bug referenced that seem to agree that this is a problem.

It looks like the deprecation warning is being removed in Chrome 91 – as referenced here and from testing in Chrome Canary (91.0.4461.0), where the console message is no longer shown and a lighthouse test returns 100 for best practises on http://localhost:3000/components/details/preview (versus 93 in Chrome 89.0.4389.90).

I'm therefore wondering whether we can just wait this one out – as far as I can tell, we're doing all the right things here and Chrome is just being overzealous by flagging this as an issue.

[alex-ju]

However, I haven't been able to find a way to remove references to ::-webkit-details-marker without causing duplicate markers to appear in Safari and Chrome < 86. There are a couple of other comments on the tracking bug referenced that seem to agree that this is a problem.

Same here – I gave it 1h or so and couldn't find a way forward.

It looks like the deprecation warning is being removed in Chrome 91 – as referenced here and from testing in Chrome Canary (91.0.4461.0), where the console message is no longer shown and a lighthouse test returns 100 for best practises on http://localhost:3000/components/details/preview (versus 93 in Chrome 89.0.4389.90).

Great find! I agree Chrome is overzealous with this.

Would it be ok if I leave this open until 91 comes out?

[Nooshu]

For reference, stable of 91 is due May 25th.

[36degrees]

Chrome 91 is now the current stable release.

Re-running Lighthouse best practises audit in Chrome 91 against https://govuk-frontend-review.herokuapp.com/components/details/preview shows 0 failed audits and returns a score of 100/100.

@alex-ju based on that and the discussion so far, are you happy to close this now?