Aria-hide the text content part of a MathML formula (bug 1998046)

It'll avoid to have the text content and the MathML content read by
screen readers.
This commit is contained in:
calixteman 2025-11-30 22:20:24 +01:00
parent 4aca13e77a
commit 87b3b5212e
No known key found for this signature in database
GPG Key ID: 0C5442631EE0691F
2 changed files with 28 additions and 3 deletions

View File

@ -336,10 +336,20 @@ describe("accessibility", () => {
expect(mathML)
.withContext(`In ${browserName}`)
.toEqual(
" <msqrt><msup><mi>x</mi><mn>2</mn></msup></msqrt> <mo>=</mo> <mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow> "
` <msqrt><msup><mi>x</mi><mn>2</mn></msup></msqrt> <mo>=</mo> <mrow intent="absolute-value($x)"><mo>|</mo><mi arg="x">x</mi><mo>|</mo></mrow> `
);
// Check that the math corresponding element is hidden in the text
// layer.
const ariaHidden = await page.$eval("span#p58R_mc13", el =>
el.getAttribute("aria-hidden")
);
expect(ariaHidden).withContext(`In ${browserName}`).toEqual("true");
} else {
pending(`Sanitizer API (in ${browserName}) is not supported`);
// eslint-disable-next-line no-console
console.log(
`Pending in Chrome: Sanitizer API (in ${browserName}) is not supported`
);
}
})
);
@ -379,7 +389,10 @@ describe("accessibility", () => {
'<math display="block"> <msup> <mi>𝑛</mi> <mi>𝑝</mi> </msup> <mo lspace="0.278em" rspace="0.278em">=</mo> <mi>𝑛</mi> <mspace width="1.000em"></mspace> <mi> mod </mi> <mspace width="0.167em"></mspace> <mspace width="0.167em"></mspace> <mi>𝑝</mi> </math>'
);
} else {
pending(`Sanitizer API (in ${browserName}) is not supported`);
// eslint-disable-next-line no-console
console.log(
`Pending in Chrome: Sanitizer API (in ${browserName}) is not supported`
);
}
})
);

View File

@ -341,6 +341,18 @@ class StructTreeLayerBuilder {
element.setHTML(node.mathML, {
sanitizer: MathMLSanitizer.sanitizer,
});
// Hide all the corresponding content elements in the text layer in
// order to avoid screen readers reading both the MathML and the
// text content.
for (const { id } of node.children || []) {
if (!id) {
continue;
}
const elem = document.getElementById(id);
if (elem) {
elem.ariaHidden = true;
}
}
}
if (
!node.mathML &&