[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-115.7.0esr-13.5-1] fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in...

[Pier Angelo Vendrame (@pierov)]

Pier Angelo Vendrame pushed to branch tor-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser


Commits:
8475e6c0 by Henry Wilkes at 2024-02-13T18:02:44+00:00
fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 42415: Improve focus styling of bridge settings headings.

We make sure the focus outline has a 2px offset from the text.

Also make the "N days until you unlock:" text semantically a heading for
its own section.

- - - - -


3 changed files:

- browser/components/torpreferences/content/connectionPane.js
- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/torPreferences.css


Changes:

=====================================
browser/components/torpreferences/content/connectionPane.js
=====================================
@@ -1525,7 +1525,8 @@ const gLoxStatus = {
     }
 
     if (alertHadFocus && !showAlert) {
-      // Has become hidden.
+      // Alert has become hidden, move focus back up to the now revealed details
+      // area.
       this._nextUnlockCounterEl.focus();
     } else if (detailsHadFocus && showAlert) {
       this._unlockAlertButton.focus();


=====================================
browser/components/torpreferences/content/connectionPane.xhtml
=====================================
@@ -67,7 +67,11 @@
 
   <!-- Bridges -->
   <hbox class="subcategory" data-category="paneConnection" hidden="true">
-    <html:h1 id="torPreferences-bridges-header" tabindex="-1" />
+    <html:h1
+      id="torPreferences-bridges-header"
+      class="tor-focusable-heading"
+      tabindex="-1"
+    ></html:h1>
   </hbox>
   <groupbox
     id="torPreferences-bridges-group"
@@ -157,22 +161,26 @@
       <html:div id="tor-bridges-current-header-bar">
         <html:h2
           id="tor-bridges-current-heading"
+          class="tor-focusable-heading"
           tabindex="-1"
           data-l10n-id="tor-bridges-your-bridges"
         ></html:h2>
         <html:span
           id="tor-bridges-user-label"
+          class="tor-bridges-source-label"
           data-l10n-id="tor-bridges-source-user"
         ></html:span>
         <html:span
           id="tor-bridges-built-in-label"
+          class="tor-bridges-source-label"
           data-l10n-id="tor-bridges-source-built-in"
         ></html:span>
         <html:span
           id="tor-bridges-requested-label"
+          class="tor-bridges-source-label"
           data-l10n-id="tor-bridges-source-requested"
         ></html:span>
-        <html:span id="tor-bridges-lox-label">
+        <html:span id="tor-bridges-lox-label" class="tor-bridges-source-label">
           <html:img id="tor-bridges-lox-label-icon" alt="" />
           <html:span data-l10n-id="tor-bridges-source-lox"></html:span>
         </html:span>
@@ -307,11 +315,11 @@
         >
           <html:img alt="" class="tor-bridges-lox-image-inner" />
           <html:img alt="" class="tor-bridges-lox-image-outer" />
-          <html:div
+          <html:h3
             id="tor-bridges-lox-next-unlock-counter"
-            class="tor-bridges-lox-intro"
+            class="tor-bridges-lox-intro tor-focusable-heading"
             tabindex="-1"
-          ></html:div>
+          ></html:h3>
           <html:ul class="tor-bridges-lox-list">
             <html:li
               id="tor-bridges-lox-next-unlock-gain-bridges"


=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -70,6 +70,10 @@
 
 /* Bridge settings */
 
+.tor-focusable-heading:focus-visible {
+  outline-offset: var(--in-content-focus-outline-offset);
+}
+
 .bridge-status-badge {
   display: flex;
   min-width: max-content;
@@ -210,16 +214,31 @@
 }
 
 #tor-bridges-current-header-bar {
-  display: flex;
+  display: grid;
   min-width: max-content;
+  grid-template: "heading source button" min-content / max-content 1fr max-content;
   align-items: center;
   border-block-end: 1px solid var(--in-content-border-color);
   padding-block-end: 16px;
   margin-block-end: 16px;
+  white-space: nowrap;
 }
 
-#tor-bridges-current-header-bar > * {
-  flex: 0 0 auto;
+#tor-bridges-current-heading {
+  margin: 0;
+  font-size: inherit;
+  grid-area: heading;
+}
+
+.tor-bridges-source-label {
+  margin-inline-start: 2em;
+  margin-inline-end: 8px;
+  grid-area: source;
+  justify-self: end;
+}
+
+#tor-bridges-all-options-button {
+  grid-area: button;
 }
 
 #tor-bridges-lox-label {
@@ -240,13 +259,6 @@
   fill: var(--in-content-icon-color);
 }
 
-#tor-bridges-current-heading {
-  margin: 0;
-  margin-inline-end: 2em;
-  font-size: inherit;
-  flex: 1 0 auto;
-}
-
 .tor-bridges-options-button {
   padding: 3px;
   margin: 0;
@@ -264,10 +276,6 @@
   fill: currentColor;
 }
 
-#tor-bridges-all-options-button {
-  margin-inline-start: 8px;
-}
-
 #tor-bridges-built-in-display {
   display: grid;
   grid-template:
@@ -552,7 +560,10 @@
 .tor-bridges-lox-intro {
   grid-area: intro;
   font-weight: 700;
+  font-size: inherit;
   align-self: center;
+  justify-self: start;
+  margin: 0;
 }
 
 .tor-bridges-lox-list {



View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/8475e6c0a39a23c365427d6e7c464aff95f1b9c5

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/8475e6c0a39a23c365427d6e7c464aff95f1b9c5
You're receiving this email because of your account on gitlab.torproject.org.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tbb-commits/attachments/20240213/571c4b23/attachment-0001.htm>