Implement new accordion design for FAQ page

[carolstran]

💓 This PR is part of Google Season of Docs 💓

With the introduction of more questions and new sections in #982, the current format doesn't work and it's difficult to use. That's why this PR introduces a new design where all of the questions are listed by section and the answers are revealed on click or keypress.

🔗 Preview: https://graphql-faq-preview.netlify.app/faq/
⚠️ All of the content is the same as in #982, this PR is purely code/design changes.
🥪 Yes the commits will be squashed.

Here's an overview of the functionality:

• Answers revealed under question on click or keypress.
• Relative URL to the specific question available on click or keypress.
• When someone shares a link to a specific question, the page will auto-scroll to that question and the answer will be opened automatically.
• Small animation on the + icon when revealing question.

Known issues:

• No transition on the answer text when revealed.
• Screen reader UX a bit repetitive.

Current design:

[mikeesto]

Nice work @carolstran! Is your screenshot from Safari? On Chrome (Windows) there's a black focus outline and also a stray black pixel (see to the left of the "W" in Why):

Just wanted to let you know in case you weren't aware. By no means a blocker, I think the focus outline is actually useful for accessibility(?) although it looks a little out of place.

[carolstran]

Hey @mikeesto, thanks for taking a look ☺️ The screenshot above is from Firefox and below is how it looks on my machine with the various browsers... but I'm also on Mac... 🤔

As for the design of the focus outline, I definitely want to make sure it's prominent to aid keyboard navigation. I agree though that the blue (or in your view, black) looks a bit out of place - although we do have dark headers on the homepage and Code page so maybe that's an option. AFAIK we don't have any set styles for the focus outlines so it uses whatever is native to the browser.

I'm not a designer so if anyone has strong design opinions let me know 👩🏼‍🎨 ✨

Chrome:

Firefox:

Safari:

❓ Also if we have any rules for which browsers/versions the site should support... someone let me know because that can also go in the contributing guidelines.

[orta]

Re: Browsers, I'd aim for the big 4: Chrome/Edge, Firefox, Safari and Safari on mobile

Re: selection outline - that's generally how I leave it also ( we have the same behavior in the sidebar on https://www.typescriptlang.org/docs/handbook/intro.html ) so it should be fine IMO