Use the submit button's label for overwrite confirmation dialog

client/src/controllers/DialogController.ts

@@ -21,13 +21,15 @@ export class DialogController extends Controller<HTMLElement> {
     theme: { default: '', type: String },
   };
 
-  static targets = ['body', 'notify'];
+  static targets = ['body', 'notify', 'confirm'];
 
   declare dialog: A11yDialog;
   declare readonly bodyTarget: HTMLElement;
   declare readonly themeValue: string;
   /** Optional targets that will be dispatched events for key dialog events. */
   declare readonly notifyTargets: HTMLElement[];
+  declare readonly hasConfirmTarget: boolean;
+  declare readonly confirmTarget: HTMLButtonElement;
 
   get eventDetail() {
     return { body: this.bodyTarget, dialog: this.dialog };

client/src/controllers/SessionController.test.js

@@ -177,7 +177,7 @@ describe('SessionController', () => {
       document.body.innerHTML = /* html */ `
         <form data-edit-form>
           <input type="text" name="title" value="Title" />
-          <button type="submit">Submit</button>
+          <button type="submit">Save draft</button>
           <button type="button" data-workflow-action-name="approve">Approve</button>
 
           <div
@@ -251,6 +251,7 @@ describe('SessionController', () => {
       expect(handleWorkflowAction).not.toHaveBeenCalled();
       expect(handleDialogShow).toHaveBeenCalled();
       expect(dialog.getAttribute('aria-hidden')).toBeNull();
+      expect(confirmButton.textContent).toEqual('Continue');
 
       confirmButton.click();
 
@@ -327,5 +328,30 @@ describe('SessionController', () => {
       expect(handleDialogShow).toHaveBeenCalledTimes(3);
       expect(dialog.getAttribute('aria-hidden')).toBeNull();
     });
+
+    it('should use the action button label as the dialog confirm target label if it has one', async () => {
+      const dialog = document.querySelector('#w-overwrite-changes-dialog');
+      const submitButton = form.querySelector('button[type="submit"]');
+      const confirmButton = document.getElementById('confirm');
+      // Mark the confirm button as DialogController's confirm target
+      confirmButton.setAttribute('data-w-dialog-target', 'confirm');
+
+      expect(dialog.getAttribute('aria-hidden')).toEqual('true');
+
+      submitButton.click();
+
+      // The confirm button should use the last clicked action button's label
+      expect(dialog.getAttribute('aria-hidden')).toBeNull();
+      expect(confirmButton.textContent).toEqual('Save draft');
+
+      confirmButton.click();
+
+      expect(dialog.getAttribute('aria-hidden')).toEqual('true');
+
+      workflowActionButton.click();
+      // The confirm button should be updated to the new action button's label
+      expect(dialog.getAttribute('aria-hidden')).toBeNull();
+      expect(confirmButton.textContent).toEqual('Approve');
+    });
   });
 });

client/src/controllers/SessionController.ts

@@ -153,6 +153,10 @@ export class SessionController extends Controller<HTMLElement> {
     // Prevent triggering other event listeners e.g. workflow actions modal
     event.stopImmediatePropagation();
 
+    if (this.wDialogOutlet.hasConfirmTarget && this.lastActionButton) {
+      this.wDialogOutlet.confirmTarget.textContent =
+        this.lastActionButton.textContent;
+    }
     this.wDialogOutlet.show();
   }
 

wagtail/admin/templates/wagtailadmin/shared/editing_sessions/module.html

@@ -17,7 +17,7 @@
 
 {% dialog id="w-overwrite-changes-dialog" dialog_root_selector='[data-edit-form]' icon_name="warning" icon_classname="w-text-critical-200" title=someone_has_saved_message|capfirst subtitle=overwrite_message|capfirst %}
     <div class="w-mt-8">
-        <button class="button" type="button" data-action="w-dialog#confirm">{% trans "Continue" %}</button>
+        <button class="button" type="button" data-w-dialog-target="confirm" data-action="w-dialog#confirm">{% trans "Continue" %}</button>
         <button class="button button-secondary" type="button" data-controller="w-action" data-action="w-action#forceReload">{% trans "Refresh the page" %}</button>
     </div>
 {% enddialog %}