Skip to content

chore: Replace focus strategy for video conf popups #36999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 5 commits into from
Sep 19, 2025
Merged

chore: Replace focus strategy for video conf popups #36999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5a27f08
chore: `useFocusManager` in favor of `autoFocus`
dougfabris Sep 19, 2025
8429b90
chore: update snapshot
dougfabris Sep 19, 2025
967ad80
chore: add `VideoConfPopupSkeleton`
dougfabris Sep 19, 2025
f3b8dcd
Merge branch 'develop' into chore/videoconfpopup-focus
kodiakhq[bot] Sep 19, 2025
5bc5de6
Merge branch 'develop' into chore/videoconfpopup-focus
MartinSchoeler Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion ...room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/TimedVideoConfPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
useVideoConfDismissOutgoing,
} from '@rocket.chat/ui-video-conf';
import type { ReactElement } from 'react';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useFocusManager } from 'react-aria';

import IncomingPopup from './IncomingPopup';
import OutgoingPopup from './OutgoingPopup';
Expand Down Expand Up @@ -38,8 +39,13 @@ const TimedVideoConfPopup = ({
const dismissCall = useVideoConfDismissCall();
const startCall = useVideoConfStartCall();
const dismissOutgoing = useVideoConfDismissOutgoing();
const focusManager = useFocusManager();
const room = useUserRoom(rid);

useEffect(() => {
focusManager?.focusFirst();
}, [focusManager]);

if (!room) {
return null;
}
Expand Down
14 changes: 9 additions & 5 deletions ...eteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import {
useVideoConfIsCalling,
useVideoConfIsRinging,
useVideoConfIncomingCalls,
VideoConfPopupSkeleton,
} from '@rocket.chat/ui-video-conf';
import type { ReactElement } from 'react';
import { useEffect, useMemo } from 'react';
import { lazy, Suspense, useEffect, useMemo } from 'react';
import { FocusScope } from 'react-aria';

import VideoConfPopup from './VideoConfPopup';
import VideoConfPopupPortal from '../../../../../portals/VideoConfPopupPortal';

const VideoConfPopup = lazy(() => import('./VideoConfPopup'));

const VideoConfPopups = ({ children }: { children?: VideoConfPopupPayload }): ReactElement => {
const { callSounds } = useCustomSound();
const incomingCalls = useVideoConfIncomingCalls();
Expand Down Expand Up @@ -48,9 +50,11 @@ const VideoConfPopups = ({ children }: { children?: VideoConfPopupPayload }): Re
<VideoConfPopupPortal>
{(children ? [children, ...popups] : popups).map(({ id, rid, isReceiving }, index = 1) => (
<VideoConfPopupBackdrop key={id}>
<FocusScope autoFocus contain restoreFocus>
<VideoConfPopup id={id} rid={rid} isReceiving={isReceiving} isCalling={isCalling} position={index * 10} />
</FocusScope>
<Suspense fallback={<VideoConfPopupSkeleton />}>
<FocusScope restoreFocus>
<VideoConfPopup id={id} rid={rid} isReceiving={isReceiving} isCalling={isCalling} position={index * 10} />
</FocusScope>
</Suspense>
</VideoConfPopupBackdrop>
))}
</VideoConfPopupPortal>
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-video-conf/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
"/dist"
],
"scripts": {
"build": "tsc -p tsconfig.build.json",
"build": "rm -rf dist && tsc -p tsconfig.build.json",
"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
"eslint": "eslint --ext .js,.jsx,.ts,.tsx .",
"eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
"storybook": "storybook dev -p 6006",
"test": "jest",
"testunit": "jest",
Expand Down
14 changes: 7 additions & 7 deletions packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Icon, Palette } from '@rocket.chat/fuselage';
import { Box, Icon } from '@rocket.chat/fuselage';
import type { ReactElement } from 'react';

type VideoConfMessageIconProps = {
Expand All @@ -8,18 +8,18 @@ type VideoConfMessageIconProps = {
const styles = {
ended: {
icon: 'phone-off',
color: Palette.text['font-hint'].toString(),
backgroundColor: Palette.surface['surface-neutral'].toString(),
color: 'hint',
backgroundColor: 'surface-neutral',
},
incoming: {
icon: 'phone-in',
color: Palette.statusColor['status-font-on-info'].toString(),
backgroundColor: Palette.status['status-background-info'].toString(),
color: 'status-font-on-info',
backgroundColor: 'status-background-info',
},
outgoing: {
icon: 'phone',
color: Palette.statusColor['status-font-on-success'].toString(),
backgroundColor: Palette.status['status-background-success'].toString(),
color: 'status-font-on-success',
backgroundColor: 'status-background-success',
},
} as const;

Expand Down
3 changes: 3 additions & 0 deletions packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import VideoConfPopupFooter from './VideoConfPopupFooter';
import VideoConfPopupFooterButtons from './VideoConfPopupFooterButtons';
import VideoConfPopupHeader from './VideoConfPopupHeader';
import VideoConfPopupInfo from './VideoConfPopupInfo';
import VideoConfPopupSkeleton from './VideoConfPopupSkeleton';
import VideoConfPopupTitle from './VideoConfPopupTitle';

export default {
Expand Down Expand Up @@ -52,3 +53,5 @@ export const StartCall: StoryFn<typeof VideoConfPopup> = () => (
</VideoConfPopupFooter>
</VideoConfPopup>
);

export const Skeleton: StoryFn<typeof VideoConfPopup> = () => <VideoConfPopupSkeleton />;
2 changes: 1 addition & 1 deletion packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { ReactNode, ReactElement, HTMLAttributes } from 'react';

export const VideoConfPopupContainer = styled('div', ({ position: _position, ...props }: { position?: number }) => props)`
width: 100%;
position: absolute;
position: relative;
box-shadow:
0px 0px 1px 0px ${Palette.shadow['shadow-elevation-2x'].toString()},
0px 0px 12px 0px ${Palette.shadow['shadow-elevation-2y'].toString()};
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
import type { ReactNode, ReactElement } from 'react';

const VideoConfPopupHeader = ({ children }: { children: ReactNode }): ReactElement => (
<Box display='flex' justifyContent='space-between'>
<Box display='flex' minHeight='x28' justifyContent='space-between'>
{children}
</Box>
);
Expand Down
28 changes: 28 additions & 0 deletions packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Box, Skeleton } from '@rocket.chat/fuselage';
import { ComponentProps } from 'react';

import VideoConfPopup from './VideoConfPopup';
import VideoConfPopupContent from './VideoConfPopupContent';
import VideoConfPopupFooter from './VideoConfPopupFooter';
import VideoConfPopupHeader from './VideoConfPopupHeader';

type VideoConfPopupSkeletonProps = Omit<ComponentProps<typeof VideoConfPopup>, 'children'>;

const VideoConfPopupSkeleton = (props: VideoConfPopupSkeletonProps) => (
<VideoConfPopup aria-label='Loading' {...props}>
<VideoConfPopupHeader>
<Skeleton width='100%' />
</VideoConfPopupHeader>
<VideoConfPopupContent>
<Box display='flex' alignItems='center'>
<Skeleton variant='rect' height='x36' width='x36' />
<Skeleton mis={8} variant='rect' height='x24' width='x120' />
</Box>
</VideoConfPopupContent>
<VideoConfPopupFooter>
<Skeleton variant='rect' height='x40' />
</VideoConfPopupFooter>
</VideoConfPopup>
);

export default VideoConfPopupSkeleton;
53 changes: 51 additions & 2 deletions packages/ui-video-conf/src/VideoConfPopup/__snapshots__/VideoConfPopup.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,54 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`renders Skeleton without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-11d1wak rcx-css-veoob9"
>
<div
aria-label="Loading"
class="rcx-css-f89r0o"
role="dialog"
>
<div
class="rcx-box rcx-box--full rcx-css-1yt6gb3"
>
<div
class="rcx-box rcx-box--full rcx-css-135wgx"
>
<span
class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
/>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rtfgno"
>
<div
class="rcx-box rcx-box--full rcx-css-127j9mz"
>
<span
class="rcx-skeleton rcx-skeleton--rect rcx-css-1etla80"
/>
<span
class="rcx-skeleton rcx-skeleton--rect rcx-css-dzx8a8"
/>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-4ka9e7"
>
<span
class="rcx-skeleton rcx-skeleton--rect rcx-css-15ie4i5"
/>
</div>
</div>
</div>
</div>
</div>
</body>
`;

exports[`renders StartCall without crashing 1`] = `
<body>
<div>
Expand All @@ -8,14 +57,14 @@ exports[`renders StartCall without crashing 1`] = `
>
<div
aria-label="Start Call"
class="rcx-css-5tiw1q"
class="rcx-css-f89r0o"
role="dialog"
>
<div
class="rcx-box rcx-box--full rcx-css-1yt6gb3"
>
<div
class="rcx-box rcx-box--full rcx-css-1bmjlil"
class="rcx-box rcx-box--full rcx-css-135wgx"
>
<div
class="rcx-box rcx-box--full rcx-css-127j9mz"
Expand Down
2 changes: 2 additions & 0 deletions packages/ui-video-conf/src/VideoConfPopup/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import VideoConfPopupFooterButtons from './VideoConfPopupFooterButtons';
import VideoConfPopupHeader from './VideoConfPopupHeader';
import VideoConfPopupIcon from './VideoConfPopupIcon';
import VideoConfPopupInfo from './VideoConfPopupInfo';
import VideoConfPopupSkeleton from './VideoConfPopupSkeleton';
import VideoConfPopupTitle from './VideoConfPopupTitle';

export {
Expand All @@ -20,4 +21,5 @@ export {
VideoConfPopupControllers,
VideoConfPopupFooter,
VideoConfPopupFooterButtons,
VideoConfPopupSkeleton,
};
Loading