What am I doing wrong in my theme that's breaking CAPTCHA?

Question

I have a bug in my CAPTCHA implementation. When I click the "Get new captcha!" link, it does not refresh the image CAPTCHA.

After a ton of research in issue queues, testing and breaking my local, and finding everything that was NOT causing it I finally turned off my custom theme and lo, the "Get new captcha!" link works again.

My custom theme is built on USWDS Base theme.

• not using a CDN

I'm using:

• Drupal 9.0.11
• CAPTCHA and Image CAPTCHA 8.x-1.1
• USWDS Base Theme 8.x-2-4

No errors are produced in the log or in the console. I "feel" like it might be something related Ajax, but I can't figure out how to sniff it out or narrow it down.

Can anyone give me suggestions for settings I can test and change or specific places in code I might check to try to fix this? Thank you.

Update: I just tried using straight USWDS Base theme, no custom theme, and CAPTCHA bug is still there. So not my custom theme, but my contrib base theme.

Answer 1

I found the conflicting template inside USWDS base theme. For anyone else having this problem, you must alter this template:

/themes/contrib/uswds_base/templates/form/details.html.twig

You can either wholesale replace with the same template from Bartik's classy template (or similar), or else custom rewrite it using the working template from Bartik and customizing it to what you need. I needed to rip out the ul/li based markup that USWDS imposed, but still keep the classes and accessibility markup.

In case it helps anyone else, here's what I ended up using:

<div{{ attributes.addClass('usa-accordion usa-accordion--bordered') }}>
  {%- if title -%}
    {%
      set summary_classes = [
        required ? 'js-form-required',
        required ? 'form-required',
      'usa-accordion__button',
      ]
    %}

    <button type="button" aria-expanded="true" aria-controls="{{ attributes.id }}-content"{{ summary_attributes.addClass(summary_classes) }}>{{ title }}</button>
  {%- endif -%}
  <div id="{{ attributes.id }}-content" class="usa-accordion__content usa-prose"
>
    {% if errors %}
      <div class="form-item--error-message">
        <strong>{{ errors }}</strong>
      </div>
    {% endif %}
    {%- if description -%}
      <div class="details-description">{{ description }}</div>
    {%- endif -%}
    {%- if children -%}
      {{ children }}
    {%- endif -%}
    {%- if value -%}
      {{ value }}
    {%- endif -%}
  </div>
</div>