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 fixup! Bug 41600: Add a tor circuit display panel.

Bug 43237: Tweak Tor circuit display panel for screen readers.

- - - - -

3 changed files:

- browser/components/torcircuit/content/torCircuitPanel.css - browser/components/torcircuit/content/torCircuitPanel.inc.xhtml - browser/components/torcircuit/content/torCircuitPanel.js

Changes:

===================================== browser/components/torcircuit/content/torCircuitPanel.css ===================================== @@ -182,6 +182,6 @@ margin: 0; }

-.tor-circuit-button label.tor-circuit-button-description { +.tor-circuit-button .tor-circuit-button-description { margin-block-start: var(--space-xsmall); }

===================================== browser/components/torcircuit/content/torCircuitPanel.inc.xhtml ===================================== @@ -3,18 +3,20 @@ aria-labelledby="tor-circuit-heading" type="arrow" orient="vertical" - class="cui-widget-panel panel-no-padding" - tabindex="0"> + class="cui-widget-panel panel-no-padding"> <!-- Use same semantic structure as #identity-popup and #protections-popup - with a role="alertdialog" wrapping a role="document", except we use a - "dialog" rather than an "alertdialog". - Moreover, since this "dialog" may just be for reading, we also make the - - "dialog" part of the focus cycle and receive the initial focus, rather + - "document" part of the focus cycle and receive the initial focus, rather - than finding the first focusable target within. - We do not set "aria-describedby" for this "dialog" because the content - is complex, so a flat string would not make sense. --> - <vbox id="tor-circuit-panel-document" - role="document"> + <!-- NOTE: Currently Orca fails to read the content of this panel, so the + - circuit details are not accessible. This effects mozilla-central as well. + - See bugzilla bug 1820765 and bugzilla bug 1926374. + - The focusable elements are still operable though. --> + <vbox id="tor-circuit-panel-document" role="document" tabindex="0"> <vbox class="panel-header"> <html:h1 id="tor-circuit-heading"></html:h1> <html:div id="tor-circuit-alias" hidden="hidden"> @@ -75,10 +77,12 @@ class="toolbarbutton-text" data-l10n-id="tor-circuit-panel-new-button" /> - <label + <!-- NOTE: Use html:span rather than xul:label. Otherwise Orca will + - treat this as a label for the dialog. --> + <html:span id="tor-circuit-new-circuit-description" class="tor-circuit-button-description" - /> + ></html:span> </vbox> </toolbarbutton> </vbox>

===================================== browser/components/torcircuit/content/torCircuitPanel.js ===================================== @@ -61,6 +61,7 @@ var gTorCircuitPanel = {

this.panel = document.getElementById("tor-circuit-panel"); this._panelElements = { + doc: document.getElementById("tor-circuit-panel-document"), heading: document.getElementById("tor-circuit-heading"), alias: document.getElementById("tor-circuit-alias"), aliasLabel: document.getElementById("tor-circuit-alias-label"), @@ -138,13 +139,18 @@ var gTorCircuitPanel = { this._updateCircuitPanel(); });

- // Set the initial focus to the panel element itself, which has been made a - // focusable target. Similar to dialogs, or webextension-popup-browser. + // Set the initial focus to the panel document itself, which has been made a + // focusable target. Similar to webextension-popup-browser. + // Switching to a document should prompt screen readers to enter "browse + // mode" and allow the user to navigate the dialog content. + // NOTE: We could set the focus to the first focusable child within the + // document, but this would usually be the "New circuit" button, which would + // skip over the rest of the document content. this.panel.addEventListener("popupshown", event => { if (event.target !== this.panel) { return; } - this.panel.focus(); + this._panelElements.doc.focus(); });

// this.toolbarButton follows "identity-button" markup, so is a xul:box

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/facc9a28...