On the homepage, on desktop, focus the search bar on load

[larsyencken]

Problem

For a frequent user, when opening the homepage, you would most like to search for something. However, you have to click on the search bar to get started.

Proposal

On desktop, the search box should be entered on load so that you can just begin typing right away.

Technical notes

The data catalog at /data should have the same feature.

[danyx23]

@ikesau do you think there is an accessibility issue with setting the focus into the search bar on page load?

We just talked with Martin and he explained that the search bar is initally a div and only the client side library turns it into an input. If this doesn't work in all cases because of this, that would be totally fine.

[ikesau]

@larsyencken are you aware that Marcel added a / shortcut to focus the search? (#3916)

re: accessibility: it's preferable to implement this with an input's autofocus attribute so that users can disable it, but given the weirdness of our Autocomplete implementation, this will probably involve quite a bit of juggling to manage.

I briefly experimented with ways to improve this during the offsite - autocomplete-js must mount inside a div, so we could try SSR'ing an input and a div, and then "hotswap" our input and its state (its value and whether or not it's focused) with the autocomplete-js input.

As for the UI, our Autocomplete component expands to show suggested searches as soon as it's focused:

I don't think we'd want this to be the default view for the homepage, so we'd need to find a way to replicate google's behaviour (only showing suggestions after a key has been pressed)

All in all, quite complex!

[larsyencken]

Hmmm 🤔

Is this easier on the data catalog, where we implemented our own component?

[ikesau]

Yup! it's as simple as adding the autoFocus attribute to the searchbar input element (also there's no dropdown in the DC so we don't have to worry about handling that, for now)

[ikesau]

Ah! I see that the autocomplete-js library also has an autofocus prop

So then the only work there would be hiding the dropdown when it's autofocused.

[ikesau]

We've decided to not autofocus the homepage because it would mean we'd have to get rid of the "Featured Searches" feature, and perhaps over-nudge users to search instead of browsing the homepage.

[larsyencken]

Opened again in #4384