From 797ac9021aa33b4e472601e3841d12a99f3683ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caol=C3=A1n=20McNamara?= Date: Fri, 24 Apr 2026 20:41:23 +0100 Subject: [PATCH] set a better aria-label for logo when it is a link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit branding can override this and then the aria-label is out of sync, so listen for the branding change and set a suitable aria-label if a link is set WCAG 3.2.5 asks that a change of context like opening a new tab be announced - "SOMETHING website, opens in new tab" Signed-off-by: Caolán McNamara Change-Id: I8dfb117259bbe25357d3054f1857004a15e52efd --- browser/src/control/Control.Notebookbar.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/browser/src/control/Control.Notebookbar.js b/browser/src/control/Control.Notebookbar.js index 5c0418a714157..6a73d68ce44c6 100644 --- a/browser/src/control/Control.Notebookbar.js +++ b/browser/src/control/Control.Notebookbar.js @@ -104,13 +104,29 @@ window.L.Control.Notebookbar = window.L.Control.extend({ docLogo.setAttribute('id', 'document-logo'); docLogo.setAttribute('type', 'action'); docLogo.setAttribute('target', '_blank'); - docLogo.setAttribute('aria-label', _('file type icon')); docLogo.setAttribute('tabIndex', 0); - docLogo.setAttribute('aria-label', _('file type icon')); if (iconTooltip) { docLogo.setAttribute('data-cooltip', iconTooltip); } + // Mirror data-cooltip onto aria-label so the accessible name + // matches the visible tooltip, even when branding overrides + // data-cooltip after load (e.g. to "Collabora Online"). When + // branding also sets an href, target="_blank" takes effect and + // the link opens a new tab, so announce that to screen readers. + const syncAriaLabel = () => { + const cooltip = docLogo.getAttribute('data-cooltip'); + if (!cooltip) return; + const label = docLogo.getAttribute('href') + ? _('{0} website, opens in new tab').replace('{0}', cooltip) + : cooltip; + docLogo.setAttribute('aria-label', label); + }; + syncAriaLabel(); + new MutationObserver(syncAriaLabel).observe(docLogo, { + attributes: true, + attributeFilter: ['data-cooltip', 'href'], + }); window.L.control.attachTooltipEventListener(docLogo, this.map); $('.main-nav').prepend(docLogoHeader);