Fix backup reminder shortcuts

src/entries/popup/components/BackupReminder/BackupReminder.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { i18n } from '~/core/languages';
+import { shortcuts } from '~/core/references/shortcuts';
 import {
  Box,
  Button,
@@ -13,6 +14,7 @@ import {
 } from '~/design-system';
 import { BottomSheet } from '~/design-system/components/BottomSheet/BottomSheet';
 
+import { useKeyboardShortcut } from '../../hooks/useKeyboardShortcut';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
 import { useWalletBackups } from '../../hooks/useWalletBackups';
 import { ROUTES } from '../../urls';
@@ -23,13 +25,22 @@ export const BackupReminder = () => {
  const { showWalletBackupReminder, closeBackupReminder } = useWalletBackups();
  const navigate = useRainbowNavigate();
 
+ useKeyboardShortcut({
+ handler: (e: KeyboardEvent) => {
+ if (e.key === shortcuts.global.CLOSE.key) {
+ e.preventDefault();
+ closeBackupReminder();
+ }
+ },
+ });
+
  return (
  <BottomSheet
  show={showWalletBackupReminder}
  zIndex={zIndexes.APP_CONNECTION_WALLET_SWITCHER}
  onClickOutside={closeBackupReminder}
  >
- <Box id="wallet-backup-reminder-sheet">
+ <Box id="wallet-backup-reminder-sheet" isExplainerSheet>
  <Navbar
  leftComponent={
  <Navbar.CloseButton
@@ -90,6 +101,7 @@ export const BackupReminder = () => {
  },
  });
  }}
+ tabIndex={0}
  >
  <Text align="center" color="label" size="16pt" weight="heavy">
  {i18n.t('wallet_backup_reminder.button_label_action')}
@@ -102,6 +114,7 @@ export const BackupReminder = () => {
  height="44px"
  variant="tinted"
  onClick={closeBackupReminder}
+ tabIndex={0}
  >
  <Text
  align="center"

src/entries/popup/components/ExplainerSheet/ExplainerSheet.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
+import { shortcuts } from '~/core/references/shortcuts';
 import { goToNewTab } from '~/core/utils/tabs';
 import {
  Box,
@@ -18,6 +19,7 @@ import { TextLink } from '~/design-system/components/TextLink/TextLink';
 import { TextStyles } from '~/design-system/styles/core.css';
 import { ButtonVariant } from '~/design-system/styles/designTokens';
 
+import { useKeyboardShortcut } from '../../hooks/useKeyboardShortcut';
 import { zIndexes } from '../../utils/zIndexes';
 
 export interface ExplainerSheetProps {
@@ -111,6 +113,14 @@ export const ExplainerSheet = ({
  testId,
  onClickOutside,
 }: ExplainerSheetProps) => {
+ useKeyboardShortcut({
+ handler: (e: KeyboardEvent) => {
+ if (e.key === shortcuts.global.CLOSE.key) {
+ onClickOutside?.();
+ }
+ },
+ });
+
  const goToLink = useCallback((link?: string) => {
  link &&
  goToNewTab({

src/entries/popup/hooks/useHomeShortcuts.ts

@@ -22,6 +22,7 @@ import { ROUTES } from '../urls';
 import {
  appConnectionMenuIsActive,
  appConnectionSwitchWalletsPromptIsActive,
+ getExplainerSheet,
  getInputIsFocused,
 } from '../utils/activeElement';
 import {
@@ -104,7 +105,9 @@ export function useHomeShortcuts() {
  const activeAppWalletSwitcher =
  appConnectionSwitchWalletsPromptIsActive();
  const inputIsFocused = getInputIsFocused();
+ const isExplainerSheet = getExplainerSheet();
  if (inputIsFocused) return;
+ if (isExplainerSheet) return;
  switch (e.key) {
  case shortcuts.home.BUY.key:
  trackShortcut({