diff --git a/client/src/controllers/DialogController.ts b/client/src/controllers/DialogController.ts index a60d10369f..e73c6085f7 100644 --- a/client/src/controllers/DialogController.ts +++ b/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 }; diff --git a/client/src/controllers/SessionController.test.js b/client/src/controllers/SessionController.test.js index e37cb55ecf..c05c78a3b6 100644 --- a/client/src/controllers/SessionController.test.js +++ b/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'); + }); }); }); diff --git a/client/src/controllers/SessionController.ts b/client/src/controllers/SessionController.ts index 3e50a6e047..16685ea918 100644 --- a/client/src/controllers/SessionController.ts +++ b/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(); } diff --git a/wagtail/admin/templates/wagtailadmin/shared/editing_sessions/module.html b/wagtail/admin/templates/wagtailadmin/shared/editing_sessions/module.html index 36dbe81659..f4c1663626 100644 --- a/wagtail/admin/templates/wagtailadmin/shared/editing_sessions/module.html +++ b/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 %}