Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nami8824 wants to merge 2 commits into
base: develop
Choose a base branch
from
+48 −3
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd04839
fix(commons/text): exclude natively hidden elements from aria-labelle…
nami8824 Apr 15, 2026
c864c8d
test(commons/text): add aria-label test for natively hidden aria-labe…
nami8824 Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions lib/commons/text/accessible-text-virtual.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import titleText from './title-text';
import sanitize from './sanitize';
import isVisibleToScreenReaders from '../dom/is-visible-to-screenreader';
import isIconLigature from '../text/is-icon-ligature';
import { nativelyHidden } from '../dom/visibility-methods';

/**
* Finds virtual node and calls accessibleTextVirtual()
Expand Down Expand Up @@ -84,11 +85,14 @@ function shouldIgnoreHidden(virtualNode, context) {
return false;
}

// When traversing aria-labelledby references, include hidden nodes except natively hidden elements
if (context.includeHidden && !nativelyHidden(virtualNode)) {
return false;
}

if (
// If the parent isn't ignored, the text node should not be either
virtualNode.props.nodeType !== 1 ||
// If the target of aria-labelledby is hidden, ignore all descendents
context.includeHidden
virtualNode.props.nodeType !== 1
) {
return false;
}
Expand Down
41 changes: 41 additions & 0 deletions test/commons/text/accessible-text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1649,6 +1649,47 @@ describe('text.accessibleTextVirtual', () => {
});
});

describe('natively hidden elements', () => {
const tags = ['style', 'script', 'noscript', 'template'];

it('should not use content 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">content</${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

@WilcoFiers WilcoFiers Apr 16, 2026

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

@nami8824 nami8824 Apr 16, 2026

Choose a reason for hiding this comment

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

Added the test case.

it('should not use content when inside a hidden container referenced by aria-labelledby', () => {
tags.forEach(tag => {
fixture.innerHTML = `
<div id="t1" aria-labelledby="hidden-container"></div>
<div id="hidden-container" aria-hidden="true">
<${tag}>content</${tag}>
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',
tag
);
});
});

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);
});
});
});

describe('text.accessibleText acceptance tests', () => {
'use strict';
// Tests borrowed from the AccName 1.1 testing docs
Expand Down