GitLab

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 {