Confirmation Modal Fails to Display on Form Submission With this Custom Template

Problem/Motivation

I picked up an issue on a client's website during development. After adding a couple of webforms to the site, I noticed that the confirmation modal did not work for all but one of the forms.

All of the affected forms were being overridden by custom webform-submission-form--[form-name].html.twig templates, where the {{ form }} token was commented out and individual fields were rendered in a custom layout instead.

My first thought was that I must be missing a token related to the confirmation message, but I searched far and wide, debugged the form array, but no luck.

Either there is something very clearly missed and I cannot see, or this is a bona fide bug and needs an extra pair of eyes on it.

Below is a step-by-step guide to reproduce the issue.

Steps to reproduce

1) Install latest Drupal (composer create-project drupal/recommended-project:10.1.6 "install-dir")

2) Install Bootstrap Barrio 5 Theme (composer require 'drupal/bootstrap_barrio:^5.5')

3) Enable Bootstrap Barrio 5 Theme and enable and set the Bootstrap Barrio Subtheme as default

4) Install Webform (composer require 'drupal/webform:^6.2')

5) Enable Webform and Webform UI

6) Navigate to /admin/structure/webform and edit the default contact form that ships with webform and do the following:
a) Go to Settings > General and tick the Use Ajax checkbox and click save
b) Go to Settings > Confirmation and select Modal as the confirmation type and click save

7) Navigate to /web/modules/contrib/webform/templates and copy webform-submission-form.html.twig

8) Navigate to /web/themes/contrib/bootstrap_barrio/subtheme/templates and paste webform-submission-form.html.twig

9) Rename webform-submission.html.twig to webform-submission-form--contact.html.twig

10) Edit webform-submission-form--contact.html.twig and do the following:
a) Comment out {{ form }}
b) Add the following code and save the file:

<div class="row">
    <div class="col-md-6">
        {{ form.elements.name }}
    </div>
    <div class="col-md-6">
        {{ form.elements.email }}
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        {{  form.elements.subject }}
    </div>
    <div class="col-md-6">
        {{  form.elements.message }}
    </div>
</div>

{{ form.elements.actions }}
{{ form.form_build_id }}
{{ form.form_token }}
{{ form.form_id }}

11) Flush cache

12) Navigate to /webform/contact/test in the browser and click the submit button

13) The confirmation modal will fail to display

14) Navigate to /web/themes/contrib/bootstrap_barrio/subtheme/templates and edit webform-submission-form--contact.html.twig with the following:
a) Uncomment {{ form }} and comment out everything we added in step 10b above. Save the file

15) Flush cache

16) Navigate to /webform/contact/test in the browser and click the submit button once again

17) The confirmation modal works