morgan pushed to branch tor-browser-128.4.0esr-14.5-1 at The Tor Project / Applications / Tor Browser
Commits:
-
facc9a28
by Henry Wilkes at 2024-11-13T20:06:19+00:00
3 changed files:
- browser/components/torcircuit/content/torCircuitPanel.css
- browser/components/torcircuit/content/torCircuitPanel.inc.xhtml
- browser/components/torcircuit/content/torCircuitPanel.js
Changes:
| ... | ... | @@ -182,6 +182,6 @@ |
| 182 | 182 | margin: 0;
|
| 183 | 183 | }
|
| 184 | 184 | |
| 185 | -.tor-circuit-button label.tor-circuit-button-description {
|
|
| 185 | +.tor-circuit-button .tor-circuit-button-description {
|
|
| 186 | 186 | margin-block-start: var(--space-xsmall);
|
| 187 | 187 | } |
| ... | ... | @@ -3,18 +3,20 @@ |
| 3 | 3 | aria-labelledby="tor-circuit-heading"
|
| 4 | 4 | type="arrow"
|
| 5 | 5 | orient="vertical"
|
| 6 | - class="cui-widget-panel panel-no-padding"
|
|
| 7 | - tabindex="0">
|
|
| 6 | + class="cui-widget-panel panel-no-padding">
|
|
| 8 | 7 | <!-- Use same semantic structure as #identity-popup and #protections-popup
|
| 9 | 8 | - with a role="alertdialog" wrapping a role="document", except we use a
|
| 10 | 9 | - "dialog" rather than an "alertdialog".
|
| 11 | 10 | - Moreover, since this "dialog" may just be for reading, we also make the
|
| 12 | - - "dialog" part of the focus cycle and receive the initial focus, rather
|
|
| 11 | + - "document" part of the focus cycle and receive the initial focus, rather
|
|
| 13 | 12 | - than finding the first focusable target within.
|
| 14 | 13 | - We do not set "aria-describedby" for this "dialog" because the content
|
| 15 | 14 | - is complex, so a flat string would not make sense. -->
|
| 16 | - <vbox id="tor-circuit-panel-document"
|
|
| 17 | - role="document">
|
|
| 15 | + <!-- NOTE: Currently Orca fails to read the content of this panel, so the
|
|
| 16 | + - circuit details are not accessible. This effects mozilla-central as well.
|
|
| 17 | + - See bugzilla bug 1820765 and bugzilla bug 1926374.
|
|
| 18 | + - The focusable elements are still operable though. -->
|
|
| 19 | + <vbox id="tor-circuit-panel-document" role="document" tabindex="0">
|
|
| 18 | 20 | <vbox class="panel-header">
|
| 19 | 21 | <html:h1 id="tor-circuit-heading"></html:h1>
|
| 20 | 22 | <html:div id="tor-circuit-alias" hidden="hidden">
|
| ... | ... | @@ -75,10 +77,12 @@ |
| 75 | 77 | class="toolbarbutton-text"
|
| 76 | 78 | data-l10n-id="tor-circuit-panel-new-button"
|
| 77 | 79 | />
|
| 78 | - <label
|
|
| 80 | + <!-- NOTE: Use html:span rather than xul:label. Otherwise Orca will
|
|
| 81 | + - treat this as a label for the dialog. -->
|
|
| 82 | + <html:span
|
|
| 79 | 83 | id="tor-circuit-new-circuit-description"
|
| 80 | 84 | class="tor-circuit-button-description"
|
| 81 | - />
|
|
| 85 | + ></html:span>
|
|
| 82 | 86 | </vbox>
|
| 83 | 87 | </toolbarbutton>
|
| 84 | 88 | </vbox>
|
| ... | ... | @@ -61,6 +61,7 @@ var gTorCircuitPanel = { |
| 61 | 61 | |
| 62 | 62 | this.panel = document.getElementById("tor-circuit-panel");
|
| 63 | 63 | this._panelElements = {
|
| 64 | + doc: document.getElementById("tor-circuit-panel-document"),
|
|
| 64 | 65 | heading: document.getElementById("tor-circuit-heading"),
|
| 65 | 66 | alias: document.getElementById("tor-circuit-alias"),
|
| 66 | 67 | aliasLabel: document.getElementById("tor-circuit-alias-label"),
|
| ... | ... | @@ -138,13 +139,18 @@ var gTorCircuitPanel = { |
| 138 | 139 | this._updateCircuitPanel();
|
| 139 | 140 | });
|
| 140 | 141 | |
| 141 | - // Set the initial focus to the panel element itself, which has been made a
|
|
| 142 | - // focusable target. Similar to dialogs, or webextension-popup-browser.
|
|
| 142 | + // Set the initial focus to the panel document itself, which has been made a
|
|
| 143 | + // focusable target. Similar to webextension-popup-browser.
|
|
| 144 | + // Switching to a document should prompt screen readers to enter "browse
|
|
| 145 | + // mode" and allow the user to navigate the dialog content.
|
|
| 146 | + // NOTE: We could set the focus to the first focusable child within the
|
|
| 147 | + // document, but this would usually be the "New circuit" button, which would
|
|
| 148 | + // skip over the rest of the document content.
|
|
| 143 | 149 | this.panel.addEventListener("popupshown", event => {
|
| 144 | 150 | if (event.target !== this.panel) {
|
| 145 | 151 | return;
|
| 146 | 152 | }
|
| 147 | - this.panel.focus();
|
|
| 153 | + this._panelElements.doc.focus();
|
|
| 148 | 154 | });
|
| 149 | 155 | |
| 150 | 156 | // this.toolbarButton follows "identity-button" markup, so is a <xul:box>
|