Add focus state for control bar buttons

The focus can now move to the canvas so it is no longer a source of
confusion. It is also important to indicate that they have focus now
that we actually respect it.

diff --git a/app/styles/base.css b/app/styles/base.css
index b945456b3a144912cf6065ebe74a80902fd50eba..790837a0f2c6b689bef22abace75a726a28878dd 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -457,11 +457,15 @@ select:active {
   padding-top: 5px;
   padding-bottom: 3px;
 }
-:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
+/* Android browsers don't properly update hover state if touch events
+ * are intercepted, but focus should be safe to display */
+:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover,
+.noVNC_button.noVNC_selected:focus {
   border-color: rgba(0, 0, 0, 0.4);
   background: rgba(0, 0, 0, 0.2);
 }
-:root:not(.noVNC_touch) .noVNC_button:hover {
+:root:not(.noVNC_touch) .noVNC_button:hover,
+.noVNC_button:focus {
   background: rgba(255, 255, 255, 0.2);
 }
 .noVNC_button.noVNC_hidden {