diff --git a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx index d3feda9a7..5f30ff040 100644 --- a/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx +++ b/app/assets/javascripts/components/AccountMenu/GeneralAccountMenu.tsx @@ -57,6 +57,9 @@ export const GeneralAccountMenu: FunctionComponent = observer( const user = application.getUser(); + const CREATE_ACCOUNT_INDEX = 1; + const SWITCHER_INDEX = 0; + return ( <>
@@ -113,6 +116,9 @@ export const GeneralAccountMenu: FunctionComponent = observer( isOpen={appState.accountMenu.show} a11yLabel="General account menu" closeMenu={closeMenu} + initialFocus={ + !application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX + } > void; isOpen: boolean; + initialFocus?: number; }; export const Menu: FunctionComponent = ({ @@ -28,6 +29,7 @@ export const Menu: FunctionComponent = ({ a11yLabel, closeMenu, isOpen, + initialFocus, }: MenuProps) => { const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]); @@ -46,7 +48,7 @@ export const Menu: FunctionComponent = ({ } }; - useListKeyboardNavigation(menuElementRef); + useListKeyboardNavigation(menuElementRef, initialFocus); useEffect(() => { if (isOpen && menuItemRefs.current.length > 0) { diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts index 33f04f67e..1d0082253 100644 --- a/app/assets/javascripts/components/utils.ts +++ b/app/assets/javascripts/components/utils.ts @@ -92,10 +92,12 @@ export const calculateDifferenceBetweenDatesInDays = ( }; export const useListKeyboardNavigation = ( - container: Ref + container: Ref, + initialFocus = 0 ) => { const [listItems, setListItems] = useState(); - const [focusedItemIndex, setFocusedItemIndex] = useState(0); + const [focusedItemIndex, setFocusedItemIndex] = + useState(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;