Skip to content

fix(commons/text): exclude natively hidden elements from aria-labelledby accessible name#5076

Open
nami8824 wants to merge 2 commits intodequelabs:developfrom
nami8824:fix/commons-text-natively-hidden-accessible-name
Open

fix(commons/text): exclude natively hidden elements from aria-labelledby accessible name#5076
nami8824 wants to merge 2 commits intodequelabs:developfrom
nami8824:fix/commons-text-natively-hidden-accessible-name

Conversation

@nami8824
Copy link
Copy Markdown
Contributor

Fixes accessible name calculation to correctly exclude <style> contents, as well as <script>, <noscript>, and <template>, when referenced via aria-labelledby.

Closes #4704

…dby accessible name

style, script, noscript, and template elements are natively hidden and
should not contribute to the accessible name even when referenced via
aria-labelledby with includeHidden context.

Closes issue dequelabs#4704
@nami8824 nami8824 requested a review from a team as a code owner April 15, 2026 08:24
Copy link
Copy Markdown
Contributor

@WilcoFiers WilcoFiers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks solid. I'd like to see one test case added.

assert.equal(axe.commons.text.accessibleTextVirtual(target), '', tag);
});
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is worth having a test for too. This isn't about hiding content. The element itself should be ignored. There are elements with hidden content that aren't themselves hidden (canvas, iframe). The fix here is specifically about hiding the element.

Suggested change
it('should ignore aria-label as accessible name when directly referenced by aria-labelledby', () => {
tags.forEach(tag => {
fixture.innerHTML = `<div id="t1" aria-labelledby="el-id"></div><${tag} id="el-id" aria-label="aria-label"></${tag}>`;
axe.testUtils.flatTreeSetup(fixture);
const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
assert.equal(axe.commons.text.accessibleTextVirtual(target), '', tag);
});
});

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the test case.

@nami8824 nami8824 requested a review from WilcoFiers April 16, 2026 12:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

accessibleText incorrectly handles aria-labelledby pointing towards <style> elements

2 participants