From 7dda85654e9edb07906ad9d0e193cf6acfefe8f0 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Sun, 30 Jan 2022 16:10:32 +0100
Subject: [PATCH] [UI] Avoid to have buttons in hover state after having been
 clicked (bug 836732)  - it aims to fix
 https://bugzilla.mozilla.org/show_bug.cgi?id=836732;  - replace :focus by
 :focus-visible for the buttons in the UI, according to the docs:    -
 https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible    - the
 button has the focus-visible state when it has been focused with the keyboard

---
 web/viewer.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 0541efd3b..0a545b24e 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -559,7 +559,7 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
 }
 
 .findbar label:hover,
-.findbar input:focus + label {
+.findbar input:focus-visible + label {
   color: var(--toggled-btn-color);
   background-color: var(--button-hover-color);
 }
@@ -753,12 +753,12 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
 }
 
 .overlayButton:hover,
-.overlayButton:focus {
+.overlayButton:focus-visible {
   background-color: var(--overlay-button-hover-bg-color);
 }
 
 .overlayButton:hover > span,
-.overlayButton:focus > span {
+.overlayButton:focus-visible > span {
   color: var(--overlay-button-hover-color);
 }
 
@@ -780,10 +780,10 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
 }
 
 .splitToolbarButton > .toolbarButton:hover,
-.splitToolbarButton > .toolbarButton:focus,
+.splitToolbarButton > .toolbarButton:focus-visible,
 .dropdownToolbarButton:hover,
 .toolbarButton.textButton:hover,
-.toolbarButton.textButton:focus {
+.toolbarButton.textButton:focus-visible {
   background-color: var(--button-hover-color);
   z-index: 199;
 }
@@ -847,11 +847,11 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
   margin-right: 2px;
 }
 .toolbarButton:hover,
-.toolbarButton:focus {
+.toolbarButton:focus-visible {
   background-color: var(--button-hover-color);
 }
 .secondaryToolbarButton:hover,
-.secondaryToolbarButton:focus {
+.secondaryToolbarButton:focus-visible {
   background-color: var(--doorhanger-hover-bg-color);
   color: var(--doorhanger-hover-color);
 }
@@ -917,7 +917,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
   padding-right: 4px;
 }
 .dropdownToolbarButton > select:hover,
-.dropdownToolbarButton > select:focus {
+.dropdownToolbarButton > select:focus-visible {
   background-color: var(--button-hover-color);
   color: var(--toggled-btn-color);
 }
@@ -959,7 +959,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
 }
 
 .dropdownToolbarButton:hover::after,
-.dropdownToolbarButton:focus::after,
+.dropdownToolbarButton:focus-visible::after,
 .dropdownToolbarButton:active::after {
   background-color: var(--toolbar-icon-hover-bg-color);
 }
@@ -971,9 +971,9 @@ html[dir="rtl"] .dropdownToolbarButton > select {
 }
 
 .toolbarButton:hover::before,
-.toolbarButton:focus::before,
+.toolbarButton:focus-visible::before,
 .secondaryToolbarButton:hover::before,
-.secondaryToolbarButton:focus::before {
+.secondaryToolbarButton:focus-visible::before {
   background-color: var(--toolbar-icon-hover-bg-color);
 }