[tbb-commits] [tor-browser/tor-browser-78.11.0esr-10.5-1] fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser

[sysrqb at torproject.org]

commit ccef7b35e20bd47dec7717bac2524b86878b2bd3
Author: Richard Pospesel <richard at torproject.org>
Date:   Thu Jun 24 15:22:36 2021 +0200

    fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
---
 .../torconnect/content/aboutTorConnect.css         | 24 ++++++++++++++++++++++
 .../torconnect/content/aboutTorConnect.js          |  1 +
 browser/themes/shared/onionPattern.inc.xhtml       |  7 +++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/browser/components/torconnect/content/aboutTorConnect.css b/browser/components/torconnect/content/aboutTorConnect.css
index eff767205266..a70904ca0b28 100644
--- a/browser/components/torconnect/content/aboutTorConnect.css
+++ b/browser/components/torconnect/content/aboutTorConnect.css
@@ -10,6 +10,30 @@
   --onion-radius: 50px;
 }
 
+/* override firefox's default blue focus coloring */
+:focus {
+  outline:  none!important;
+  box-shadow: 0 0 0 3px #CD8CED !important;
+  border:  1px #59316B solid !important;
+}
+
+ at media (prefers-color-scheme: dark)
+{
+  :focus {
+    box-shadow: 0 0 0 3px #8C689E !important;
+  }
+}
+
+/* override firefox's default blue border on hover */
+input[type="checkbox"]:not(:disabled):hover {
+  border-color: #59316B;
+}
+
+/* fix checkbox visibility when dark mode enabled */
+input[type="checkbox"]:checked {
+  fill: var(--in-content-page-color);
+}
+
 #connectButton {
   background-color: #7D4698;
 }
diff --git a/browser/components/torconnect/content/aboutTorConnect.js b/browser/components/torconnect/content/aboutTorConnect.js
index a88a887c7878..5fb5b2924b94 100644
--- a/browser/components/torconnect/content/aboutTorConnect.js
+++ b/browser/components/torconnect/content/aboutTorConnect.js
@@ -278,6 +278,7 @@ class AboutTorConnect {
     this.elemConnectButton.addEventListener("click", () => {
       this.connect();
     });
+    this.elemConnectButton.focus();
 
     this.elemCancelButton.textContent = this.torStrings.torConnect.cancel;
     this.elemCancelButton.addEventListener("click", () => {
diff --git a/browser/themes/shared/onionPattern.inc.xhtml b/browser/themes/shared/onionPattern.inc.xhtml
index 95f073e673b4..6bbde93684a2 100644
--- a/browser/themes/shared/onionPattern.inc.xhtml
+++ b/browser/themes/shared/onionPattern.inc.xhtml
@@ -12,8 +12,11 @@
 -->
 
 <div class="onion-pattern-container">
-  <div class="onion-pattern-crop">
-    <div class="onion-pattern-column">
+  <!-- for some reason, these two elements are focusable, seems related to
+   - flex css somehow; disable their tabindex to fix
+  -->
+  <div class="onion-pattern-crop" tabindex="-1">
+    <div class="onion-pattern-column" tabindex="-1">
       <div class="onion-pattern-row">
         <div class="circle solid"></div>