From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 12 Jan 2022 17:15:54 +0000 (+0100)
Subject: Missing ARIA label for shadow links
X-Git-Tag: 5.5.0_Alpha_1~230
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c86d00dc2ceff97a25d23344321d44e48812c145;p=GitHub%2FWoltLab%2FWCF.git

Missing ARIA label for shadow links
---

diff --git a/ts/WoltLabSuite/Core/Ui/Mobile.ts b/ts/WoltLabSuite/Core/Ui/Mobile.ts
index 4d881acb17..3a7bb040fb 100644
--- a/ts/WoltLabSuite/Core/Ui/Mobile.ts
+++ b/ts/WoltLabSuite/Core/Ui/Mobile.ts
@@ -9,6 +9,7 @@
 
 import * as Core from "../Core";
 import DomChangeListener from "../Dom/Change/Listener";
+import DomUtil from "../Dom/Util";
 import * as Environment from "../Environment";
 import * as UiAlignment from "./Alignment";
 import UiCloseOverlay from "./CloseOverlay";
@@ -391,6 +392,7 @@ export function rebuildShadow(elements: HTMLElement[] | HTMLCollection, linkSele
         shadow = document.createElement("a");
         shadow.className = "mobileLinkShadow";
         shadow.href = link.href;
+        shadow.setAttribute("aria-labelledby", DomUtil.identify(link));
         parent.appendChild(shadow);
         parent.classList.add("mobileLinkShadowContainer");
       }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index 956570bd02..2b67e2920b 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
@@ -6,12 +6,13 @@
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module  WoltLabSuite/Core/Ui/Mobile
  */
-define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../Environment", "./Alignment", "./CloseOverlay", "./Dropdown/Reusable", "./Page/Menu/Main", "./Page/Menu/User", "./Screen"], function (require, exports, tslib_1, Core, Listener_1, Environment, UiAlignment, CloseOverlay_1, UiDropdownReusable, Main_1, User_1, UiScreen) {
+define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../Dom/Util", "../Environment", "./Alignment", "./CloseOverlay", "./Dropdown/Reusable", "./Page/Menu/Main", "./Page/Menu/User", "./Screen"], function (require, exports, tslib_1, Core, Listener_1, Util_1, Environment, UiAlignment, CloseOverlay_1, UiDropdownReusable, Main_1, User_1, UiScreen) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.removeShadow = exports.rebuildShadow = exports.disableShadow = exports.disable = exports.enableShadow = exports.enable = exports.setup = void 0;
     Core = (0, tslib_1.__importStar)(Core);
     Listener_1 = (0, tslib_1.__importDefault)(Listener_1);
+    Util_1 = (0, tslib_1.__importDefault)(Util_1);
     Environment = (0, tslib_1.__importStar)(Environment);
     UiAlignment = (0, tslib_1.__importStar)(UiAlignment);
     CloseOverlay_1 = (0, tslib_1.__importDefault)(CloseOverlay_1);
@@ -335,6 +336,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../
                     shadow = document.createElement("a");
                     shadow.className = "mobileLinkShadow";
                     shadow.href = link.href;
+                    shadow.setAttribute("aria-labelledby", Util_1.default.identify(link));
                     parent.appendChild(shadow);
                     parent.classList.add("mobileLinkShadowContainer");
                 }