Replace Focus with InitialFocus component

3 files changed, 8 insertions, 24 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Focus.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Focus.tsx
index 116c2ccb11..f7496fd8cb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Focus.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Focus.tsx
@@ -5,8 +5,6 @@ import styled from 'styled-components';
 
 import { messages } from '../../shared/gettext';
 
-const FOCUS_FALLBACK_CLASS = 'focus-fallback';
-
 const PageChangeAnnouncer = styled.div({
   width: 0,
   height: 0,
@@ -33,13 +31,6 @@ function Focus(props: IFocusProps, ref: React.Ref<IFocusHandle>) {
         const titleElement = document.getElementsByTagName('h1')[0];
         const titleContent = titleElement?.textContent ?? pageName;
         setTitle(titleContent);
-
-        const focusElement =
-          titleElement ?? document.getElementsByClassName(FOCUS_FALLBACK_CLASS)[0];
-        if (focusElement) {
-          focusElement.setAttribute('tabindex', '-1');
-          focusElement.focus();
-        }
       },
     }),
     [location.pathname],
@@ -64,13 +55,3 @@ function Focus(props: IFocusProps, ref: React.Ref<IFocusHandle>) {
 }
 
 export default React.memo(React.forwardRef(Focus));
-
-interface IFocusFallbackProps {
-  children: React.ReactElement<React.HTMLAttributes<HTMLElement>>;
-}
-
-export function FocusFallback(props: IFocusFallbackProps) {
-  return React.cloneElement(props.children, {
-    className: `${props.children.props.className} ${FOCUS_FALLBACK_CLASS}`,
-  });
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx
index 5240152272..cf2d6903a1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx
@@ -1,7 +1,7 @@
 import { TunnelState } from '../../../shared/daemon-rpc-types';
 import { Flex, HeaderProps, Logo, LogoProps, MainHeader } from '../../lib/components';
 import { useSelector } from '../../redux/store';
-import { FocusFallback } from '../Focus';
+import { InitialFocus } from '../initial-focus';
 import {
   AppMainHeaderBarAccountButton,
   AppMainHeaderDeviceInfo,
@@ -35,9 +35,9 @@ const AppMainHeader = ({
   return (
     <MainHeader variant={variant} size={size} {...props}>
       <Flex $justifyContent="space-between">
-        <FocusFallback>
+        <InitialFocus>
           {logoVariant !== 'none' ? <Logo variant={logoVariant} /> : <div />}
-        </FocusFallback>
+        </InitialFocus>
         <Flex $gap="medium" $alignItems="center">
           {children}
         </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx
index 80f1f794f4..508a80270d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx
@@ -1,11 +1,12 @@
 import { useContext } from 'react';
 
 import { NavigationHeader, NavigationHeaderProps } from '../../lib/components';
+import { InitialFocus } from '../initial-focus';
 import { NavigationScrollContext } from '../NavigationContainer';
 import { AppNavigationHeaderBackButton, AppNavigationHeaderInfoButton } from './components';
 
 export interface NavigationBarProps extends NavigationHeaderProps {
-  title?: string;
+  title: string;
   children?: React.ReactNode;
 }
 
@@ -14,7 +15,9 @@ const AppNavigationHeader = ({ title, children, ...props }: NavigationBarProps)
   return (
     <NavigationHeader titleVisible={showsBarTitle} {...props}>
       <AppNavigationHeaderBackButton />
-      {title && <NavigationHeader.Title>{title}</NavigationHeader.Title>}
+      <InitialFocus>
+        <NavigationHeader.Title>{title}</NavigationHeader.Title>
+      </InitialFocus>
       <NavigationHeader.ButtonGroup $justifyContent="flex-end">
         {children}
       </NavigationHeader.ButtonGroup>