feat: initially focus "create account" if no account (#944)

app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx

@@ -57,6 +57,9 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
 
     const user = application.getUser();
 
+    const CREATE_ACCOUNT_INDEX = 1;
+    const SWITCHER_INDEX = 0;
+
     return (
       <>
         <div className="flex items-center justify-between px-3 mt-1 mb-1">
@@ -113,6 +116,9 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
           isOpen={appState.accountMenu.show}
           a11yLabel="General account menu"
           closeMenu={closeMenu}
+          initialFocus={
+            !application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX
+          }
         >
           <MenuItemSeparator />
           <WorkspaceSwitcherOption

app/assets/javascripts/components/Menu/Menu.tsx

@@ -19,6 +19,7 @@ type MenuProps = {
   children: ComponentChildren;
   closeMenu?: () => void;
   isOpen: boolean;
+  initialFocus?: number;
 };
 
 export const Menu: FunctionComponent<MenuProps> = ({
@@ -28,6 +29,7 @@ export const Menu: FunctionComponent<MenuProps> = ({
   a11yLabel,
   closeMenu,
   isOpen,
+  initialFocus,
 }: MenuProps) => {
   const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
@@ -46,7 +48,7 @@ export const Menu: FunctionComponent<MenuProps> = ({
     }
   };
 
-  useListKeyboardNavigation(menuElementRef);
+  useListKeyboardNavigation(menuElementRef, initialFocus);
 
   useEffect(() => {
     if (isOpen && menuItemRefs.current.length > 0) {

app/assets/javascripts/components/utils.ts

@@ -92,10 +92,12 @@ export const calculateDifferenceBetweenDatesInDays = (
 };
 
 export const useListKeyboardNavigation = (
-  container: Ref<HTMLElement | null>
+  container: Ref<HTMLElement | null>,
+  initialFocus = 0
 ) => {
   const [listItems, setListItems] = useState<HTMLButtonElement[]>();
-  const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
+  const [focusedItemIndex, setFocusedItemIndex] =
+    useState<number>(initialFocus);
 
   const focusItemWithIndex = useCallback(
     (index: number, items?: HTMLButtonElement[]) => {
@@ -171,12 +173,13 @@ export const useListKeyboardNavigation = (
       const selectedItemIndex = Array.from(temporaryItems).findIndex(
         (item) => item.dataset.selected
       );
-      const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : 0;
+      const indexToFocus =
+        selectedItemIndex > -1 ? selectedItemIndex : initialFocus;
       setTimeout(() => {
         focusItemWithIndex(indexToFocus, temporaryItems);
       }, FIRST_ITEM_FOCUS_TIMEOUT);
     }
-  }, [container, focusItemWithIndex, listItems]);
+  }, [container, focusItemWithIndex, initialFocus, listItems]);
 
   useEffect(() => {
     const containerElement = container.current;