Improve focus UI and keyboard navigation in reporter

[panzarino]

Current behavior:

Currently, the focus state when navigating and toggling the sidebar is fairly ugly and could be improved to be more similar to the hover state.

This is what it looks like now:

Keyboard controls:

Key	Action
tab	move down
shift + tab	move up
enter	open / close
space	open / close

Similar behavior in other software:

Webstorm

A click on the arrow will toggle open/closed, and a double click on the name or to the right of the name will open/close and shift focus.

Keyboard controls:

Key	Action
down	move down
up	move up
left	close
right	open (move down if already open)
enter	open / close

VS Code

A single click on the name (or anywhere on the line item) will open/close.

Keyboard controls:

Key	Action
down	move down
up	move up
left	close
right	open (move down if already open)
space	open / close
enter	rename file

Atom

A single click on the name (or anywhere on the line item) will open/close.

Keyboard controls:

Key	Action
down	move down
up	move up
left	close
right	open (move down if already open)
enter	open / close

My Two Cents

We should remove the focus state when clicking and only leave it for keyboard navigation like we do with the print to console button. In addition, the focus state for keyboard navigation should be the same as the hover state, and not include an outline around the name. The keyboard controls are fairly standard for the browser and don't require a change, but I figured I would include them to provide a broader picture (perhaps we could also add additional keyboard shortcuts).

[cypress-bot]

The code for this is done in cypress-io/cypress#7897, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 4.11.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.11.0, please open a new issue.