Skip to content

fix(simulator): Handle the case of links within labels #2591

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

Merged
tombrunet merged 2 commits into from
Jul 7, 2026
+73 −6
Merged

fix(simulator): Handle the case of links within labels #2591

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
c309712
Address links in labels
tombrunet Jun 29, 2026
58a7bcc
Merge branch 'main-4.x' into issue-2540
tombrunet Jul 7, 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
50 changes: 44 additions & 6 deletions accessibility-checker-engine/src/v4/simulator/SRNavigator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,14 +279,16 @@ export namespace SRNavigator {
}
if (elem.nodeName.toUpperCase() === "BODY") return retVal = { skipCurrent: false, skipChildren: false };

// Skip labels that are associated with controls - they'll be read with the related input
// Skip labels that are associated with controls - they'll be read with the related input.
// Keep children so interactive content (e.g. links) inside the label still appears in
// reading/tab order.
if (elem.nodeName.toUpperCase() === "LABEL") {
if (
elem.hasAttribute("for")
&& document.getElementById(elem.getAttribute("for"))
&& document.getElementById(elem.getAttribute("for")).getAttribute("type") !== "hidden"
) {
return retVal = { skipCurrent: true, skipChildren: true };
return retVal = { skipCurrent: true, skipChildren: false };
} else {
const nestedControl = elem.querySelector("input, select, textarea, button, [role='checkbox'], [role='combobox'], [role='listbox'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='radio'], [role='searchbox'], [role='slider'], [role='spinbutton'], [role='switch'], [role='textbox']");
if (nestedControl && (nestedControl as HTMLElement).getAttribute("type") !== "hidden") {
Expand All @@ -295,6 +297,23 @@ export namespace SRNavigator {
}
}

// Skip non-interactive content that is a descendant of a for-linked label.
// Such content is already surfaced as part of the associated control's announcement.
// Interactive descendants (links, buttons, etc.) are allowed through.
{
const labelFor = elem.closest("label[for]") as HTMLElement | null;
const labelForTarget = labelFor && labelFor.getAttribute("for");
if (
labelFor
&& labelForTarget
&& document.getElementById(labelForTarget)
&& document.getElementById(labelForTarget).getAttribute("type") !== "hidden"
&& !elem.closest("a[href], [role='link'], button, [role='button']")
) {
return retVal = { skipCurrent: true, skipChildren: nodeType === 1 };
}
}

const role = cursorStart.getRole();

// If we have presentational children, read the element, skip the children
Expand Down Expand Up @@ -349,14 +368,33 @@ export namespace SRNavigator {
if (nodeType === 3) return VisUtil.isNodeHiddenFromAT(elem) ? { skipCurrent: true, skipChildren: false } : null;
// We have an elemenet
if (VisUtil.isNodeHiddenFromAT(elem)) return { skipCurrent: true, skipChildren: true };
// Skip label fors - they'll be read with the related input
// Skip label fors - they'll be read with the related input.
// Keep children so interactive content (e.g. links) inside the label still appears in
// reading/tab order.
if (
elem.nodeName.toUpperCase() === "LABEL"
&& elem.hasAttribute("for")
elem.nodeName.toUpperCase() === "LABEL"
&& elem.hasAttribute("for")
&& document.getElementById(elem.getAttribute("for"))
&& document.getElementById(elem.getAttribute("for")).getAttribute("type") !== "hidden"
) {
return { skipCurrent: true, skipChildren: true };
return { skipCurrent: true, skipChildren: false };
}

// Skip non-interactive content that is a descendant of a for-linked label.
// Such content is already surfaced as part of the associated control's announcement.
// Interactive descendants (links, buttons, etc.) are allowed through.
{
const labelFor = elem.closest("label[for]") as HTMLElement | null;
const labelForTarget = labelFor && labelFor.getAttribute("for");
if (
labelFor
&& labelForTarget
&& document.getElementById(labelForTarget)
&& document.getElementById(labelForTarget).getAttribute("type") !== "hidden"
&& !elem.closest("a[href], [role='link'], button, [role='button']")
) {
return { skipCurrent: true, skipChildren: nodeType === 1 };
}
}

const role = cursor.getRole();
Expand Down
29 changes: 29 additions & 0 deletions accessibility-checker-engine/test/v4/simulator/Link_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,4 +330,33 @@ describe('Link Component Screen Reader Tests', function() {
]);
});
});

describe("Link Within Label", function() {

it("Should render checkbox with aria-label and a linked label containing a link and aria-hidden spans", function() {
let fixture = `<div id='fixture'>
<h2>Regular order</h2>
<div>
<input type="checkbox" id="terms" name="terms" required aria-label="I have read and accept the terms and conditions."/>
<label id="chkLabel" for="terms">
<span aria-hidden="true">I have read and accept the </span>
<a href="#" target="_blank">terms and conditions</a>
<span aria-hidden="true">.</span>
</label>
</div>
</div>`;
document.body.insertAdjacentHTML('afterbegin', fixture);

let result = trimItems(ace.SRController.renderStructure(document));

expect(result).withContext(JSON.stringify(result, null, 2)).toEqual([
{ "region": "", "heading": "", "item": "[Start of document]", "tab_focus": "", "image": "", "selector": "body" },
{ "region": "", "heading": `["Regular order", heading level 2]`, "item": `[heading level 2] Regular order`, "tab_focus": "", "image": "", "selector": "#fixture > h2" },
{ "region": "", "heading": "", "item": `[checkbox, not checked, required, "I have read and accept the terms and conditions."]`, "tab_focus": "", "image": "", "selector": "#fixture > div" },
{ "region": "", "heading": "", "item": "", "tab_focus": `[checkbox, not checked, required, "I have read and accept the terms and conditions."]`, "image": "", "selector": "#terms" },
{ "region": "", "heading": "", "item": "[same page link] terms and conditions", "tab_focus": "terms and conditions [same page link]", "image": "", "selector": `#chkLabel > a` },
{ "region": "", "heading": "", "item": "[End of document]", "tab_focus": "", "image": "" }
]);
});
});
});
Loading