Add keyboard navigation component

2 files changed, 58 insertions, 28 deletions

diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
new file mode 100644
index 0000000000..3aefd7c684
--- /dev/null
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -0,0 +1,27 @@
+import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router';
+import History from '../lib/history';
+
+interface IKeyboardNavigationProps {
+  children: React.ReactElement;
+}
+
+export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
+  const history = useHistory() as History;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        history.reset();
+      }
+    },
+    [history.reset],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  return props.children;
+}
diff --git a/gui/src/renderer/routes.tsx b/gui/src/renderer/routes.tsx
index 96a7ee4b82..37c9851daa 100644
--- a/gui/src/renderer/routes.tsx
+++ b/gui/src/renderer/routes.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Route, RouteComponentProps, Switch, withRouter } from 'react-router';
 import Launch from './components/Launch';
+import KeyboardNavigation from './components/KeyboardNavigation';
 import Focus, { IFocusHandle } from './components/Focus';
 import LinuxSplitTunnelingSettings from './components/LinuxSplitTunnelingSettings';
 import TransitionContainer, { TransitionView } from './components/TransitionContainer';
@@ -64,34 +65,36 @@ class AppRoutes extends React.Component<RouteComponentProps, IAppRoutesState> {
 
     return (
       <PlatformWindowContainer>
-        <Focus ref={this.focusRef}>
-          <TransitionContainer onTransitionEnd={this.onNavigation} {...transitionProps}>
-            <TransitionView viewId={location.key || ''}>
-              <Switch key={location.key} location={location}>
-                <Route exact={true} path="/" component={Launch} />
-                <Route exact={true} path="/login" component={LoginPage} />
-                <Route exact={true} path="/connect" component={ConnectPage} />
-                <Route exact={true} path="/settings" component={SettingsPage} />
-                <Route exact={true} path="/settings/language" component={SelectLanguagePage} />
-                <Route exact={true} path="/settings/account" component={AccountPage} />
-                <Route exact={true} path="/settings/preferences" component={PreferencesPage} />
-                <Route exact={true} path="/settings/advanced" component={AdvancedSettingsPage} />
-                <Route
-                  exact={true}
-                  path="/settings/advanced/wireguard-keys"
-                  component={WireguardKeysPage}
-                />
-                <Route
-                  exact={true}
-                  path="/settings/advanced/linux-split-tunneling"
-                  component={LinuxSplitTunnelingSettings}
-                />
-                <Route exact={true} path="/settings/support" component={SupportPage} />
-                <Route exact={true} path="/select-location" component={SelectLocationPage} />
-              </Switch>
-            </TransitionView>
-          </TransitionContainer>
-        </Focus>
+        <KeyboardNavigation>
+          <Focus ref={this.focusRef}>
+            <TransitionContainer onTransitionEnd={this.onNavigation} {...transitionProps}>
+              <TransitionView viewId={location.key || ''}>
+                <Switch key={location.key} location={location}>
+                  <Route exact={true} path="/" component={Launch} />
+                  <Route exact={true} path="/login" component={LoginPage} />
+                  <Route exact={true} path="/connect" component={ConnectPage} />
+                  <Route exact={true} path="/settings" component={SettingsPage} />
+                  <Route exact={true} path="/settings/language" component={SelectLanguagePage} />
+                  <Route exact={true} path="/settings/account" component={AccountPage} />
+                  <Route exact={true} path="/settings/preferences" component={PreferencesPage} />
+                  <Route exact={true} path="/settings/advanced" component={AdvancedSettingsPage} />
+                  <Route
+                    exact={true}
+                    path="/settings/advanced/wireguard-keys"
+                    component={WireguardKeysPage}
+                  />
+                  <Route
+                    exact={true}
+                    path="/settings/advanced/linux-split-tunneling"
+                    component={LinuxSplitTunnelingSettings}
+                  />
+                  <Route exact={true} path="/settings/support" component={SupportPage} />
+                  <Route exact={true} path="/select-location" component={SelectLocationPage} />
+                </Switch>
+              </TransitionView>
+            </TransitionContainer>
+          </Focus>
+        </KeyboardNavigation>
       </PlatformWindowContainer>
     );
   }