Open
Description
Product
axe-core
Product Version
4.10.2
Latest Version
- I have tested the issue with the latest version of the product
Issue Description
The accessibleText
utility doesn't correctly handle cases where the target element is aria-labelledby
an aria-hidden
element that contains a <style>
element. We noticed this in practice against some of the icon buttons at the top-right of https://github.com, which use a pattern along these lines:
<a href="..." aria-labelledby="tooltip-1"><img ...></a>
<tool-tip id="tooltip-1" aria-hidden="true">
#shadow-root (open)
<style>.stuff {}</style>
<slot></slot>
Tooltip content
</tool-tip>
...and the accessible text comes back like ".stuff {} Tooltip content"
instead of the expected "Tooltip content"
.
Expectation
The 2 new test cases below should pass
Actual
They fail
How to Reproduce
// /test/commons/text/accessible-text.js
it('should not use <style> contents as a label, even if explicitly referenced with labelledby', () => {
fixture.innerHTML = html`
<div id="t1" aria-labelledby="style-id"></div>
<style id="style-id">.shouldnt-be-part-of-accessible-text {}</style>
`
axe.testUtils.flatTreeSetup(fixture);
const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
});
it('should not use <style> contents as a label, even if labelledby explicitly references a hidden container', () => {
fixture.innerHTML = html`
<div id="t1" aria-labelledby="hidden-container"></div>
<div id="hidden-container" aria-hidden="true">
<style>.shouldnt-be-part-of-accessible-text {}</style>
Expected label
</div>
`
axe.testUtils.flatTreeSetup(fixture);
const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Expected label');
});
Additional context
I already double checked in Chrome/Firefox/Safari that the browsers don't include the <style>
contents in their calculations here.