From e7229854bdfc872c660af24916748f63ff046415 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Thu, 31 Aug 2023 15:19:05 +0200
Subject: [PATCH] Fix the id used in aria-controls used to make a relationship
 between the popup and its parent

---
 src/display/annotation_layer.js        |  5 ++++-
 test/integration/accessibility_spec.js | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
index 90cf2edf4..cc6776839 100644
--- a/src/display/annotation_layer.js
+++ b/src/display/annotation_layer.js
@@ -1954,7 +1954,10 @@ class PopupAnnotationElement extends AnnotationElement {
       element.addHighlightArea();
     }
 
-    this.container.setAttribute("aria-controls", elementIds.join(","));
+    this.container.setAttribute(
+      "aria-controls",
+      elementIds.map(id => `${AnnotationPrefix}${id}`).join(",")
+    );
 
     return this.container;
   }
diff --git a/test/integration/accessibility_spec.js b/test/integration/accessibility_spec.js
index c161e5dd8..b11c0eb5c 100644
--- a/test/integration/accessibility_spec.js
+++ b/test/integration/accessibility_spec.js
@@ -151,6 +151,24 @@ describe("accessibility", () => {
       await closePages(pages);
     });
 
+    it("must check the id in aria-controls", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.waitForSelector(".annotationLayer");
+          const stampId = "pdfjs_internal_id_20R";
+          await page.click(`#${stampId}`);
+
+          const controlledId = await page.$eval(
+            "#pdfjs_internal_id_21R",
+            el => document.getElementById(el.getAttribute("aria-controls")).id
+          );
+          expect(controlledId)
+            .withContext(`In ${browserName}`)
+            .toEqual(stampId);
+        })
+      );
+    });
+
     it("must check that the stamp annotation is linked to the struct tree", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {