morgan pushed to branch tor-browser-128.5.0esr-14.5-2 at The Tor Project / Applications / Tor Browser

Commits: 46eb7528 by Henry Wilkes at 2024-12-19T11:13:03+00:00 fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

TB 43320: Exclude hidden elements from the settings search.

We hide elements using the `hidden` attribute instead of `display: none`, which will exclude them from the search.

We also always hide the options menu and screen reader announcement area using `data-hidden-from-search`.

- - - - - 018492cc by Henry Wilkes at 2024-12-19T11:13:15+00:00 fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

TB 43320: Add duplicate headings that only appear in search results.

These duplicate search headings have the same content but are one heading level higher, to preserve the heading level hierarchy in a search result.

- - - - -

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 ===================================== @@ -346,7 +346,7 @@ const gBridgeGrid = {

Services.obs.addObserver(this, TorProviderTopics.BridgeChanged);

- this._grid.classList.add("grid-active"); + this._grid.hidden = false;

this._updateConnectedBridge(); }, @@ -363,7 +363,7 @@ const gBridgeGrid = {

this._forceCloseRowMenus();

- this._grid.classList.remove("grid-active"); + this._grid.hidden = true;

Services.obs.removeObserver(this, TorProviderTopics.BridgeChanged); }, @@ -1023,7 +1023,7 @@ const gBuiltinBridgesArea = {

Services.obs.addObserver(this, TorProviderTopics.BridgeChanged);

- this._area.classList.add("built-in-active"); + this._area.hidden = false;

this._updateBridgeIds(); this._updateConnectedBridge(); @@ -1038,7 +1038,7 @@ const gBuiltinBridgesArea = { } this._active = false;

- this._area.classList.remove("built-in-active"); + this._area.hidden = true;

Services.obs.removeObserver(this, TorProviderTopics.BridgeChanged); }, @@ -1243,11 +1243,19 @@ const gLoxStatus = { */ _detailsArea: null, /** - * The day counter for the next unlock. + * The list items showing the next unlocks. * - * @type {Element?} + * @type {?Object<string, Element>} + */ + _nextUnlockItems: null, + /** + * The day counter headings for the next unlock. + * + * One heading is shown during a search, the other is shown otherwise. + * + * @type {?Element[]} */ - _nextUnlockCounterEl: null, + _nextUnlockCounterEls: null, /** * Shows the number of remaining invites. * @@ -1266,6 +1274,12 @@ const gLoxStatus = { * @type {Element?} */ _unlockAlert: null, + /** + * The list items showing the unlocks. + * + * @type {?Object<string, Element>} + */ + _unlockItems: null, /** * The alert title. * @@ -1296,8 +1310,19 @@ const gLoxStatus = {

this._area = document.getElementById("tor-bridges-lox-status"); this._detailsArea = document.getElementById("tor-bridges-lox-details"); - this._nextUnlockCounterEl = document.getElementById( - "tor-bridges-lox-next-unlock-counter" + this._nextUnlockItems = { + gainBridges: document.getElementById( + "tor-bridges-lox-next-unlock-gain-bridges" + ), + firstInvites: document.getElementById( + "tor-bridges-lox-next-unlock-first-invites" + ), + moreInvites: document.getElementById( + "tor-bridges-lox-next-unlock-more-invites" + ), + }; + this._nextUnlockCounterEls = Array.from( + document.querySelectorAll(".tor-bridges-lox-next-unlock-counter") ); this._remainingInvitesEl = document.getElementById( "tor-bridges-lox-remaining-invites" @@ -1306,6 +1331,15 @@ const gLoxStatus = { "tor-bridges-lox-show-invites-button" ); this._unlockAlert = document.getElementById("tor-bridges-lox-unlock-alert"); + this._unlockItems = { + gainBridges: document.getElementById( + "tor-bridges-lox-unlock-alert-gain-bridges" + ), + newBridges: document.getElementById( + "tor-bridges-lox-unlock-alert-new-bridges" + ), + invites: document.getElementById("tor-bridges-lox-unlock-alert-invites"), + }; this._unlockAlertTitle = document.getElementById( "tor-bridge-unlock-alert-title" ); @@ -1404,6 +1438,7 @@ const gLoxStatus = { return; } this._loxId = loxId; + this._area.hidden = !loxId; // We unset _nextUnlock to ensure the areas no longer use the old value for // the new loxId. this._updateNextUnlock(true); @@ -1518,8 +1553,8 @@ const gLoxStatus = { // Uninitialized or no Lox source. // NOTE: This area may already be hidden by the change in Lox source, // but we clean up for the next non-empty id. - this._area.classList.remove("show-unlock-alert"); - this._area.classList.remove("show-next-unlock"); + this._unlockAlert.hidden = true; + this._detailsArea.hidden = true; return; }

@@ -1529,8 +1564,8 @@ const gLoxStatus = {

const pendingEvents = this._pendingEvents; const showAlert = !!pendingEvents.length; - this._area.classList.toggle("show-unlock-alert", showAlert); - this._area.classList.toggle("show-next-unlock", !showAlert); + this._unlockAlert.hidden = !showAlert; + this._detailsArea.hidden = showAlert;

if (showAlert) { // At level 0 and level 1, we do not have any invites. @@ -1567,6 +1602,7 @@ const gLoxStatus = { blockage = true; } } + let alertTitleId; if (levelUp && !blockage) { alertTitleId = "tor-bridges-lox-upgrade"; @@ -1585,9 +1621,9 @@ const gLoxStatus = { "lox-unlock-upgrade", levelUp && !blockage ); - this._unlockAlert.classList.toggle("lox-unlock-new-bridges", blockage); - this._unlockAlert.classList.toggle("lox-unlock-gain-bridges", bridgeGain); - this._unlockAlert.classList.toggle("lox-unlock-invites", showInvites); + this._unlockItems.gainBridges.hidden = !bridgeGain; + this._unlockItems.newBridges.hidden = !blockage; + this._unlockItems.invites.hidden = !showInvites; } else { // Show next unlock. // Number of days until the next unlock, rounded up. @@ -1598,29 +1634,42 @@ const gLoxStatus = { (24 * 60 * 60 * 1000) ) ); - document.l10n.setAttributes( - this._nextUnlockCounterEl, - "tor-bridges-lox-days-until-unlock", - { numDays } - ); + for (const counterEl of this._nextUnlockCounterEls) { + document.l10n.setAttributes( + counterEl, + "tor-bridges-lox-days-until-unlock", + { numDays } + ); + }

// Gain 2 bridges from level 0 to 1. After that gain invites. - const bridgeGain = this._nextUnlock.nextLevel === 1; - const firstInvites = this._nextUnlock.nextLevel === 2; - const moreInvites = this._nextUnlock.nextLevel > 2; - - this._detailsArea.classList.toggle("lox-next-gain-bridges", bridgeGain); - this._detailsArea.classList.toggle( - "lox-next-first-invites", - firstInvites - ); - this._detailsArea.classList.toggle("lox-next-more-invites", moreInvites); + this._nextUnlockItems.gainBridges.hidden = + this._nextUnlock.nextLevel !== 1; + this._nextUnlockItems.firstInvites.hidden = + this._nextUnlock.nextLevel !== 2; + this._nextUnlockItems.moreInvites.hidden = + this._nextUnlock.nextLevel <= 2; }

if (alertHadFocus && !showAlert) { // Alert has become hidden, move focus back up to the now revealed details // area. - this._nextUnlockCounterEl.focus(); + // NOTE: We have two headings: one shown during a search and one shown + // otherwise. We focus the heading that is currently visible. + // See tor-browser#43320. + // TODO: It might be better if we could use the # named anchor to + // re-orient the screen reader position instead of using tabIndex=-1, but + // about:preferences currently uses the anchor for showing categories + // only. See bugzilla bug 1799153. + if ( + this._nextUnlockCounterEls[0].checkVisibility({ + visibilityProperty: true, + }) + ) { + this._nextUnlockCounterEls[0].focus(); + } else { + this._nextUnlockCounterEls[1].focus(); + } } else if (detailsHadFocus && showAlert) { this._unlockAlertButton.focus(); } @@ -1642,21 +1691,21 @@ const gLoxStatus = { hasInvites = this._haveExistingInvites || !!this._remainingInvites; }

- if (!hasInvites) { - if ( - this._remainingInvitesEl.contains(document.activeElement) || - this._invitesButton.contains(document.activeElement) - ) { - // About to loose focus. - // Unexpected for the lox level to loose all invites. - // Move to the top of the details area, which should be visible if we - // just had focus. - this._nextUnlockCounterEl.focus(); - } + if ( + !hasInvites && + (this._remainingInvitesEl.contains(document.activeElement) || + this._invitesButton.contains(document.activeElement)) + ) { + // About to loose focus. + // Unexpected for the lox level to loose all invites. + // Move to the top of the details area, which should be visible if we + // just had focus. + this._nextUnlockCounterEl.focus(); } // Hide the invite elements if we have no historic invites or a way of // creating new ones. - this._detailsArea.classList.toggle("lox-has-invites", hasInvites); + this._remainingInvitesEl.hidden = !hasInvites; + this._invitesButton.hidden = !hasInvites;

if (hasInvites) { document.l10n.setAttributes( @@ -1691,17 +1740,27 @@ const gBridgeSettings = { */ _bridgesEl: null, /** - * The heading for the bridge settings. + * The area for sharing bridge addresses. * * @type {Element?} */ - _bridgesSettingsHeading: null, + _shareEl: null, + /** + * The two headings for the bridge settings. + * + * One heading is shown during a search, the other is shown otherwise. + * + * @type {?Element[]} + */ + _bridgesSettingsHeadings: null, /** - * The current bridges heading, at the start of the area. + * The two headings for the current bridges, at the start of the area. + * + * One heading is shown during a search, the other is shown otherwise. * * @type {Element?} */ - _currentBridgesHeading: null, + _currentBridgesHeadings: null, /** * The area for showing no bridges. * @@ -1709,17 +1768,25 @@ const gBridgeSettings = { */ _noBridgesEl: null, /** - * The heading element for changing bridges. + * The heading elements for changing bridges. * - * @type {Element?} + * One heading is shown during a search, the other is shown otherwise. + * + * @type {?Element[]} */ - _changeHeadingEl: null, + _changeHeadingEls: null, /** * The button for user to provide a bridge address or share code. * * @type {Element?} */ _userProvideButton: null, + /** + * A map from the bridge source to its corresponding label. + * + * @type {?Map<number, Element>} + */ + _sourceLabels: null,

/** * Initialize the bridge settings. @@ -1727,15 +1794,33 @@ const gBridgeSettings = { init() { gBridgesNotification.init();

- this._bridgesSettingsHeading = document.getElementById( - "torPreferences-bridges-header" + this._bridgesSettingsHeadings = Array.from( + document.querySelectorAll(".tor-bridges-subcategory-heading") ); - this._currentBridgesHeading = document.getElementById( - "tor-bridges-current-heading" + this._currentBridgesHeadings = Array.from( + document.querySelectorAll(".tor-bridges-current-heading") ); this._bridgesEl = document.getElementById("tor-bridges-current"); this._noBridgesEl = document.getElementById("tor-bridges-none"); this._groupEl = document.getElementById("torPreferences-bridges-group"); + + this._sourceLabels = new Map([ + [ + TorBridgeSource.BuiltIn, + document.getElementById("tor-bridges-built-in-label"), + ], + [ + TorBridgeSource.UserProvided, + document.getElementById("tor-bridges-user-label"), + ], + [ + TorBridgeSource.BridgeDB, + document.getElementById("tor-bridges-requested-label"), + ], + [TorBridgeSource.Lox, document.getElementById("tor-bridges-lox-label")], + ]); + this._shareEl = document.getElementById("tor-bridges-share"); + this._toggleButton = document.getElementById("tor-bridges-enabled-toggle"); // Initially disabled whilst TorSettings may not be initialized. this._toggleButton.disabled = true; @@ -1749,8 +1834,8 @@ const gBridgeSettings = { }); });

- this._changeHeadingEl = document.getElementById( - "tor-bridges-change-heading" + this._changeHeadingEls = Array.from( + document.querySelectorAll(".tor-bridges-change-heading") ); this._userProvideButton = document.getElementById( "tor-bridges-open-user-provide-dialog-button" @@ -1855,6 +1940,12 @@ const gBridgeSettings = { * @type {integer?} */ _bridgeSource: null, + /** + * Whether the user is encouraged to share their bridge addresses. + * + * @type {boolean} + */ + _canShare: false,

/** * Update _bridgeSource. @@ -1876,22 +1967,15 @@ const gBridgeSettings = { this._bridgesEl.contains(document.activeElement) || this._noBridgesEl.contains(document.activeElement);

- this._bridgesEl.classList.toggle( - "source-built-in", - bridgeSource === TorBridgeSource.BuiltIn - ); - this._bridgesEl.classList.toggle( - "source-user", - bridgeSource === TorBridgeSource.UserProvided - ); - this._bridgesEl.classList.toggle( - "source-requested", - bridgeSource === TorBridgeSource.BridgeDB - ); - this._bridgesEl.classList.toggle( - "source-lox", - bridgeSource === TorBridgeSource.Lox - ); + for (const [source, labelEl] of this._sourceLabels.entries()) { + labelEl.hidden = source !== bridgeSource; + } + + this._canShare = + bridgeSource === TorBridgeSource.UserProvided || + bridgeSource === TorBridgeSource.BridgeDB; + + this._shareEl.hidden = !this._canShare;

// Force the menu to close whenever the source changes. // NOTE: If the menu had focus then hadFocus will be true, and focus will be @@ -1937,15 +2021,18 @@ const gBridgeSettings = { // Add classes to show or hide the "no bridges" and "Your bridges" sections. // NOTE: Before haveBridges is set, neither class is added, so both sections // and hidden. - this._groupEl.classList.toggle("no-bridges", !haveBridges); - this._groupEl.classList.toggle("have-bridges", haveBridges); + this._groupEl.classList.add("bridges-initialized"); + this._bridgesEl.hidden = !haveBridges; + this._noBridgesEl.hidden = haveBridges;

- document.l10n.setAttributes( - this._changeHeadingEl, - haveBridges - ? "tor-bridges-replace-bridges-heading" - : "tor-bridges-add-bridges-heading" - ); + for (const headingEl of this._changeHeadingEls) { + document.l10n.setAttributes( + headingEl, + haveBridges + ? "tor-bridges-replace-bridges-heading" + : "tor-bridges-add-bridges-heading" + ); + } document.l10n.setAttributes( this._userProvideButton, haveBridges ? "tor-bridges-replace-button" : "tor-bridges-add-new-button" @@ -1964,17 +2051,27 @@ const gBridgeSettings = { }

// Make sure we have the latest value for _haveBridges. - // We also ensure that the _currentBridgesHeading element is visible before + // We also ensure that the _currentBridgesHeadings element is visible before // we focus it. this._updateHaveBridges(); - if (this._haveBridges) { - // Move focus to the start of the area, which is the heading. - // It has tabindex="-1" so should be focusable, even though it is not part - // of the usual tab navigation. - this._currentBridgesHeading.focus(); + + // Move focus to the start of the relevant section, which is a heading. + // They have tabindex="-1" so should be focusable, even though they are not + // part of the usual tab navigation. + // NOTE: We have two headings: one shown during a search and one shown + // otherwise. We focus the heading that is currently visible. + // See tor-browser#43320. + // TODO: It might be better if we could use the # named anchor to + // re-orient the screen reader position instead of using tabIndex=-1, but + // about:preferences currently uses the anchor for showing categories + // only. See bugzilla bug 1799153. + const focusHeadings = this._haveBridges + ? this._currentBridgesHeadings // The heading above the new bridges. + : this._bridgesSettingsHeadings; // The top of the bridge settings. + if (focusHeadings[0].checkVisibility({ visibilityProperty: true })) { + focusHeadings[0].focus(); } else { - // Move focus to the top of the bridge settings. - this._bridgesSettingsHeading.focus(); + focusHeadings[1].focus(); } },

@@ -2126,10 +2223,7 @@ const gBridgeSettings = { });

this._bridgesMenu.addEventListener("showing", () => { - const canShare = - this._bridgeSource === TorBridgeSource.UserProvided || - this._bridgeSource === TorBridgeSource.BridgeDB; - qrItem.hidden = !canShare || !this._canQRBridges; + qrItem.hidden = !this._canShare || !this._canQRBridges; editItem.hidden = this._bridgeSource !== TorBridgeSource.UserProvided; });

===================================== browser/components/torpreferences/content/connectionPane.xhtml ===================================== @@ -97,8 +97,8 @@ <!-- Bridges --> <hbox class="subcategory" data-category="paneConnection" hidden="true"> <html:h1 - id="torPreferences-bridges-header" - class="tor-focusable-heading" + id="tor-bridges-subcategory-heading-non-search" + class="tor-bridges-subcategory-heading tor-focusable-heading" tabindex="-1" data-l10n-id="tor-bridges-heading" ></html:h1> @@ -107,7 +107,22 @@ id="torPreferences-bridges-group" data-category="paneConnection" hidden="true" + aria-labelledby="tor-bridges-subcategory-heading-non-search"

+ <!-- Add a search-header that only appears in search results as a substitute + - for the hidden h1 element. See tor-browser#43320. + - NOTE: Usually the first xul:label will act as the accessible name for + - a xul:groubbox element *if* it is not hidden. Since the search-header + - is sometimes hidden we need an explicit aria-labelledby anyway. + - However, we keep the wrapper xul:label for styling consistency with the + - other settings. --> + <label class="search-header" hidden="true"> + <html:h2 + class="tor-bridges-subcategory-heading tor-focusable-heading" + tabindex="-1" + data-l10n-id="tor-bridges-heading" + ></html:h2> + </label> <description class="description-deemphasized" flex="1"> <html:span data-l10n-id="tor-bridges-overview"></html:span> <label @@ -164,8 +179,13 @@ - See https://github.com/WICG/proposals/issues/112 --> <!-- NOTE: This area is hidden by default, and is only shown temporarily - - when a notification is added. --> - <html:div id="tor-bridges-update-area" hidden="hidden"> + - when a notification is added. It should never match with search + - queries. --> + <html:div + id="tor-bridges-update-area" + hidden="hidden" + data-hidden-from-search="true" + > <!-- NOTE: This first span's text content will *not* be read out as part - of the notification because it does not have an aria-live - attribute. Instead it is just here to give context to the following @@ -182,18 +202,33 @@ aria-live="polite" ></html:span> </html:div> - <html:div id="tor-bridges-none"> + <html:div id="tor-bridges-none" hidden="hidden"> <html:img id="tor-bridges-none-icon" alt="" /> <html:div data-l10n-id="tor-bridges-none-added"></html:div> </html:div> - <html:div id="tor-bridges-current"> + <html:div id="tor-bridges-current" hidden="hidden"> <html:div id="tor-bridges-current-header-bar"> <html:h2 - id="tor-bridges-current-heading" - class="tor-focusable-heading" + id="tor-bridges-current-heading-non-search" + class="tor-bridges-current-heading tor-focusable-heading tor-small-heading tor-non-search-heading" tabindex="-1" data-l10n-id="tor-bridges-your-bridges" ></html:h2> + <!-- Add a duplicate search heading. + - In a search result the heading h1.tor-bridges-subcategory-heading + - will be hidden, and the h2.tor-bridges-subcategory-heading + - will be visible. + - As such, all headings below h2.tor-bridges-subcategory-heading also + - need to shift one lower in heading level to preseve the correct + - hierarchy of - heading levels. + - In this case we hide the <h2> heading and show the duplicate <h3> + - heading instead. + - See tor-browser#43320. --> + <html:h3 + class="tor-bridges-current-heading tor-focusable-heading tor-small-heading tor-search-heading" + tabindex="-1" + data-l10n-id="tor-bridges-your-bridges" + ></html:h3> <html:span id="tor-bridges-user-label" class="tor-bridges-source-label" @@ -221,7 +256,10 @@ aria-controls="tor-bridges-all-options-menu" data-l10n-id="tor-bridges-options-button" ></html:button> - <html:panel-list id="tor-bridges-all-options-menu"> + <html:panel-list + id="tor-bridges-all-options-menu" + data-hidden-from-search="true" + > <html:panel-item id="tor-bridges-options-qr-all-menu-item" data-l10n-attrs="accesskey" @@ -244,7 +282,7 @@ ></html:panel-item> </html:panel-list> </html:div> - <html:div id="tor-bridges-built-in-display"> + <html:div id="tor-bridges-built-in-display" hidden="hidden"> <html:div id="tor-bridges-built-in-type-name"></html:div> <html:div id="tor-bridges-built-in-connected" @@ -261,7 +299,8 @@ id="tor-bridges-grid-display" class="tor-bridges-grid" role="grid" - aria-labelledby="tor-bridges-current-heading" + aria-labelledby="tor-bridges-current-heading-non-search" + hidden="hidden" ></html:div> <html:template id="tor-bridges-grid-row-template"> <html:div class="tor-bridges-grid-row" role="row"> @@ -297,7 +336,10 @@ aria-expanded="false" data-l10n-id="tor-bridges-individual-bridge-options-button" ></html:button> - <html:panel-list class="tor-bridges-individual-options-menu"> + <html:panel-list + class="tor-bridges-individual-options-menu" + data-hidden-from-search="true" + > <html:panel-item class="tor-bridges-options-qr-one-menu-item" data-l10n-attrs="accesskey" @@ -318,11 +360,20 @@ </html:span> </html:div> </html:template> - <html:div id="tor-bridges-share" class="tor-bridges-details-box"> + <html:div + id="tor-bridges-share" + class="tor-bridges-details-box" + hidden="hidden" + > <html:h3 - id="tor-bridges-share-heading" + class="tor-bridges-share-heading tor-small-heading tor-non-search-heading" data-l10n-id="tor-bridges-share-heading" ></html:h3> + <!-- Add a duplicate search heading. See tor-browser#43320. --> + <html:h4 + class="tor-bridges-share-heading tor-small-heading tor-search-heading" + data-l10n-id="tor-bridges-share-heading" + ></html:h4> <html:span id="tor-bridges-share-description" data-l10n-id="tor-bridges-share-description" @@ -336,68 +387,84 @@ data-l10n-id="tor-bridges-qr-addresses-button" ></html:button> </html:div> - <html:div id="tor-bridges-lox-status"> + <html:div id="tor-bridges-lox-status" hidden="hidden"> <html:div data-l10n-id="tor-bridges-lox-description"></html:div> <html:div id="tor-bridges-lox-details" class="tor-bridges-details-box tor-bridges-lox-box" + hidden="hidden" > <html:img alt="" class="tor-bridges-lox-image-inner" /> <html:img alt="" class="tor-bridges-lox-image-outer" /> <html:h3 - id="tor-bridges-lox-next-unlock-counter" - class="tor-bridges-lox-intro tor-focusable-heading" + class="tor-bridges-lox-next-unlock-counter tor-small-heading tor-bridges-lox-intro tor-focusable-heading tor-non-search-heading" tabindex="-1" ></html:h3> + <!-- Add a duplicate search heading. See tor-browser#43320. --> + <html:h4 + class="tor-bridges-lox-next-unlock-counter tor-small-heading tor-bridges-lox-intro tor-focusable-heading tor-search-heading" + tabindex="-1" + ></html:h4> <html:ul class="tor-bridges-lox-list"> <html:li id="tor-bridges-lox-next-unlock-gain-bridges" class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge" data-l10n-id="tor-bridges-lox-unlock-two-bridges" + hidden="hidden" ></html:li> <html:li id="tor-bridges-lox-next-unlock-first-invites" class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite" data-l10n-id="tor-bridges-lox-unlock-first-invites" + hidden="hidden" ></html:li> <html:li id="tor-bridges-lox-next-unlock-more-invites" class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite" data-l10n-id="tor-bridges-lox-unlock-more-invites" + hidden="hidden" ></html:li> </html:ul> - <html:div id="tor-bridges-lox-remaining-invites"></html:div> + <html:div + id="tor-bridges-lox-remaining-invites" + hidden="hidden" + ></html:div> <html:button id="tor-bridges-lox-show-invites-button" class="tor-bridges-lox-button" data-l10n-id="tor-bridges-lox-show-invites-button" + hidden="hidden" ></html:button> </html:div> <html:div id="tor-bridges-lox-unlock-alert" role="alert" class="tor-bridges-details-box tor-bridges-lox-box" + hidden="hidden" > <html:img alt="" class="tor-bridges-lox-image-inner" /> <html:img alt="" class="tor-bridges-lox-image-outer" /> <html:div id="tor-bridge-unlock-alert-title" - class="tor-bridges-lox-intro" + class="tor-small-heading tor-bridges-lox-intro" ></html:div> <html:ul class="tor-bridges-lox-list"> <html:li id="tor-bridges-lox-unlock-alert-gain-bridges" class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge" data-l10n-id="tor-bridges-lox-gained-two-bridges" + hidden="hidden" ></html:li> <html:li id="tor-bridges-lox-unlock-alert-new-bridges" class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge" data-l10n-id="tor-bridges-lox-new-bridges" + hidden="hidden" ></html:li> <html:li id="tor-bridges-lox-unlock-alert-invites" class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite" + hidden="hidden" ></html:li> </html:ul> <html:button @@ -408,7 +475,14 @@ </html:div> </html:div> </html:div> - <html:h2 id="tor-bridges-change-heading"></html:h2> + <html:h2 + class="tor-bridges-change-heading tor-medium-heading tor-non-search-heading" + ></html:h2> + <!-- Add a duplicate search heading. See tor-browser#43320. + - This has the same content, but a smaller font. --> + <html:h3 + class="tor-bridges-change-heading tor-small-heading tor-search-heading" + ></html:h3> <hbox align="center"> <description flex="1" @@ -428,9 +502,15 @@ ></html:button> </hbox> <html:h3 - id="tor-bridges-provider-heading" + class="tor-bridges-provider-heading tor-medium-heading tor-non-search-heading" data-l10n-id="tor-bridges-find-more-heading" ></html:h3> + <!-- Add a duplicate search heading. See tor-browser#43320. + - This has the same content, but a smaller font. --> + <html:h4 + class="tor-bridges-provider-heading tor-small-heading tor-search-heading" + data-l10n-id="tor-bridges-find-more-heading" + ></html:h4> <description data-l10n-id="tor-bridges-find-more-description" class="description-deemphasized" @@ -511,15 +591,29 @@

<!-- Advanced --> <hbox class="subcategory" data-category="paneConnection" hidden="true"> - <html:h1 data-l10n-id="tor-advanced-settings-heading"></html:h1> + <html:h1 + id="tor-advanced-subcategory-heading-non-search" + data-l10n-id="tor-advanced-settings-heading" + ></html:h1> </hbox> <groupbox id="torPreferences-advanced-group" data-category="paneConnection" hidden="true" + aria-labelledby="tor-advanced-subcategory-heading-non-search"

+ <!-- Add a search-header that only appears in search results as a substitute + - for the hidden h1 element. See tor-browser#43320. + - NOTE: Usually the first xul:label will act as the accessible name for + - a xul:groubbox element *if* it is not hidden. Since the search-header + - is sometimes hidden we need an explicit aria-labelledby anyway. + - However, we keep the wrapper xul:label for styling consistency with the + - other settings. --> + <label class="search-header" hidden="true"> + <html:h2 data-l10n-id="tor-advanced-settings-heading"></html:h2> + </label> <hbox align="center"> - <label data-l10n-id="tor-advanced-settings-description" flex="1" /> + <description data-l10n-id="tor-advanced-settings-description" flex="1" /> <html:button id="torPreferences-advanced-button" class="accessory-button" @@ -527,7 +621,7 @@ ></html:button> </hbox> <hbox align="center" data-subcategory="viewlogs"> - <label data-l10n-id="tor-view-log-description" flex="1" /> + <description data-l10n-id="tor-view-log-description" flex="1" /> <html:button id="torPreferences-buttonTorLogs" class="accessory-button"

===================================== browser/components/torpreferences/content/torPreferences.css ===================================== @@ -118,6 +118,48 @@ button.spoof-button-disabled {

/* Bridge settings */

+.tor-medium-heading { + /* Same font size as mozilla preferences h2. */ + font-size: var(--font-size-large); + font-weight: var(--font-weight-bold); + margin: 0; +} + +.tor-small-heading { + font-size: inherit; + font-weight: var(--font-weight-bold); + margin: 0; +} + +/* Hide the tor-search-heading elements when the group's search header is + * hidden. These only appear in search results. + * See tor-browser#43320. + * NOTE: `.search-header[hidden] ~ :is(* .tor-search-heading)` will not match + * (possibly because the `~` selector is unsure how to integrate with the + * non-compound `* .tor-search-heading` selector). So we need to duplicate the + * `.search-header[hidden]` rule. */ +#torPreferences-bridges-group :is( + .search-header[hidden] ~ * .tor-search-heading, + .search-header[hidden] ~ .tor-search-heading +) { + display: none; +} + +/* Hide the tor-non-search-heading elements when the group's search header is + * not hidden. These only appear outside of search results. + * See tor-browser#43320. */ +#torPreferences-bridges-group :is( + .search-header:not([hidden]) ~ * .tor-non-search-heading, + .search-header:not([hidden]) ~ .tor-non-search-heading +) { + display: none; +} + +.tor-focusable-heading { + /* Do not occupy more horizontal space than necessary. */ + width: fit-content; +} + .tor-focusable-heading:focus-visible { outline-offset: var(--in-content-focus-outline-offset); } @@ -182,53 +224,18 @@ button.spoof-button-disabled { clip-path: inset(50%); }

-#torPreferences-bridges-group:not(.have-bridges, .no-bridges) { +#torPreferences-bridges-group:not(.bridges-initialized) { /* Hide bridge settings whilst not initialized. */ display: none; }

-#torPreferences-bridges-group:not(.have-bridges) #tor-bridges-current { - display: none; -} - -#torPreferences-bridges-group:not(.no-bridges) #tor-bridges-none { - display: none; -} - -#tor-bridges-current:not(.source-built-in) #tor-bridges-built-in-label { - display: none; -} - -#tor-bridges-current:not(.source-user) #tor-bridges-user-label { - display: none; -} - -#tor-bridges-current:not(.source-requested) #tor-bridges-requested-label { - display: none; -} - -#tor-bridges-current:not(.source-lox) #tor-bridges-lox-label { - display: none; -} - -#tor-bridges-current:not( - .source-user, - .source-requested -) #tor-bridges-share { - display: none; -} - -#tor-bridges-current:not(.source-lox) #tor-bridges-lox-status { - display: none; -} - #tor-bridges-none, #tor-bridges-current { margin-inline: 0; margin-block: 32px; }

-#tor-bridges-none { +#tor-bridges-none:not([hidden]) { display: grid; justify-items: center; text-align: center; @@ -265,9 +272,7 @@ button.spoof-button-disabled { white-space: nowrap; }

-#tor-bridges-current-heading { - margin: 0; - font-size: inherit; +.tor-bridges-current-heading { grid-area: heading; }

@@ -282,7 +287,7 @@ button.spoof-button-disabled { grid-area: button; }

-#tor-bridges-lox-label { +#tor-bridges-lox-label:not([hidden]) { display: flex; align-items: center; gap: 6px; @@ -317,7 +322,7 @@ button.spoof-button-disabled { fill: currentColor; }

-#tor-bridges-built-in-display { +#tor-bridges-built-in-display:not([hidden]) { display: grid; grid-template: "type status" min-content @@ -327,10 +332,6 @@ button.spoof-button-disabled { margin-block-end: 16px; }

-#tor-bridges-built-in-display:not(.built-in-active) { - display: none; -} - #tor-bridges-built-in-type-name { font-weight: 700; grid-area: type; @@ -345,7 +346,7 @@ button.spoof-button-disabled { grid-area: description; }

-.tor-bridges-grid { +.tor-bridges-grid:not([hidden]) { display: grid; grid-template-columns: max-content repeat(4, max-content) 1fr; --tor-bridges-grid-column-gap: 8px; @@ -355,10 +356,6 @@ button.spoof-button-disabled { align-items: stretch; }

-#tor-bridges-grid-display:not(.grid-active) { - display: none; -} - .tor-bridges-grid-row { /* We want each row to act as a row of three items in the * .tor-bridges-grid grid layout. @@ -483,7 +480,7 @@ button.spoof-button-disabled { padding: 16px; }

-#tor-bridges-share { +#tor-bridges-share:not([hidden]) { display: grid; grid-template: "heading heading heading" min-content @@ -496,12 +493,9 @@ button.spoof-button-disabled { align-items: center; }

-#tor-bridges-share-heading { +.tor-bridges-share-heading { grid-area: heading; - font-size: inherit; - margin: 0; margin-block-end: 4px; - font-weight: 700; }

#tor-bridges-share-description { @@ -538,15 +532,7 @@ button.spoof-button-disabled { margin-block-start: 8px; }

-#tor-bridges-lox-status:not(.show-next-unlock) #tor-bridges-lox-details { - display: none; -} - -#tor-bridges-lox-status:not(.show-unlock-alert) #tor-bridges-lox-unlock-alert { - display: none; -} - -.tor-bridges-lox-box { +.tor-bridges-lox-box:not([hidden]) { display: grid; grid-template: "image intro intro" min-content @@ -601,11 +587,8 @@ button.spoof-button-disabled {

.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 { @@ -619,11 +602,11 @@ button.spoof-button-disabled { gap: 8px 0; }

-.tor-bridges-lox-list-item { +.tor-bridges-lox-list-item:not([hidden]) { display: contents; }

-.tor-bridges-lox-list-item::before { +.tor-bridges-lox-list-item:not([hidden])::before { /* We use ::before rather than list-style-image to have more control. */ box-sizing: content-box; width: 18px; @@ -655,52 +638,19 @@ button.spoof-button-disabled { stroke: var(--in-content-success-icon-color); }

-#tor-bridges-lox-details:not(.lox-next-gain-bridges) #tor-bridges-lox-next-unlock-gain-bridges { - display: none; -} - -#tor-bridges-lox-details:not(.lox-next-first-invites) #tor-bridges-lox-next-unlock-first-invites { - display: none; -} - -#tor-bridges-lox-details:not(.lox-next-more-invites) #tor-bridges-lox-next-unlock-more-invites { - display: none; -} - - -#tor-bridges-lox-unlock-alert:not(.lox-unlock-gain-bridges) #tor-bridges-lox-unlock-alert-gain-bridges { - display: none; -} - -#tor-bridges-lox-unlock-alert:not(.lox-unlock-new-bridges) #tor-bridges-lox-unlock-alert-new-bridges { - display: none; -} - -#tor-bridges-lox-unlock-alert:not(.lox-unlock-invites) #tor-bridges-lox-unlock-alert-invites { - display: none; -} - #tor-bridges-lox-remaining-invites { grid-area: invites; justify-self: end; align-self: center; }

-#tor-bridges-lox-details:not(.lox-has-invites) :is( - #tor-bridges-lox-remaining-invites, - #tor-bridges-lox-show-invites-button -) { - display: none; -} - .tor-bridges-lox-button { grid-area: button; margin: 0; align-self: center; }

-#tor-bridges-provider-heading { - font-size: 1.14em; +.tor-bridges-provider-heading { margin-block: 48px 8px; }

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/87cdcd5...