avoid usage of disabled class in expanding formset & update button usage

- remove check for disabled class on expanding formset - InlinePanel uses disabled attribute
- remove existing potentially disabled expanding formset usage of links instead of buttons

CHANGELOG.txt

@@ -20,6 +20,7 @@ Changelog
  * Unify the styling of delete/destructive button styles across the admin interface (Paarth Agarwal)
  * Adopt new designs and unify the styling styles for `.button-secondary` buttons across the admin interface (Paarth Agarwal)
  * Refine designs for disabled buttons throughout the admin interface (Paarth Agarwal)
+ * Update expanding formset add buttons to use `button` not link for behaviour (LB (Ben) Johnston)
  * Fix: Prevent `PageQuerySet.not_public` from returning all pages when no page restrictions exist (Mehrdad Moradizadeh)
  * Fix: Ensure that duplicate block ids are unique when duplicating stream blocks in the page editor (Joshua Munn)
  * Fix: Revise colour usage so that privacy & locked indicators can be seen in Windows High Contrast mode (LB (Ben Johnston))

client/src/entrypoints/admin/expanding-formset.js

@@ -21,9 +21,7 @@ function buildExpandingFormset(prefix, opts = {}) {
     emptyFormTemplate = emptyFormTemplate.textContent;
   }
 
-  // eslint-disable-next-line consistent-return
   addButton.on('click', () => {
-    if (addButton.hasClass('disabled')) return false;
     const newFormHtml = emptyFormTemplate
       .replace(/__prefix__(.*?['"])/g, formCount + '$1')
       .replace(/<-(-*)\/script>/g, '<$1/script>');

client/src/entrypoints/admin/expanding-formset.test.js

@@ -106,7 +106,7 @@ describe('buildExpandingFormset', () => {
         `,
         )}
       </ul>
-      <button class="button disabled" id="${prefix}-ADD" type="button">
+      <button class="button" id="${prefix}-ADD" type="button" disabled>
         Add form fields (DISABLED)
       </button>
       <script type="text/django-form-template" id="${prefix}-EMPTY_FORM_TEMPLATE">
@@ -137,9 +137,7 @@ describe('buildExpandingFormset', () => {
     expect(onInit).toHaveBeenNthCalledWith(2, 1);
 
     // click the 'add' button
-    document
-      .getElementById(`${prefix}-ADD`)
-      .dispatchEvent(new MouseEvent('click'));
+    document.getElementById(`${prefix}-ADD`).click();
 
     // check that no template was generated and additional onInit / onAdd not called
     expect(onAdd).not.toHaveBeenCalled();

docs/releases/4.1.md

@@ -29,6 +29,7 @@ Wagtail 4.1 is designated a Long Term Support (LTS) release. Long Term Support r
  * Unify the styling of delete/destructive button styles across the admin interface (Paarth Agarwal)
  * Adopt new designs and unify the styling styles for `.button-secondary` buttons across the admin interface (Paarth Agarwal)
  * Refine designs for disabled buttons throughout the admin interface (Paarth Agarwal)
+ * Update expanding formset add buttons to use `button` not link for behaviour and remove support for disabled as a class (LB (Ben) Johnston)
 
 ### Bug fixes
 
@@ -49,6 +50,8 @@ If using the hook `register_user_listing_buttons` to register buttons along with
 
 Avoid using `disabled` as a class on `button` elements, instead use the [`disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) as support for this as a class may be removed in a future version of Wagtail and is not accessible.
 
+If using custom `expanding-formset` the add button will no longer support the `disabled` class but instead must require the `disabled` attribute to be set.
+
 The following button classes have been removed, none of which were being used within the admin but may have been used by custom code or packages:
 
 * `button-neutral`

wagtail/admin/templates/wagtailadmin/permissions/includes/collection_member_permissions_formset.html

@@ -54,7 +54,7 @@
     </script>
 
     <p class="add">
-        <a class="button bicolor button--icon" id="id_{{ formset.prefix }}-ADD" value="Add">{% icon name="plus" wrapped=1 %}{% block add_button_label %}{% endblock %}</a>
+        <button class="button bicolor button--icon" id="id_{{ formset.prefix }}-ADD" value="Add" type="button">{% icon name="plus" wrapped=1 %}{% block add_button_label %}{% endblock %}</button>
     </p>
 
     <script>

wagtail/admin/templates/wagtailadmin/workflows/includes/workflow_pages_formset.html

@@ -48,7 +48,7 @@
 </script>
 
 <p class="add">
-    <a class="button bicolor icon icon-plus" id="id_{{ formset.prefix }}-ADD" value="Add">{% trans "Assign to another page" %}</a>
+    <button class="button bicolor icon icon-plus" id="id_{{ formset.prefix }}-ADD" value="Add" type="button">{% trans "Assign to another page" %}</button>
 </p>
 
 

wagtail/users/templates/wagtailusers/groups/includes/page_permissions_formset.html

@@ -53,7 +53,7 @@
     </script>
 
     <p class="add">
-        <a class="button bicolor button--icon" id="id_{{ formset.prefix }}-ADD" value="Add">{% icon name="plus" wrapped=1 %}{% trans "Add a page permission" %}</a>
+        <button class="button bicolor button--icon" id="id_{{ formset.prefix }}-ADD" value="Add" type="button">{% icon name="plus" wrapped=1 %}{% trans "Add a page permission" %}</button>
     </p>
 
 {% endpanel %}