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 { const lockProps: Record = { "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" >
when key backup is disabled 1`] = ` class="mx_KeyBackupFailedDialog mx_Dialog_fixedWidth" data-focus-lock-disabled="false" role="dialog" + tabindex="-1" >
when key backup is enabled 1`] = ` class="mx_KeyBackupFailedDialog mx_Dialog_fixedWidth" data-focus-lock-disabled="false" role="dialog" + tabindex="-1" >
with an existing session onAction() room actions leave_r class="mx_QuestionDialog mx_Dialog_fixedWidth" data-focus-lock-disabled="false" role="dialog" + tabindex="-1" >
with an existing session onAction() room actions leave_r class="mx_QuestionDialog mx_Dialog_fixedWidth" data-focus-lock-disabled="false" role="dialog" + tabindex="-1" >
{ it("calls onFinished when Escape is pressed", async () => { const onFinished = jest.fn(); - render(); + const { container } = render(); + // 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[` 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" >