Where: profiler.html:169-181.
The gap: <section id="dropzone" tabindex="0" role="button" aria-label="..."> contains a real <button id="sampleBtn">Try it with a sample dataset</button> as a descendant. Nesting an interactive element inside another interactive/ARIA-button element violates the HTML content model and WAI-ARIA's "interactive elements must not be nested" guidance - it produces inconsistent behavior across screen readers/assistive tech, which may not expose or may mis-announce the inner button as part of the outer "button".
Repro:
$ grep -n 'role="button"' profiler.html
169: <section class="dropzone" id="dropzone" tabindex="0" role="button"
Inspecting the subtree shows <button id="sampleBtn"> genuinely nested inside. The code itself shows awareness of the resulting fragility: profiler-ui.js's dropzone keydown handler has to special-case keydowns bubbling up from the sample button (so Enter/Space on the inner button doesn't also re-trigger the outer file picker), and the sample button's click handler needs e.stopPropagation() for the same reason.
Why it matters: a genuinely double-interactive element is exactly the kind of structural accessibility issue this repo has already fixed once for a different page (#424's skipped heading levels) - here it's a nesting violation rather than a heading-level skip, but the same WCAG-conformance concern applies.
Suggested fix: move #sampleBtn outside the role="button" dropzone element (visually adjacent, e.g. below it), or drop role="button"/tabindex="0" from the container and make only the "browse" text itself an actual <button>/<label>.
Where:
profiler.html:169-181.The gap:
<section id="dropzone" tabindex="0" role="button" aria-label="...">contains a real<button id="sampleBtn">Try it with a sample dataset</button>as a descendant. Nesting an interactive element inside another interactive/ARIA-button element violates the HTML content model and WAI-ARIA's "interactive elements must not be nested" guidance - it produces inconsistent behavior across screen readers/assistive tech, which may not expose or may mis-announce the inner button as part of the outer "button".Repro:
Inspecting the subtree shows
<button id="sampleBtn">genuinely nested inside. The code itself shows awareness of the resulting fragility:profiler-ui.js's dropzone keydown handler has to special-case keydowns bubbling up from the sample button (so Enter/Space on the inner button doesn't also re-trigger the outer file picker), and the sample button's click handler needse.stopPropagation()for the same reason.Why it matters: a genuinely double-interactive element is exactly the kind of structural accessibility issue this repo has already fixed once for a different page (#424's skipped heading levels) - here it's a nesting violation rather than a heading-level skip, but the same WCAG-conformance concern applies.
Suggested fix: move
#sampleBtnoutside therole="button"dropzone element (visually adjacent, e.g. below it), or droprole="button"/tabindex="0"from the container and make only the "browse" text itself an actual<button>/<label>.