Add css rules for navigation buttons when focused in screencast.

Accessibility issue: when using keyboard to navigate to navigation
buttons (back, forward, and reload) in screencast, they are not focused.

We noticed that when the focus is supposed to be on the said buttons,
the button has focus but there is no visual indication. We add a css
rule so that the focus is shown the same way as being hovered over.

Image before: (from navigation url, use shift+tab, to reload or back
buttons. Button does not show focus.)

https://imgur.com/BXjJHmp

Images after: (same as above, but the button has an outline color
indicating focus)

https://imgur.com/dixx9Vp


Change-Id: Iac23a5a05065207f706c03f2c19ebd182e296085

CrBug: https://bugs.chromium.org/p/chromium/issues/detail?id=1081486
Change-Id: I4f77a42e09aaa65386fa5d49542e8725428d263c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2197241
Reviewed-by: Shane Clifford <shanejc@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Commit-Queue: Songtao Xia <soxia@microsoft.com>

front_end/screencast/screencastView.css

@@ -58,8 +58,9 @@
     width: 23px;
 }
 
-.screencast-navigation button:hover {
-    border-color: #ccc;
+.screencast-navigation button:hover,
+.screencast-navigation button:focus {
+    border-color: var(--accent-color-hover);
 }
 
 .screencast-navigation button:active {