Add focus fallback to Connect view

4 files changed, 23 insertions, 6 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 36b88b81df..c0c257b736 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -6,6 +6,7 @@ import NotificationArea from '../components/NotificationArea';
 import { AuthFailureKind, parseAuthFailure } from '../../shared/auth-failure';
 import { LoginState } from '../redux/account/reducers';
 import { IConnectionReduxState } from '../redux/connection/reducers';
+import { FocusFallback } from './Focus';
 import { Brand, HeaderBarStyle, HeaderBarSettingsButton } from './HeaderBar';
 import ImageView from './ImageView';
 import { Container, Header, Layout } from './Layout';
@@ -89,7 +90,9 @@ export default class Connect extends React.Component<IProps, IState> {
       <ModalContainer>
         <Layout>
           <Header barStyle={this.headerBarStyle()}>
-            <Brand />
+            <FocusFallback>
+              <Brand />
+            </FocusFallback>
             <HeaderBarSettingsButton />
           </Header>
           <StyledContainer>
diff --git a/gui/src/renderer/components/Focus.tsx b/gui/src/renderer/components/Focus.tsx
index a844497b86..6a2e9c7126 100644
--- a/gui/src/renderer/components/Focus.tsx
+++ b/gui/src/renderer/components/Focus.tsx
@@ -5,6 +5,8 @@ import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
 
+const FOCUS_FALLBACK_CLASS = 'focus-fallback';
+
 const PageChangeAnnouncer = styled.div({
   width: 0,
   height: 0,
@@ -32,7 +34,8 @@ function Focus(props: IFocusProps, ref: React.Ref<IFocusHandle>) {
         const titleContent = titleElement?.textContent ?? pageName;
         setTitle(titleContent);
 
-        const focusElement = titleElement ?? document.getElementsByTagName('header')[0];
+        const focusElement =
+          titleElement ?? document.getElementsByClassName(FOCUS_FALLBACK_CLASS)[0];
         if (focusElement) {
           focusElement.setAttribute('tabindex', '-1');
           focusElement.focus();
@@ -61,3 +64,13 @@ function Focus(props: IFocusProps, ref: React.Ref<IFocusHandle>) {
 }
 
 export default React.memo(React.forwardRef(Focus));
+
+interface IFocusFallbackProps {
+  children: React.ReactElement;
+}
+
+export function FocusFallback(props: IFocusFallbackProps) {
+  return React.cloneElement(props.children, {
+    className: `${props.children.props.className} ${FOCUS_FALLBACK_CLASS}`,
+  });
+}
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index a18e3f09b3..88b1200277 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -66,9 +66,9 @@ const Logo = styled(ImageView)({
   margin: '4px 0 3px',
 });
 
-export function Brand() {
+export function Brand(props: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <BrandContainer>
+    <BrandContainer {...props}>
       <Logo width={44} height={44} source="logo-icon" />
       <Title>{messages.pgettext('generic', 'MULLVAD VPN')}</Title>
     </BrandContainer>
diff --git a/gui/src/renderer/components/ImageView.tsx b/gui/src/renderer/components/ImageView.tsx
index c8fb3da025..fa57985363 100644
--- a/gui/src/renderer/components/ImageView.tsx
+++ b/gui/src/renderer/components/ImageView.tsx
@@ -53,9 +53,10 @@ export default function ImageView(props: IImageViewProps) {
       </ImageMask>
     );
   } else {
+    const { source: _source, width, height, ...otherProps } = props;
     return (
-      <Wrapper onClick={props.onClick} className={props.className}>
-        <img src={url} width={props.width} height={props.height} aria-hidden={true} />
+      <Wrapper {...otherProps}>
+        <img src={url} width={width} height={height} aria-hidden={true} />
       </Wrapper>
     );
   }