Accessibility issue on Cookie Policy: focusable control placed inside

Dear Complianz team,

I checked existing posts in this forum, but did not find the issue addressed yet.

We’re seeing an accessibility error on the generated Cookie Policy document. The checker (Eye-Able) reports: “Element has hidden focusable child elements.” The issue appears to be caused by a focusable checkbox rendered inside the clickable <summary> heading of each cookie category.

Environment (high level):
– WordPress with GeneratePress (Pro) and WPML
– Complianz (Cookie Policy document generated by the plugin)
– Issue occurs on the Cookie Policy page only (banner works as expected)

Problematic markup (excerpt):

<summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Statistics</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-statistics-optin" data-category="cmplz_statistics" class="cmplz-consent-checkbox cmplz-statistics" value="1"> <label class="cmplz-label" for="cmplz-statistics-optin"><span class="screen-reader-text">Statistics</span></label> </span> <span class="cmplz-icon cmplz-open">…</span> </span> </summary>

Why this is problematic
Placing an interactive, focusable control (the checkbox) inside the interactive disclosure control (<summary>) can create keyboard/focus issues and triggers the “hidden focusable child” finding. Screen readers and keyboard users can encounter unexpected focus order or double activation areas. This pattern is generally discouraged for <details>/<summary>.

WCAG reference
We believe this violates WCAG 2.1 — Success Criterion 4.1.2 (Name, Role, Value), because the nested interactive control inside <summary> makes the component roles and states ambiguous for assistive technologies. Reference: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1&showtechniques=412#name-role-value

Expected behaviour
The disclosure header (<summary>) should not contain focusable children. The category checkbox should be rendered outside the <summary> (e.g., as a sibling immediately after it within the same <details> container) and positioned visually via CSS if needed.

Steps to reproduce

1. Open the Complianz-generated Cookie Policy page.
2. Run an accessibility checker (e.g., Eye-Able).
3. The tool flags the <summary> that contains the consent checkbox.

Request
Could you adjust the Cookie Policy template so that category consent checkboxes are rendered outside the <summary> element (e.g., directly after it within the same <details> block), preserving the current visual layout via CSS? This should eliminate the finding and improve keyboard/screen-reader behaviour without site-specific workarounds.

Many thanks!

Disclosure: I used ChatGPT to help me write this text since I’m not a native English speaker and wanted to make sure te correct terminology was used

The page I need help with: [log in to see the link]