diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx index f3816d57..8c2ee0ba 100644 --- a/src/frontend/apps/impress/src/components/DropButton.tsx +++ b/src/frontend/apps/impress/src/components/DropButton.tsx @@ -9,6 +9,7 @@ import { Button, Popover } from 'react-aria-components'; import styled, { css } from 'styled-components'; import { useCunninghamTheme } from '@/cunningham'; +import { useFocusStore } from '@/stores'; import { BoxProps } from './Box'; @@ -70,8 +71,9 @@ export const DropButton = ({ const { themeTokens } = useCunninghamTheme(); const font = themeTokens['font']?.['families']['base']; const [isLocalOpen, setIsLocalOpen] = useState(isOpen); + const addLastFocus = useFocusStore((state) => state.addLastFocus); - const triggerRef = useRef(null); + const triggerRef = useRef(null); useEffect(() => { setIsLocalOpen(isOpen); @@ -86,7 +88,10 @@ export const DropButton = ({ <> onOpenChangeHandler(true)} + onPress={() => { + addLastFocus(triggerRef.current); + onOpenChangeHandler(true); + }} aria-label={label} data-testid={testId} $css={css` diff --git a/src/frontend/apps/impress/src/stores/index.ts b/src/frontend/apps/impress/src/stores/index.ts index 264f9dee..c0ad11d6 100644 --- a/src/frontend/apps/impress/src/stores/index.ts +++ b/src/frontend/apps/impress/src/stores/index.ts @@ -1,2 +1,3 @@ export * from './useBroadcastStore'; +export * from './useFocusStore'; export * from './useResponsiveStore'; diff --git a/src/frontend/apps/impress/src/stores/useFocusStore.tsx b/src/frontend/apps/impress/src/stores/useFocusStore.tsx new file mode 100644 index 00000000..0a93da3a --- /dev/null +++ b/src/frontend/apps/impress/src/stores/useFocusStore.tsx @@ -0,0 +1,23 @@ +import { create } from 'zustand'; + +interface UseFocusStore { + lastFocusedElement: HTMLElement | null; + addLastFocus: (target: HTMLElement | null) => void; + restoreFocus: () => void; +} + +export const useFocusStore = create((set, get) => ({ + lastFocusedElement: null, + addLastFocus: (target) => set({ lastFocusedElement: target }), + restoreFocus: () => { + const { lastFocusedElement } = get(); + if (!lastFocusedElement) { + return; + } + + requestAnimationFrame(() => { + lastFocusedElement.focus(); + }); + set({ lastFocusedElement: null }); + }, +}));