fix: on focus hidden sentinel (#2383)

* fix: on focus hidden sentinel

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* fix: on focus hidden sentinel

Signed-off-by: Adam Setch <adam.setch@outlook.com>

---------

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/Sidebar.tsx

@@ -67,7 +67,7 @@ export const Sidebar: FC = () => {
 
   return (
     <Stack
-      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white"
+      className="fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white"
       direction="vertical"
       justify="space-between"
     >

src/renderer/components/__snapshots__/Sidebar.test.tsx.snap

@@ -2,21 +2,35 @@ import type { FC, ReactNode } from 'react';
 
 import { Sidebar } from '../Sidebar';
 
-interface IAppLayout {
+interface AppLayoutProps {
   children: ReactNode;
 }
 
 /**
  * AppLayout is the main container for the application.
  * It handles the basic layout with sidebar and content area.
  */
-export const AppLayout: FC<IAppLayout> = ({ children }) => {
+export const AppLayout: FC<AppLayoutProps> = ({ children }) => {
+  const setFocusRef = (el: HTMLButtonElement | null) => {
+    if (el) {
+      el.focus();
+    }
+  };
+
   return (
-    <div className="flex flex-col min-h-screen bg-gitify-background">
-      {/* Content first in DOM so initial focus won't land on sidebar buttons */}
-      <div className="flex-1 pl-sidebar">{children}</div>
+    <div className="flex min-h-screen bg-gitify-background">
+      {/* Hidden focus sentinel; grabs initial focus via callback ref */}
+      <button
+        aria-label="initial focus"
+        className="sr-only"
+        data-testid="initial-focus-sentinel"
+        ref={setFocusRef}
+        type="button"
+      />
 
       <Sidebar />
+
+      <div className="flex-1 pl-sidebar">{children}</div>
     </div>
   );
 };

src/renderer/components/layout/AppLayout.tsx

@@ -2,7 +2,7 @@ import type { FC, ReactNode } from 'react';
 
 interface IPage {
   children: ReactNode;
-  testId?: string;
+  testId: string;
 }
 
 /**