Fix glitches when closing various modal dialogs

[techanvil]

Feature Description

There are a number of glitches evident that occur when closing various Site Kit modal dialogs.

Note that a dialog can be closed via the Cancel button, or clicking outside the dialog/pressing the Escape key.

When a dialog is closed, it should restore focus to the previously focused element. However, some dialogs are not restoring the focus when closing it via one or more of the above closing mechanisms. Additionally, the button that opens the dialog is being broken in some cases.

To illustrate, here's a mostly well-behaved dialog. As can be seen the Dashboard Sharing dialog restores focus to the button that opens it when closing via the Cancel button, when clicking outside the dialog, and when pressing Escape. Clicking the button to open it again works as expected. The only minor glitch evident here is the tooltip on the button is a bit inconsistent and only pops up on refocusing in the case where the dialog is closed via Escape.

https://github.com/user-attachments/assets/4f79a61b-da85-4823-86bb-126da1933849

Here's a less well-behaved dialog. The Consent Mode dialog does restore focus to the Enable consent mode switch when closing by clicking outside the dialog or pressing Escape. However, it doesn't restore focus when closing by pressing Cancel. Furthermore, it actually breaks the switch when closing by clicking outside the dialog or pressing Escape.

https://github.com/user-attachments/assets/4b045002-f94d-423f-901d-4a0258eabda3

It turns out that all of our dialogs have one or more glitches that need addressing.

• Additional Permissions Required
  • This is the generic dialog that pops up when the user doesn't have permission to do something. As can be seen on the Tag Manager settings screen when trying to create a container, this dialog:
  • Does not restore focus when pressing Cancel or when clicking outside/pressing Escape.
  • Breaks the Complete setup button when clicking outside/pressing Escape.
  • See assets/js/components/Permissionsdialog/AuthenticatedPermissionsdialog.js.
• Disconnect
  • The dialog triggered by the Disconnect button present in the User Menu on the dashboard.
  • Breaks the Disconnect button when clicking outside.
  • See assets/js/components/UserMenu/index.js.
• Disconnect {module} from Site Kit?
  • The dialog triggered by the Disconnect {module} from Site Kit button on the Settings edit view for a module.
  • Does not restore focus when pressing Cancel or pressing Escape.
  • Breaks the Disconnect {module} from Site Kit button when clicking outside (the button needs to be pressed twice to work).
  • See assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.js
• Reset Site Kit
  • The dialog triggered by the Reset Site Kit button present in Settings > Admin Settings > Plugin Status, and on the splash screen that appears when a user disconnects Site Kit.
  • Breaks the Reset Site Kit button when clicking outside.
  • See assets/js/components/ResetButton.js.
• Disable consent mode?
  • The dialog that appears when toggling Consent Mode off in Settings > Admin Settings > Consent Mode.
  • Does not restore focus when pressing Cancel or when clicking outside/pressing Escape.
  • Breaks the Enable consent mode switch when clicking outside/pressing Escape.
  • See assets/js/components/consent-mode/ConfirmDisableConsentModeDialog.js.
• Disable enhanced conversion tracking
  • The dialog that appears when toggling enhanced conversion tracking off in the Settings edit view for the Ads module,
  • Does not restore focus when pressing Cancel or when clicking outside/pressing Escape.
  • See assets/js/components/conversion-tracking/ConfirmDisableConversionTrackingDialog.js.
• The Audiences Error Modal - Failed to set up visitor groups etc.
  • This is the dialog that appears when an error occurs while setting up the Audience Segmentation feature.
  • Doesn't restore focus when pressing Cancel.
  • See assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceErrorModal.js
• Dashboard sharing & permissions
  • The dialog triggered by the dashboard sharing button on the dashboard.
  • A minor glitch, the tooltip on the dashboard sharing button is a bit inconsistent and only pops up on refocusing in the case where the dialog is closed via Escape.
  • See assets/js/components/dashboard-sharing/DashboardSharingDialog/index.js.
• Reset Dashboard Sharing permissions
  • The dialog triggered by the Reset sharing permissions button on the Dashboard sharing & permissions dialog.
  • Does not restore focus when pressing Cancel or when clicking outside/pressing Escape.
  • Additionally, the transition is different when pressing Cancel vs clicking outside/pressing Escape. When pressing Cancel the dialog immediately changes back to the Dashboard sharing & permissions version. However, when clicking outside/pressing Escape, the dialog disappears and the Dashboard sharing & permissions is re-shown with its fade-in transition.
  • See assets/js/components/dashboard-sharing/DashboardSharingDialog/index.js.

Note that the Dashboard Sharing dialogs will be addressed via a separate issue, https://github.com/google/site-kit-wp/issues/9138, as their defects and implementation are a bit different to the other dialogs.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When a dialog is closed, it should restore focus to the previously focused element, which should continue to function normally. This applies to the following dialogs, which should be fixed as specified:
• Additional Permissions Required
  • This is the generic dialog that pops up when the user doesn't have permission to do something.
  • It should restore focus to the previous element when pressing Cancel or when clicking outside/pressing Escape to close the dialog.
  • It should not break the behaviour that triggers it.
  • A concrete example is the Tag Manager settings screen when trying to create a container, the dialog should restore focus to the Complete setup button on close, and the button should continue to work as usual.
• Disconnect
  • The dialog triggered by the Disconnect button present in the User Menu on the dashboard.
  • Should not breaks the Disconnect button when clicking outside.
• Disconnect {module} from Site Kit?
  • The dialog triggered by the Disconnect {module} from Site Kit button on the Settings edit view for a module.
  • Should restore focus to the Disconnect {module} from Site Kit button when pressing Cancel or pressing Escape.
  • Should not break the Disconnect {module} from Site Kit button when clicking outside.
• Reset Site Kit
  • The dialog triggered by the Reset Site Kit button present in Settings > Admin Settings > Plugin Status, and on the splash screen that appears when a user disconnects Site Kit.
  • Should not break the Reset Site Kit button when clicking outside.
• Disable consent mode?
  • The dialog that appears when toggling Consent Mode off in Settings > Admin Settings > Consent Mode.
  • Should restore focus when pressing Cancel or when clicking outside/pressing Escape.
  • Should not break the Enable consent mode switch when clicking outside/pressing Escape.
• Disable enhanced conversion tracking
  • The dialog that appears when toggling enhanced conversion tracking off in the Settings edit view for the Ads module,
  • Should restore focus when pressing Cancel or when clicking outside/pressing Escape.
• The Audiences Error Modal - Failed to set up visitor groups etc.
  • This is the dialog that appears when an error occurs while setting up the Audience Segmentation feature.
  • Should restore focus when pressing Cancel.

Implementation Brief

FIx for button getting broken after clicking outside the modal to close it

• [ ] Update ModalDialog component in:
  • assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js
  • Include onClose prop and pass the onCancel callback.
  • assets/js/components/UserMenu/index.js
  • Include onClose prop and pass the handleDialog callback
  • assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.js
  • Include onClose prop and pass the handleDialog callback
  • assets/js/components/ResetButton.js
  • Include onClose prop and pass the toggleDialogActive callback
  • assets/js/components/consent-mode/ConfirmDisableConsentModeDialog.js
  • Include onClose prop and pass the onCancel callback

Test Coverage

QA Brief

Changelog entry

[zutigrm]

I detected the reason for button being broken after clocking outside the Modal. But focus not getting back to the button that triggered it is pretty weird occurrence. What I tracked down is that once modal is closed, the focus is switched to the body, and only once you click anywhere on the page, focus returns to the original element that triggered the modal. Couldn't identify the reason focus in some modals goes back to the body first before returning to the button. Un-assigning myself in order not to spend too much time going down the rabbit hole, I included the first part of the fix in the IB, for the focus issue - leaving it someone else who might be more familiar with this ModalDialog component or have run into the reason for this focus shift before.