From 9018140eef2bbadd1e3337e17cb0579f81a3b7e5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 3 Oct 2020 22:33:01 +0200
Subject: [PATCH 1/4] Also focus main web instead of bottom web

---
 qt/aqt/reviewer.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/qt/aqt/reviewer.py b/qt/aqt/reviewer.py
index c63c9a668..964268f6c 100644
--- a/qt/aqt/reviewer.py
+++ b/qt/aqt/reviewer.py
@@ -201,9 +201,7 @@ class Reviewer:
         self._drawFlag()
         self._drawMark()
         self._showAnswerButton()
-        # if we have a type answer field, focus main web
-        if self.typeCorrect:
-            self.mw.web.setFocus()
+        self.mw.web.setFocus()
         # user hook
         gui_hooks.reviewer_did_show_question(c)
 
@@ -242,6 +240,7 @@ class Reviewer:
         # render and update bottom
         self.web.eval("_showAnswer(%s);" % json.dumps(a))
         self._showEaseButtons()
+        self.mw.web.setFocus()
         # user hook
         gui_hooks.reviewer_did_show_answer(c)
 
@@ -574,8 +573,6 @@ time = %(time)d;
         )
 
     def _showAnswerButton(self) -> None:
-        if not self.typeCorrect:
-            self.bottom.web.setFocus()
         middle = """
 <span class=stattxt>%s</span><br>
 <button title="%s" id=ansbut onclick='pycmd("ans");'>%s</button>""" % (
@@ -596,7 +593,6 @@ time = %(time)d;
         self.bottom.web.adjustHeightToFit()
 
     def _showEaseButtons(self) -> None:
-        self.bottom.web.setFocus()
         middle = self._answerButtons()
         self.bottom.web.eval("showAnswer(%s);" % json.dumps(middle))
 

From a08d83dedae08042158b7ed2e6087be582ec5822 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 5 Oct 2020 22:18:46 +0200
Subject: [PATCH 2/4] Add focus class which mimics built-in focus

---
 qt/aqt/reviewer.py              |  4 ++--
 qt/ts/scss/reviewer-bottom.scss | 12 +++++++++++-
 qt/ts/src/reviewer-bottom.ts    |  2 --
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/qt/aqt/reviewer.py b/qt/aqt/reviewer.py
index 964268f6c..15045dc59 100644
--- a/qt/aqt/reviewer.py
+++ b/qt/aqt/reviewer.py
@@ -575,7 +575,7 @@ time = %(time)d;
     def _showAnswerButton(self) -> None:
         middle = """
 <span class=stattxt>%s</span><br>
-<button title="%s" id=ansbut onclick='pycmd("ans");'>%s</button>""" % (
+<button title="%s" id="ansbut" class="focus" onclick='pycmd("ans");'>%s</button>""" % (
             self._remaining(),
             _("Shortcut key: %s") % _("Space"),
             _("Show Answer"),
@@ -644,7 +644,7 @@ time = %(time)d;
 
         def but(i, label):
             if i == default:
-                extra = "id=defease"
+                extra = """id="defease" class="focus" """
             else:
                 extra = ""
             due = self._buttonTime(i)
diff --git a/qt/ts/scss/reviewer-bottom.scss b/qt/ts/scss/reviewer-bottom.scss
index 92c9d4d57..16d3b9dc5 100644
--- a/qt/ts/scss/reviewer-bottom.scss
+++ b/qt/ts/scss/reviewer-bottom.scss
@@ -33,7 +33,17 @@ button {
     white-space: nowrap;
 }
 
-#ansbut { margin-bottom: 1em; }
+#ansbut {
+    margin-bottom: 1em;
+}
+
+.focus {
+    outline: 5px auto rgba(0, 103, 244, 0.247);
+
+    &:focus {
+        outline-color: rgba(92, 160, 255, 0.247);
+    }
+}
 
 .nobold {
     font-weight: normal;
diff --git a/qt/ts/src/reviewer-bottom.ts b/qt/ts/src/reviewer-bottom.ts
index 8bb5e014f..5b8219bbb 100644
--- a/qt/ts/src/reviewer-bottom.ts
+++ b/qt/ts/src/reviewer-bottom.ts
@@ -36,14 +36,12 @@ let updateTime = function () {
 function showQuestion(txt, maxTime_) {
     // much faster than jquery's .html()
     $("#middle")[0].innerHTML = txt;
-    $("#ansbut").focus();
     time = 0;
     maxTime = maxTime_;
 }
 
 function showAnswer(txt) {
     $("#middle")[0].innerHTML = txt;
-    $("#defease").focus();
 }
 
 function selectedAnswerButton() {

From 0b434e484bfbec2f2cdd100f3980560fc03bc488 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 5 Oct 2020 22:39:16 +0200
Subject: [PATCH 3/4] Give the focus on .focus element a red tint

---
 qt/ts/scss/reviewer-bottom.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/qt/ts/scss/reviewer-bottom.scss b/qt/ts/scss/reviewer-bottom.scss
index 16d3b9dc5..2d0cbc89a 100644
--- a/qt/ts/scss/reviewer-bottom.scss
+++ b/qt/ts/scss/reviewer-bottom.scss
@@ -41,7 +41,7 @@ button {
     outline: 5px auto rgba(0, 103, 244, 0.247);
 
     &:focus {
-        outline-color: rgba(92, 160, 255, 0.247);
+        outline-color: rgba(103, 103, 244, 0.247);
     }
 }
 

From 74ffc2a4cdafbe5a550e9f1c38d616ccfa64b636 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 5 Oct 2020 22:54:23 +0200
Subject: [PATCH 4/4] Have a "default" highlight, but naturally follow focus if
 focus is in container

---
 qt/ts/scss/reviewer-bottom.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/qt/ts/scss/reviewer-bottom.scss b/qt/ts/scss/reviewer-bottom.scss
index 2d0cbc89a..8d4788f86 100644
--- a/qt/ts/scss/reviewer-bottom.scss
+++ b/qt/ts/scss/reviewer-bottom.scss
@@ -40,8 +40,12 @@ button {
 .focus {
     outline: 5px auto rgba(0, 103, 244, 0.247);
 
-    &:focus {
-        outline-color: rgba(103, 103, 244, 0.247);
+    #innertable:focus-within & {
+        outline: unset;
+
+        &:focus {
+            outline: 5px auto rgba(0, 103, 244, 0.247);
+        }
     }
 }