JavaScript error on headings with quotes

[tunetheweb]

Describe the bug

A number of pages have headings with double quotes in them.

To Reproduce Steps to reproduce the behavior:

1. Go to https://web.dev/control-focus-with-tabindex/#create-accessible-components-with-%22roving-tabindex%22
2. Open console
3. See error

index-b6f5342e.js:114 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 'a[href="#create-accessible-components-with-"roving-tabindex""]' is not a valid selector.
    at Z.scrollSpy (https://web.dev/js/index-b6f5342e.js:114:1410)

Expected behavior No JS errors.

I counted 200 of these across our articles so not uncommon, so ideally we'd add some code in the site build to strip these out.

[jeffposnick]

Rather than changing the slugs, it may be preferable to update the ScrollSpy code to properly escape those id values:

https://github.com/GoogleChrome/web.dev/blob/0856d43c327973b51d7407a60062ed7b3e3136c0/src/lib/components/ScrollSpy/index.js#L83-L88

[tunetheweb]

Or could do both?

Technically using double quotes without encoding them is invalid

[jeffposnick]

Fair enough! If using " characters violates a standard, then cleaning that up at the source is probably the best idea.