From 87b4918d34f795d9952e4454b936af791e5a2264 Mon Sep 17 00:00:00 2001
From: David Langley <langley.dave@gmail.com>
Date: Wed, 27 Aug 2025 13:41:39 +0100
Subject: [PATCH] Make BaseDialog's div keyboard focusable and fix test.
 (#30631)

* Make BaseDialog's div keyboard focusable and fix test.

* Less weird test

* Update snapshots

* More snapshots
---
 src/components/views/dialogs/BaseDialog.tsx                | 3 +++
 test/unit-tests/__snapshots__/Terms-test.tsx.snap          | 1 +
 .../__snapshots__/NewRecoveryMethodDialog-test.tsx.snap    | 2 ++
 .../structures/__snapshots__/MatrixChat-test.tsx.snap      | 2 ++
 .../components/views/dialogs/BaseDialog-test.tsx           | 7 ++++++-
 .../dialogs/__snapshots__/ChangelogDialog-test.tsx.snap    | 1 +
 .../__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap  | 1 +
 .../__snapshots__/ConfirmUserActionDialog-test.tsx.snap    | 1 +
 .../dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap     | 1 +
 .../views/dialogs/__snapshots__/ExportDialog-test.tsx.snap | 1 +
 .../dialogs/__snapshots__/FeedbackDialog-test.tsx.snap     | 1 +
 .../views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap | 3 +++
 .../ManageRestrictedJoinRuleDialog-test.tsx.snap           | 2 ++
 .../ManualDeviceKeyVerificationDialog-test.tsx.snap        | 1 +
 .../__snapshots__/MessageEditHistoryDialog-test.tsx.snap   | 2 ++
 .../dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap   | 1 +
 .../dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap | 1 +
 .../views/dialogs/__snapshots__/ShareDialog-test.tsx.snap  | 6 ++++++
 .../dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap     | 1 +
 .../__snapshots__/UntrustedDeviceDialog-test.tsx.snap      | 2 ++
 .../__snapshots__/CreateSecretStorageDialog-test.tsx.snap  | 3 +++
 .../__snapshots__/ExportE2eKeysDialog-test.tsx.snap        | 1 +
 .../__snapshots__/ImportE2eKeysDialog-test.tsx.snap        | 1 +
 .../__snapshots__/RestoreKeyBackupDialog-test.tsx.snap     | 7 +++++++
 .../__snapshots__/SecurityRoomSettingsTab-test.tsx.snap    | 2 ++
 .../__snapshots__/AddExistingToSpaceDialog-test.tsx.snap   | 1 +
 26 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
index 56f6d0c528..a946a44e91 100644
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -145,6 +145,9 @@ export default class BaseDialog extends React.Component<IProps> {
         const lockProps: Record<string, any> = {
             "onKeyDown": this.onKeyDown,
             "role": "dialog",
+            // Allow the dialog to be keyboard focusable
+            // So the escape key handling works in more cases (say you select the header)
+            "tabIndex": -1,
             // This should point to a node describing the dialog.
             // If we were about to completely follow this recommendation we'd need to
             // make all the components relying on BaseDialog to be aware of it.
diff --git a/test/unit-tests/__snapshots__/Terms-test.tsx.snap b/test/unit-tests/__snapshots__/Terms-test.tsx.snap
index a35963cd51..7bd269d3ea 100644
--- a/test/unit-tests/__snapshots__/Terms-test.tsx.snap
+++ b/test/unit-tests/__snapshots__/Terms-test.tsx.snap
@@ -7,6 +7,7 @@ exports[`dialogTermsInteractionCallback should render a dialog with the expected
   class=""
   data-focus-lock-disabled="false"
   role="dialog"
+  tabindex="-1"
 >
   <div
     class="mx_Dialog_header"
diff --git a/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap b/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
index 08b5ee18d3..0c38ed2a19 100644
--- a/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
+++ b/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
     class="mx_KeyBackupFailedDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -83,6 +84,7 @@ exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
     class="mx_KeyBackupFailedDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
index 1bdbe016d4..7eee28dbb8 100644
--- a/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -388,6 +388,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
   class="mx_QuestionDialog mx_Dialog_fixedWidth"
   data-focus-lock-disabled="false"
   role="dialog"
+  tabindex="-1"
 >
   <div
     class="mx_Dialog_header"
@@ -444,6 +445,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
   class="mx_QuestionDialog mx_Dialog_fixedWidth"
   data-focus-lock-disabled="false"
   role="dialog"
+  tabindex="-1"
 >
   <div
     class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx b/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
index e8737fe88d..41a396c5b6 100644
--- a/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
@@ -14,7 +14,12 @@ import BaseDialog from "../../../../../src/components/views/dialogs/BaseDialog.t
 describe("BaseDialog", () => {
     it("calls onFinished when Escape is pressed", async () => {
         const onFinished = jest.fn();
-        render(<BaseDialog onFinished={onFinished} />);
+        const { container } = render(<BaseDialog onFinished={onFinished} />);
+        // Autolock's autofocus in the empty dialog is focusing on the close button and bringing up the tooltip
+        // So we either need to call escape twice(one for the tooltip and one for the dialog) or focus
+        // on the dialog first.
+        const dialog = container.querySelector('[role="dialog"]') as HTMLElement;
+        dialog?.focus();
         await userEvent.keyboard("{Escape}");
         expect(onFinished).toHaveBeenCalled();
     });
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
index b38ccbc804..2801837059 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
     class="mx_QuestionDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
index c2ca9a5680..d6adf24458 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
     class="mx_DeclineAndBlockInviteDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index d48b62c57d..16a59ed877 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
     class="mx_ConfirmUserActionDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 2342bab71d..a2012c05c1 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     class="mx_QuestionDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index bb11ed96b2..f2d22a98ef 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -7,6 +7,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
   class="mx_ExportDialog false mx_Dialog_fixedWidth"
   data-focus-lock-disabled="false"
   role="dialog"
+  tabindex="-1"
 >
   <div
     class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
index 7b756db64d..61baf5ab39 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`FeedbackDialog should respect feedback config 1`] = `
     class="mx_QuestionDialog mx_FeedbackDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
index 31d5a09a4f..3330c46b88 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is a backup on the
     class="mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -100,6 +101,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is no backup on th
     class="mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -187,6 +189,7 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
     class="mx_QuestionDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 627cd1087a..20664312a8 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
     class="mx_ManageRestrictedJoinRuleDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -189,6 +190,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
     class="mx_ManageRestrictedJoinRuleDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
index 75c2870126..b2553de4d3 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ManualDeviceKeyVerificationDialog should render correctly 1`] = `
     class="mx_QuestionDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index 5f926ff703..e85a9a84a3 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
     class="mx_MessageEditHistoryDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -128,6 +129,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
     class="mx_MessageEditHistoryDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
index ec84104044..d0f67b023b 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
     class="mx_ReportRoomDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
index 633dd34fe0..ac9b7446a7 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
     class="mx_ServerPickerDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
index 12760c8ca4..385bc4394f 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ShareDialog should not render the QR code if disabled 1`] = `
     class="mx_ShareDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -143,6 +144,7 @@ exports[`ShareDialog should not render the socials if disabled 1`] = `
     class="mx_ShareDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -229,6 +231,7 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
     class="mx_ShareDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -402,6 +405,7 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
     class="mx_ShareDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -574,6 +578,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
     class="mx_ShareDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -719,6 +724,7 @@ exports[`ShareDialog should render a share dialog for an URL 1`] = `
     class="mx_ShareDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap
index 93aa25f399..856a84202e 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
     class="mx_UnpinAllDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
index e4f8cc2c52..3034937f97 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
     class="mx_UntrustedDeviceDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -91,6 +92,7 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of t
     class="mx_UntrustedDeviceDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
index 39573190e0..daf7ca8ade 100644
--- a/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`CreateSecretStorageDialog handles the happy path 1`] = `
     class="mx_CreateSecretStorageDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -140,6 +141,7 @@ exports[`CreateSecretStorageDialog handles the happy path 2`] = `
     class="mx_CreateSecretStorageDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -231,6 +233,7 @@ exports[`CreateSecretStorageDialog when there is an error fetching the backup ve
     class="mx_CreateSecretStorageDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
index 3ca6e6ee02..45e34b0abf 100644
--- a/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`ExportE2eKeysDialog renders 1`] = `
     class="mx_exportE2eKeysDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
index 6b8b1a8285..5a7aa67918 100644
--- a/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`ImportE2eKeysDialog renders 1`] = `
     class="mx_importE2eKeysDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
index 3b5809dddf..2224986529 100644
--- a/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<RestoreKeyBackupDialog /> should display an error when recovery key is
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -112,6 +113,7 @@ exports[`<RestoreKeyBackupDialog /> should not raise an error when recovery is v
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -211,6 +213,7 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -309,6 +312,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when Recovery key
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -374,6 +378,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when passphrase is
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -439,6 +444,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is ca
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
@@ -504,6 +510,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in
     class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
index a4579bc970..6556debd05 100644
--- a/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
@@ -117,6 +117,7 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
   class="mx_ErrorDialog mx_Dialog_fixedWidth"
   data-focus-lock-disabled="false"
   role="dialog"
+  tabindex="-1"
 >
   <div
     class="mx_Dialog_header"
@@ -159,6 +160,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
   class="mx_QuestionDialog mx_Dialog_fixedWidth"
   data-focus-lock-disabled="false"
   role="dialog"
+  tabindex="-1"
 >
   <div
     class="mx_Dialog_header"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index c3d3134e68..433e3c98ef 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -13,6 +13,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
     class="mx_AddExistingToSpaceDialog"
     data-focus-lock-disabled="false"
     role="dialog"
+    tabindex="-1"
   >
     <div
       class="mx_Dialog_header"