Where: course home outline (${APPS}/learning/course/{course_key}/home), the
six collapsible section headers.
Finding: axe nested-interactive (serious, WCAG 2.2 AA) fails on all six:
target: li:nth-child(1) > .pgn_collapsible > .collapsible-trigger[role="button"]
html: <div class="collapsible-trigger" role="button" tabindex="0" aria-expanded="false">
why: Element has focusable descendants
A role="button" element is announced as a single control, so a screen-reader or
keyboard user is told "button" and then meets focusable content inside it that the
role does not account for — the inner controls are not reliably reachable, and the
outer control's purpose is ambiguous.
Suggested fix: make the header's clickable area a real <button> containing
only its label, with the section's links and controls as siblings rather than
descendants as Paragon does.
Where: course home outline (
${APPS}/learning/course/{course_key}/home), thesix collapsible section headers.
Finding: axe
nested-interactive(serious, WCAG 2.2 AA) fails on all six:A
role="button"element is announced as a single control, so a screen-reader orkeyboard user is told "button" and then meets focusable content inside it that the
role does not account for — the inner controls are not reliably reachable, and the
outer control's purpose is ambiguous.
Suggested fix: make the header's clickable area a real
<button>containingonly its label, with the section's links and controls as siblings rather than
descendants as Paragon does.