Add Algolia docs search

[taysea]

Deploy Preview

What does this PR do?

Draft PR to demo use of "Algolia DocSearch" to site. Search is a key functionality of the docs site and we have limited resources at the moment to enhance our in-house search algorithm. This PR demos use of Algolia's free Docsearch (free for docs sites). Algolia is used by other docs site like Material UI, Tailwind CSS, and Gatsby (among many others).

Algolia handles creating the search index and we just render the component and can adjust styling of the modal using CSS. I've taken a stab to align with our brand colors/somewhat closely to the existing search modal.

Click on the "Search" icon in the header to view.

Notes/To dos:

• Fix TestCafe tests which are looking for old search element. NOTE: also updated deeplinks test to just be checked in the search test and remove need for the separate file/redundant test.
• See if we can have search results use Next Link as opposed to native HTML anchor (to improve routing/reload performance): I believe we can leverage transformItems from their API: https://docsearch.algolia.com/docs/api#transformitems
• CSS for dark mode

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[halocline]

Nice!

[jcfilben]

Algolia does a good job of indexing our site, lots of results coming up that didn't with our current search implementation.

I tested using voice over and felt that the accessibility of the search wasn't a great experience. A few things I noticed:

• After opening the search it doesn't let me move my focus onto the text input, even though when I start typing the text does get entered into the textinput. It also reads out like I am on a button. If I activate the button it will close the search window. This makes it pretty confusing to determine what you are actually interacting with, is it the textinput or a close button? It seems like both.
• When I type into the search the results get read out as I am typing which feels a bit distracting. It seems like there should be more of a delay before the results start reading out.
• If I navigate through the results list and try to get back up to the text input it is not read out and instead the first result is read when you reach the text input.
• While focused on a result I can't interact with the button by pressing 'space' or 'ctrl+option+space' in voice over. I have to press 'enter' to interact with it.
• Pressing 'ctrl+option+space' on the clear button in the text input causes the search modal to close.

[jcfilben]

When viewing the site in dark mode, this search icon color shows up as a dark grey instead of white

[taysea]

Good note -- I didn't touch any dark mode styling yet.

[taysea]

Added dark mode styling.

[taysea]

Algolia does a good job of indexing our site, lots of results coming up that didn't with our current search implementation.

I tested using voice over and felt that the accessibility of the search wasn't a great experience. A few things I noticed:

Great notes. I'm wondering a few things:

• Can we connect with Bill Tipton to test both the Algolia modal and our existing one? I'd be interested to see how he traverses as well and what the pros/pain points are in both experiences. It feels like for keyboard and mouse users the experiences works, and the algolia experience is a huge step forward in search experience -- so would be nice to support but not if it's completely unreachable for a screen reader user.
• Algolia docsearch is open source -- if there's a "quick win" from findings with Bill I wonder if we try submitting an issue to their repo and gauge the response rate to that? Or if we think we could submit a contribution, see how that's received?

[jcfilben]

Great notes. I'm wondering a few things:

Can we connect with Bill Tipton to test both the Algolia modal and our existing one? I'd be interested to see how he traverses as well and what the pros/pain points are in both experiences. It feels like for keyboard and mouse users the experiences works, and the algolia experience is a huge step forward in search experience -- so would be nice to support but not if it's completely unreachable for a screen reader user.
Algolia docsearch is open source -- if there's a "quick win" from findings with Bill I wonder if we try submitting an issue to their repo and gauge the response rate to that? Or if we think we could submit a contribution, see how that's received?

I think this would be a great opportunity for us to connect with Bill and get more info on the screenreader experience

[halocline]

Knowing our users and intended audience, and the immediate benefits which dramatically improve upon the current search experience, I think we should move forward with this implementation as is. Then create follow on issues for providing a screen reader friendly alternative and/or PR contributing to the Algolia project.