Merge pull request #20472 from calixteman/bug1998046_2

Inject the text from the text layer in the MathML tags when they're in the struct tree (bug 1998046)

Author: calixteman

test/integration/accessibility_spec.mjs

@@ -420,8 +420,12 @@ describe("accessibility", () => {
           expect(mathML)
             .withContext(`In ${browserName}`)
             .toEqual(
-              `<mi aria-owns="p76R_mc16"></mi><mo aria-owns="p76R_mc17"></mo><msqrt><mrow><msup><mi aria-owns="p76R_mc18"></mi><mn aria-owns="p76R_mc19"></mn></msup><mo aria-owns="p76R_mc20"></mo><msup><mi aria-owns="p76R_mc21"></mi><mn aria-owns="p76R_mc22"></mn></msup></mrow></msqrt>`
+              `<mi aria-owns="p76R_mc16">𝑐</mi><mo aria-owns="p76R_mc17">=</mo><msqrt><mrow><msup><mi aria-owns="p76R_mc18">𝑎</mi><mn aria-owns="p76R_mc19">2</mn></msup><mo aria-owns="p76R_mc20">+</mo><msup><mi aria-owns="p76R_mc21">𝑏</mi><mn aria-owns="p76R_mc22">2</mn></msup></mrow></msqrt>`
             );
+          const ariaHidden = await page.$eval("span#p76R_mc16", el =>
+            el.getAttribute("aria-hidden")
+          );
+          expect(ariaHidden).withContext(`In ${browserName}`).toEqual("true");
         })
       );
     });

web/struct_tree_layer_builder.js

@@ -323,9 +323,26 @@ class StructTreeLayerBuilder {
     let element;
     if ("role" in node) {
       const { role } = node;
-      element = MathMLElements.has(role)
-        ? document.createElementNS(MathMLNamespace, role)
-        : document.createElement("span");
+      if (MathMLElements.has(role)) {
+        element = document.createElementNS(MathMLNamespace, role);
+        let text = "";
+        for (const { type, id } of node.children || []) {
+          if (type !== "content" || !id) {
+            continue;
+          }
+          const elem = document.getElementById(id);
+          if (!elem) {
+            continue;
+          }
+          text += elem.textContent.trim() || "";
+          // Aria-hide the element in order to avoid duplicate reading of the
+          // math content by screen readers.
+          elem.ariaHidden = "true";
+        }
+        element.textContent = text;
+      } else {
+        element = document.createElement("span");
+      }
       const match = role.match(HEADING_PATTERN);
       if (match) {
         element.setAttribute("role", "heading");