Add tab navigation to the search box

[aschlaep]

This adds a tab index to the entry and each button/toggle in the search box. Now you can navigate from the search input to any of the buttons using the tab key and activate them with enter. This also adds a box shadow to the buttons when you navigate to them via the keyboard (but not when you click on them). Lastly, this changes the cursor to the pointer on the buttons.

I couldn't really find any similar UX in JupyterLab but this seemed like it'd be useful. I started to do this in search & replace (#6081), where it will be necessary to move between the two boxes, but I figured it'd be worth putting in early and separate. Any suggestions on improving the CSS or the look of the box shadow would be much appreciated.

Gif demo using tab and shift+tab to navigate, enter to activate the buttons:

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[lresende]

LGTM, I have tested the patch via the launch binder button and it all looks good. I will leave the request for suggestions on improving the CSS for others to comment.

[aschlaep]

Thanks @lresende! I've got some plans for making this look better, hoping to get those in early next week.

[aschlaep]

Looks much better now!

[jasongrout]

Nice! I fixed one small thing in 7bc0ff1

[jasongrout]

The Windows JS is failing, but the Linux JS passed. The Windows JS test failed on the @jupyterlab/notebook, NotebookActions, #runAndAdvance(), should stop executing code cells on an error. The error was that it had a timeout of 30000ms.