packages/ui-voip/src/v2/components/ActionButton.tsx (3)

12-15: Ref forwarding looks good; add displayName for DevTools.

Forwarding the ref to IconButton is correct. Add an explicit displayName for clearer debugging.

-});
+});
+
+ActionButton.displayName = 'ActionButton';
 
 export default ActionButton;

Also applies to: 27-30

---

3-3: Use type-only imports and align onClick typing with React.

Reduces emitted JS and matches IconButton’s handler type.

-import { ComponentProps, forwardRef } from 'react';
+import { forwardRef } from 'react';
+import type { ComponentProps, MouseEventHandler } from 'react';
@@
   disabled?: boolean;
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
 } & Omit<ComponentProps<typeof IconButton>, 'icon' | 'title' | 'aria-label' | 'disabled' | 'onClick'>;

Also applies to: 5-10

---

17-21: Avoid forcing medium size; let consumers choose or rely on IconButton default.

Prevents conflicting size flags when callers pass small/large.

-      medium
       secondary={secondary}
       icon={<Icon size={16} name={icon} />}
       title={label}
       aria-label={label}
       disabled={disabled}
       onClick={onClick}
       {...props}

Also applies to: 26-26

packages/ui-voip/src/v2/components/PeerInfo/PhoneNumber.tsx (1)

9-12: A11Y: mark decorative icon hidden; consider RTL-safe number rendering; verify static ID uniqueness

• Icon appears decorative—hide it from SRs.
• Phone numbers render poorly in RTL locales; force LTR on the numeral span.
• Static id may collide if multiple widgets exist. Confirm only one instance or derive a unique id.

Apply:

-  <Box display='flex' flexDirection='row' id='rcx-media-call-widget-caller-info'>
-   <Icon size='x20' name='phone' mie={8} />
-   <Box fontScale='p2b'>{number}</Box>
+  <Box display='flex' flexDirection='row' id='rcx-media-call-widget-caller-info'>
+   <Icon size='x20' name='phone' mie={8} aria-hidden='true' />
+   <Box fontScale='p2b' dir='ltr'>{number}</Box>

packages/ui-voip/src/v2/useKeypad.tsx (1)

20-35: A11Y and UX: label the read-only input, clamp length, clear on close; simplify handler

• Add aria-label and polite live region so SRs get updates.
• Prevent unbounded growth; clamp digits.
• Clear digits when closing.
• Prefer explicit (tone: string) over rest args.

Apply:

-  const element = (
+  const element = (
     <Box display='flex' justifyContent='center' alignItems='center' w='100%' flexDirection='column' mbe={8}>
       <Field mbe={8}>
         <FieldRow>
-          <TextInput value={inputValue} readOnly small mi={24} />
+          <TextInput
+            value={inputValue}
+            readOnly
+            small
+            mi={24}
+            aria-label={t('Dialed_digits')}
+            aria-live='polite'
+          />
         </FieldRow>
       </Field>
       <Keypad
-        onKeyPress={(...args) => {
-          setInputValue((inputValue) => inputValue + args[0]);
-          onPress(...args);
-        }}
+        onKeyPress={(tone: string) => {
+          setInputValue((prev) => (prev + tone).slice(0, 64));
+          onPress(tone);
+        }}
       />
       <Divider w='100%' />
     </Box>
   );
 ...
   return {
     element: open ? element : null,
     buttonProps: {
       title: open ? t('Close_dialpad') : t('Open_dialpad'),
-      onClick: () => setOpen((open) => !open),
+      onClick: () =>
+        setOpen((isOpen) => {
+          if (isOpen) setInputValue('');
+          return !isOpen;
+        }),
     },
   };

Also applies to: 39-42

packages/ui-voip/src/v2/components/Widget/WidgetHeader.tsx (1)

13-15: Avoid static IDs; derive a stable unique title id

Static ids can collide if multiple widgets render. Use useId() or accept an id prop and pass it from the parent that sets aria-labelledby.

Apply:

-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { useId } from 'react';
@@
-const WidgetHeader = ({ title, children }: WidgetHeaderProps): ReactElement => {
+const WidgetHeader = ({ title, children }: WidgetHeaderProps): ReactElement => {
+  const titleId = useId();
   return (
     <Box is='header' mi={12} mb={4} display='flex' alignItems='center' justifyContent='space-between'>
-      <Box is='h3' color='titles-labels' fontScale='p1b' id='rcx-media-call-widget-title'>
+      <Box is='h3' color='titles-labels' fontScale='p1b' id={titleId}>
         {title}
       </Box>
       <Box mis={8}>{children}</Box>
     </Box>
   );

packages/ui-voip/src/v2/components/PeerInfo/PeerInfo.stories.tsx (1)

16-26: Trim the large base64 avatar in story to keep bundles/snaps lean.

Replace the long data URI with a 1x1 placeholder or a tiny asset to improve Storybook perf/readability.

Apply:

-            avatarUrl='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgG...rs//Z'
+            avatarUrl='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='

packages/ui-voip/src/v2/views/IncomingCall.tsx (1)

31-31: Keep wrapper to avoid passing click event to onAccept.

onAccept likely takes no args/returns Promise; wrapper is appropriate.

If onAccept is guaranteed to be no-arg, consider onClick={() => void onAccept()} to ignore any returned Promise explicitly.

packages/ui-voip/src/v2/index.ts (1)

1-3: Potential name confusion: type PeerInfo vs component PeerInfo.

Exporting a type named PeerInfo alongside a PeerInfo component elsewhere can confuse consumers’ imports.

Consider aliasing the type:

-export type { PeerInfo } from './MediaCallContext';
+export type { PeerInfo as PeerInfoType } from './MediaCallContext';

and adjust downstream imports accordingly.

packages/ui-voip/src/v2/components/Widget/WidgetHandle.tsx (3)

15-26: Prevent external ref props from overriding handleRef.

{...props} comes after ref={handleRef}, so a consumer‑provided ref would silently replace the drag handle ref and break dragging.

Apply this diff to ensure the internal ref wins:

-			className={dragHandle}
-			ref={handleRef}
-			{...props}
+			className={dragHandle}
+			{...props}
+			ref={handleRef}

---

5-6: Guard against missing provider (DX).

useDraggableWidget() throws if the context is absent. If WidgetHandle is ever rendered outside the provider, it will crash. Consider a dev‑only warning and a no‑op ref to fail softer.

Also applies to: 15-17

---

18-29: A11y: identify the drag handle.

Expose an accessible name/role for the handle (e.g., aria-roledescription="drag handle" and aria-label="Drag"). Optional, but helps SR users.

packages/ui-voip/src/v2/views/NewCall.tsx (1)

41-43: Disable “Call” until a peer is selected.

Avoid firing onCall with no peerInfo.

Apply this diff:

-					<Button medium icon='phone' success flexGrow={1} onClick={onCall}>
+					<Button medium icon='phone' success flexGrow={1} onClick={onCall} disabled={!peerInfo}>

packages/ui-voip/src/v2/useInfoSlots.ts (2)

49-66: Don’t drop muted/held badges while reconnecting.

Early return shows only the connection state slot and hides muted/held. If you intended to prepend connection state, remove the short‑circuit and avoid name shadowing for clarity.

Apply this diff:

-		const slots: Slot[] = [];
+		const nextSlots: Slot[] = [];
 		const heldSlot = getHeldSlot(held, t);
 		const mutedSlot = getMutedSlot(muted, t);
 		const connectionStateSlot = getConnectionStateSlot(connectionState, t);
 
-		if (connectionStateSlot) {
-			slots.push(connectionStateSlot);
-			setSlots(slots);
-			return;
-		}
-		if (heldSlot) {
-			slots.push(heldSlot);
-		}
-		if (mutedSlot) {
-			slots.push(mutedSlot);
-		}
-		setSlots(slots);
+		if (connectionStateSlot) {
+			nextSlots.push(connectionStateSlot);
+		}
+		if (heldSlot) {
+			nextSlots.push(heldSlot);
+		}
+		if (mutedSlot) {
+			nextSlots.push(mutedSlot);
+		}
+		setSlots(nextSlots);

---

44-69: Compute slots without state.

This value is derived; useMemo would simplify and avoid state effects.

If desired, I can provide a full useMemo rewrite.

packages/ui-voip/src/v2/TransferModal.tsx (2)

20-24: Wire isLoading to the confirm button to prevent double submits.

Prop exists but isn’t used. Disable and show loading while confirming.

Apply this diff:

-const TransferModal = ({ onCancel, onConfirm }: TransferModalProps) => {
+const TransferModal = ({ onCancel, onConfirm, isLoading }: TransferModalProps) => {
@@
-					<Button danger onClick={confirm} disabled={!peer}>
+					<Button danger onClick={confirm} disabled={!peer || isLoading} loading={isLoading}>

Also applies to: 26-26, 69-75

---

35-51: Optional: handle async confirm flow.

If onConfirm can be async, consider making confirm async and delegating isLoading from parent or local state.

Do you expect onConfirm to return a Promise?

packages/ui-voip/src/v2/views/OngoingCall.tsx (2)

51-51: Localize the Dialpad label.

Use t('Dialpad') for consistency with the rest.

Apply this diff:

-					<ActionButton disabled={connecting || reconnecting} icon='dialpad' label='Dialpad' {...keypadButtonProps} />
+					<ActionButton disabled={connecting || reconnecting} icon='dialpad' label={t('Dialpad')} {...keypadButtonProps} />

---

53-53: Different icons for Hold on/off — replace second icon with 'play'.
File: packages/ui-voip/src/v2/views/OngoingCall.tsx (line 53). Verified @rocket.chat/fuselage uses "play" for resume; apply diff:

-					<ToggleButton label={t('Hold')} icons={['pause-shape-unfilled', 'pause-shape-unfilled']} pressed={held} onToggle={onHold} />
+					<ToggleButton label={t('Hold')} icons={['pause-shape-unfilled', 'play']} pressed={held} onToggle={onHold} />

packages/ui-voip/src/v2/components/PeerInfo/InternalUser.tsx (2)

11-13: A11y: add alt/aria for avatar and hide decorative icon

Provide an accessible name when the avatar renders and mark the fallback icon as decorative.

-			<Box mie={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x20' /> : <Icon name='user' size='x20' />}</Box>
+			<Box mie={8}>
+				{avatarUrl ? (
+					<Avatar url={avatarUrl} size='x20' title={displayName} aria-label={displayName} />
+				) : (
+					<Icon name='user' size='x20' aria-hidden='true' />
+				)}
+			</Box>

---

11-11: Prevent possible ID collisions

If multiple widgets render simultaneously, a hardcoded id risks duplication. Prefer a prop or useId() to generate a stable unique id, and have Widget.tsx reference it.

-import { Avatar, Box, Icon } from '@rocket.chat/fuselage';
+import { Avatar, Box, Icon } from '@rocket.chat/fuselage';
+import { useId } from 'react';
@@
-const InternalUser = ({ displayName, avatarUrl, callerId }: InternalUserProps) => {
+const InternalUser = ({ displayName, avatarUrl, callerId }: InternalUserProps) => {
+	const callerInfoId = useId();
 	return (
-		<Box display='flex' flexDirection='row' id='rcx-media-call-widget-caller-info'>
+		<Box display='flex' flexDirection='row' id={callerInfoId}>
@@
-				{callerId && (
+				{callerId && (
 					<Box fontScale='c1' color='secondary-info'>
 						{callerId}
 					</Box>
 				)}

Then pass callerInfoId upward or expose via context for aria-describedby.

packages/ui-voip/src/v2/components/Widget/Widget.tsx (4)

44-47: Fix ARIA relationships: use aria-describedby for caller info

aria-labelledby should reference the title; secondary descriptive content belongs in aria-describedby to avoid referencing missing IDs when caller info isn’t rendered.

-				<WidgetBase {...props} ref={draggableRef} aria-labelledby='rcx-media-call-widget-title rcx-media-call-widget-caller-info'>
+				<WidgetBase
+					{...props}
+					ref={draggableRef}
+					aria-labelledby='rcx-media-call-widget-title'
+					aria-describedby='rcx-media-call-widget-caller-info'
+				>

Please confirm that an element with id="rcx-media-call-widget-title" is always present (WidgetHeader).

---

37-39: Guard DOM usage; avoid SSR warnings

useLayoutEffect doesn’t run on the server, but add a document check to be safe in mixed render environments.

-	useLayoutEffect(() => {
-		boundingRef(document.body);
-	}, [boundingRef]);
+	useLayoutEffect(() => {
+		if (typeof document !== 'undefined') {
+			boundingRef(document.body);
+		}
+	}, [boundingRef]);

---

43-47: Auto-focus should be opt-in

Auto-focusing can unexpectedly steal focus. Consider a prop (autoFocus = false) and pass it to FocusScope.

-type WidgetProps = {
-	children: React.ReactNode;
-} & ComponentProps<typeof WidgetBase>;
+type WidgetProps = {
+	children: React.ReactNode;
+	autoFocus?: boolean;
+} & ComponentProps<typeof WidgetBase>;
@@
-const Widget = ({ children, ...props }: WidgetProps) => {
+const Widget = ({ children, autoFocus = false, ...props }: WidgetProps) => {
@@
-			<FocusScope autoFocus>
+			<FocusScope autoFocus={autoFocus}>

---

12-26: Initial position via style: consider persisting/reading from draggable API

You already have a TODO; persisting last position (e.g., in localStorage) improves UX.

packages/ui-voip/src/v2/MockedMediaCallProvider.tsx (3)

29-31: Type onDeviceChange to Device

Match the context signature for stronger type safety.

-import { useState } from 'react';
+import { useState } from 'react';
+import type { Device } from '@rocket.chat/ui-contexts';
@@
-const onDeviceChange = (device: any) => {
+const onDeviceChange = (device: Device) => {

---

48-56: getPeerInfo: return type OK; consider narrowing local variable name

Minor: avoid overshadowing by reusing the name peerInfo locally; rename to found or record for readability.

-	const getPeerInfo = (id: string) => {
-		const peerInfo = myData.find((item) => item.value === id);
-		if (!peerInfo) {
+	const getPeerInfo = (id: string) => {
+		const found = myData.find((item) => item.value === id);
+		if (!found) {
 			return Promise.resolve(undefined);
 		}
 
 		return Promise.resolve({
-			displayName: peerInfo.label,
-			userId: peerInfo.value,
-			avatarUrl: peerInfo.avatarUrl,
-			username: peerInfo.identifier,
-			callerId: peerInfo.value,
+			displayName: found.label,
+			userId: found.value,
+			avatarUrl: found.avatarUrl,
+			username: found.identifier,
+			callerId: found.value,
 		});
 	};

---

29-31: Console logs in mock provider

Fine for dev, but ensure these don’t leak into production builds.

Also applies to: 33-41

packages/ui-voip/src/v2/MediaCallContext.ts (2)

146-147: Autocomplete value should reflect external number too

When the selected peer is external ({ number }), consider reflecting it in value to keep input synced.

-		value: peerInfo && 'userId' in peerInfo ? peerInfo.userId : undefined,
+		value:
+			peerInfo ? ('userId' in peerInfo ? peerInfo.userId : (peerInfo.number ?? undefined)) : undefined,

---

20-29: ConnectionState coverage

If you plan to represent disconnected/error states, consider adding them now to avoid another breaking change later.

Also applies to: 57-64

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

packages/ui-voip/src/v2/TransferModal.tsx (3)

52-58: Hook Modal onClose to support ESC/overlay dismissal

Wire onClose so users can dismiss via ESC/backdrop; improves a11y and matches common Modal behavior.

-        <Modal open aria-labelledby={modalId}>
+        <Modal open aria-labelledby={modalId} onClose={onCancel}>

---

34-50: Don’t throw from a click handler; gate confirm by valid peer shape

Avoid uncaught exceptions from UI. Compute a safe isConfirmable and disable the action unless the peer has userId or number.

   const autocomplete = usePeerAutocomplete(setPeer, peer);
 
-  const confirm = () => {
-    if (!peer) {
-      return;
-    }
+  const isConfirmable = Boolean(peer && ('userId' in peer || 'number' in peer));
+
+  const confirm = () => {
+    if (!isConfirmable || !peer) {
+      return;
+    }
 
     if ('userId' in peer) {
       onConfirm('user', peer.userId);
       return;
     }
 
     if ('number' in peer) {
       onConfirm('sip', peer.number);
       return;
     }
 
-    throw new Error('Peer info is missing userId and/or number');
+    return;
   };

-          <Button danger onClick={confirm} disabled={!peer}>
+          <Button danger onClick={confirm} disabled={!isConfirmable}>
             {t('Hang_up_and_transfer_call')}
           </Button>

Also applies to: 72-74

---

30-31: Tiny nit: simplify initial state

You can omit the explicit undefined initializer.

-  const [peer, setPeer] = useState<PeerInfoType | undefined>(undefined);
+  const [peer, setPeer] = useState<PeerInfoType | undefined>();

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.