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
3 changed files:
- browser/components/torpreferences/content/connectionPane.js
- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/torPreferences.css
Changes:
... | ... | @@ -1525,7 +1525,8 @@ const gLoxStatus = { |
1525 | 1525 | }
|
1526 | 1526 | |
1527 | 1527 | if (alertHadFocus && !showAlert) {
|
1528 | - // Has become hidden.
|
|
1528 | + // Alert has become hidden, move focus back up to the now revealed details
|
|
1529 | + // area.
|
|
1529 | 1530 | this._nextUnlockCounterEl.focus();
|
1530 | 1531 | } else if (detailsHadFocus && showAlert) {
|
1531 | 1532 | this._unlockAlertButton.focus();
|
... | ... | @@ -67,7 +67,11 @@ |
67 | 67 | |
68 | 68 | <!-- Bridges -->
|
69 | 69 | <hbox class="subcategory" data-category="paneConnection" hidden="true">
|
70 | - <html:h1 id="torPreferences-bridges-header" tabindex="-1" />
|
|
70 | + <html:h1
|
|
71 | + id="torPreferences-bridges-header"
|
|
72 | + class="tor-focusable-heading"
|
|
73 | + tabindex="-1"
|
|
74 | + ></html:h1>
|
|
71 | 75 | </hbox>
|
72 | 76 | <groupbox
|
73 | 77 | id="torPreferences-bridges-group"
|
... | ... | @@ -157,22 +161,26 @@ |
157 | 161 | <html:div id="tor-bridges-current-header-bar">
|
158 | 162 | <html:h2
|
159 | 163 | id="tor-bridges-current-heading"
|
164 | + class="tor-focusable-heading"
|
|
160 | 165 | tabindex="-1"
|
161 | 166 | data-l10n-id="tor-bridges-your-bridges"
|
162 | 167 | ></html:h2>
|
163 | 168 | <html:span
|
164 | 169 | id="tor-bridges-user-label"
|
170 | + class="tor-bridges-source-label"
|
|
165 | 171 | data-l10n-id="tor-bridges-source-user"
|
166 | 172 | ></html:span>
|
167 | 173 | <html:span
|
168 | 174 | id="tor-bridges-built-in-label"
|
175 | + class="tor-bridges-source-label"
|
|
169 | 176 | data-l10n-id="tor-bridges-source-built-in"
|
170 | 177 | ></html:span>
|
171 | 178 | <html:span
|
172 | 179 | id="tor-bridges-requested-label"
|
180 | + class="tor-bridges-source-label"
|
|
173 | 181 | data-l10n-id="tor-bridges-source-requested"
|
174 | 182 | ></html:span>
|
175 | - <html:span id="tor-bridges-lox-label">
|
|
183 | + <html:span id="tor-bridges-lox-label" class="tor-bridges-source-label">
|
|
176 | 184 | <html:img id="tor-bridges-lox-label-icon" alt="" />
|
177 | 185 | <html:span data-l10n-id="tor-bridges-source-lox"></html:span>
|
178 | 186 | </html:span>
|
... | ... | @@ -307,11 +315,11 @@ |
307 | 315 | >
|
308 | 316 | <html:img alt="" class="tor-bridges-lox-image-inner" />
|
309 | 317 | <html:img alt="" class="tor-bridges-lox-image-outer" />
|
310 | - <html:div
|
|
318 | + <html:h3
|
|
311 | 319 | id="tor-bridges-lox-next-unlock-counter"
|
312 | - class="tor-bridges-lox-intro"
|
|
320 | + class="tor-bridges-lox-intro tor-focusable-heading"
|
|
313 | 321 | tabindex="-1"
|
314 | - ></html:div>
|
|
322 | + ></html:h3>
|
|
315 | 323 | <html:ul class="tor-bridges-lox-list">
|
316 | 324 | <html:li
|
317 | 325 | id="tor-bridges-lox-next-unlock-gain-bridges"
|
... | ... | @@ -70,6 +70,10 @@ |
70 | 70 | |
71 | 71 | /* Bridge settings */
|
72 | 72 | |
73 | +.tor-focusable-heading:focus-visible {
|
|
74 | + outline-offset: var(--in-content-focus-outline-offset);
|
|
75 | +}
|
|
76 | + |
|
73 | 77 | .bridge-status-badge {
|
74 | 78 | display: flex;
|
75 | 79 | min-width: max-content;
|
... | ... | @@ -210,16 +214,31 @@ |
210 | 214 | }
|
211 | 215 | |
212 | 216 | #tor-bridges-current-header-bar {
|
213 | - display: flex;
|
|
217 | + display: grid;
|
|
214 | 218 | min-width: max-content;
|
219 | + grid-template: "heading source button" min-content / max-content 1fr max-content;
|
|
215 | 220 | align-items: center;
|
216 | 221 | border-block-end: 1px solid var(--in-content-border-color);
|
217 | 222 | padding-block-end: 16px;
|
218 | 223 | margin-block-end: 16px;
|
224 | + white-space: nowrap;
|
|
219 | 225 | }
|
220 | 226 | |
221 | -#tor-bridges-current-header-bar > * {
|
|
222 | - flex: 0 0 auto;
|
|
227 | +#tor-bridges-current-heading {
|
|
228 | + margin: 0;
|
|
229 | + font-size: inherit;
|
|
230 | + grid-area: heading;
|
|
231 | +}
|
|
232 | + |
|
233 | +.tor-bridges-source-label {
|
|
234 | + margin-inline-start: 2em;
|
|
235 | + margin-inline-end: 8px;
|
|
236 | + grid-area: source;
|
|
237 | + justify-self: end;
|
|
238 | +}
|
|
239 | + |
|
240 | +#tor-bridges-all-options-button {
|
|
241 | + grid-area: button;
|
|
223 | 242 | }
|
224 | 243 | |
225 | 244 | #tor-bridges-lox-label {
|
... | ... | @@ -240,13 +259,6 @@ |
240 | 259 | fill: var(--in-content-icon-color);
|
241 | 260 | }
|
242 | 261 | |
243 | -#tor-bridges-current-heading {
|
|
244 | - margin: 0;
|
|
245 | - margin-inline-end: 2em;
|
|
246 | - font-size: inherit;
|
|
247 | - flex: 1 0 auto;
|
|
248 | -}
|
|
249 | - |
|
250 | 262 | .tor-bridges-options-button {
|
251 | 263 | padding: 3px;
|
252 | 264 | margin: 0;
|
... | ... | @@ -264,10 +276,6 @@ |
264 | 276 | fill: currentColor;
|
265 | 277 | }
|
266 | 278 | |
267 | -#tor-bridges-all-options-button {
|
|
268 | - margin-inline-start: 8px;
|
|
269 | -}
|
|
270 | - |
|
271 | 279 | #tor-bridges-built-in-display {
|
272 | 280 | display: grid;
|
273 | 281 | grid-template:
|
... | ... | @@ -552,7 +560,10 @@ |
552 | 560 | .tor-bridges-lox-intro {
|
553 | 561 | grid-area: intro;
|
554 | 562 | font-weight: 700;
|
563 | + font-size: inherit;
|
|
555 | 564 | align-self: center;
|
565 | + justify-self: start;
|
|
566 | + margin: 0;
|
|
556 | 567 | }
|
557 | 568 | |
558 | 569 | .tor-bridges-lox-list {
|