From 93e0d64c4e013d5f20cc8638a756965a6318e62a Mon Sep 17 00:00:00 2001 From: "@suet-kei.chan" Date: Thu, 9 Jul 2026 11:32:58 +0200 Subject: [PATCH] fix: add missing accessibility label on E-Mail header link The E-Mail link in the header had no accessible name for screen readers despite having visible text and opening in a new tab. Changes: - Add aria-label to the element composing the email text with the unread count when applicable (e.g. "E-Mail, 12 unread, opens in new tab") and always appending ", opens in new tab" to inform screen readers that the link opens in a new browser tab - Add aria-hidden="true" to the mail icon, unread badge, and label
to prevent screen readers from double-announcing the content already covered by the aria-label on the parent link --- js/nmc_spica.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/js/nmc_spica.js b/js/nmc_spica.js index 861a22e..a3228b9 100644 --- a/js/nmc_spica.js +++ b/js/nmc_spica.js @@ -33,12 +33,24 @@ var label = document.createElement('div'); label.textContent = t('core', 'Email'); + icon.setAttribute('aria-hidden', 'true'); + badge.setAttribute('aria-hidden', 'true'); + label.setAttribute('aria-hidden', 'true'); + var parentMailWrapper = document.createElement('div'); parentMailWrapper.id = "nmc_spica"; var mailWrapper = document.createElement('a'); mailWrapper.href = OCP.InitialState.loadState('nmc_spica', 'mail-url'); mailWrapper.target = "_blank"; mailWrapper.classList = 'nmc_spica_wrapper'; + + var ariaLabel = t('core', 'Email'); + if (hasUnread) { + ariaLabel += ', ' + count + ' unread'; + } + ariaLabel += ', opens in new tab'; + mailWrapper.setAttribute('aria-label', ariaLabel); + mailWrapper.appendChild(icon); mailWrapper.appendChild(badge); mailWrapper.appendChild(label);