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/8475e6c0...