fix: mic space click [WPB-8580]

src/script/auth/page/OAuthPermissions.tsx

@@ -43,7 +43,7 @@ import {
 import * as Icon from 'Components/Icon';
 import {AssetRemoteData} from 'src/script/assets/AssetRemoteData';
 import {AssetRepository} from 'src/script/assets/AssetRepository';
-import {handleEscDown, handleKeyDown} from 'Util/KeyboardUtil';
+import {handleEscDown, handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {loadDataUrl} from 'Util/util';
 
@@ -228,7 +228,7 @@ const OAuthPermissionsComponent = ({
                 type="button"
                 onClick={onContinue}
                 data-uie-name="do-oauth-allow"
-                onKeyDown={event => handleKeyDown(event, () => onContinue())}
+                onKeyDown={event => handleKeyDown({event, callback: onContinue, keys: [KEY.ENTER, KEY.SPACE]})}
               >
                 {t('oauth.allow')}
               </Button>

src/script/components/AppContainer/AppContainer.tsx

@@ -106,6 +106,7 @@ export const AppContainer: FC<AppProps> = ({config, clientType}) => {
 
       {isDetachedCallingFeatureEnabled() && (
         <DetachedCallingCell
+          propertiesRepository={app.repository.properties}
           callingRepository={app.repository.calling}
           mediaRepository={app.repository.media}
           toggleScreenshare={mainView.calling.callActions.toggleScreenshare}

src/script/components/Avatar/Avatar.tsx

@@ -20,7 +20,7 @@
 import {HTMLProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyBoardEvent} from 'react';
 
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown, isKeyboardEvent} from 'Util/KeyboardUtil';
+import {handleKeyDown, isKeyboardEvent, KEY} from 'Util/KeyboardUtil';
 
 import {PlaceholderAvatar} from './PlaceholderAvatar';
 import {ServiceAvatar} from './ServiceAvatar';
@@ -97,7 +97,7 @@ const Avatar = ({
     const parentNode = event.currentTarget.parentNode;
     if (parentNode) {
       if (isKeyboardEvent(event)) {
-        handleKeyDown(event, () => onAvatarClick?.(participant));
+        handleKeyDown({event, callback: () => onAvatarClick?.(participant), keys: [KEY.ENTER, KEY.SPACE]});
         return;
       }
       onAvatarClick?.(participant);

src/script/components/HistoryImport/BackupFileUpload.tsx

@@ -24,7 +24,7 @@ import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
 
 import {CONFIG as HistoryExportConfig} from 'Components/HistoryExport';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 
 interface BackupFileUploadProps {
   onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -64,7 +64,7 @@ const BackupFileUpload = ({
         className={cssClassName}
         role="button"
         tabIndex={TabIndex.FOCUSABLE}
-        onKeyDown={event => handleKeyDown(event, fileInputClick)}
+        onKeyDown={event => handleKeyDown({event, callback: fileInputClick, keys: [KEY.ENTER, KEY.SPACE]})}
         onClick={() => fileInputRef.current?.click()}
         aria-labelledby="do-backup-import"
       >

src/script/components/MessagesList/Message/ContentMessage/asset/AssetLoader.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 
 import {CloseIcon} from 'Components/Icon';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 
 export interface AssetLoaderProps {
   large?: boolean;
@@ -47,7 +47,7 @@ const AssetLoader: React.FC<AssetLoaderProps> = ({large, loadProgress, onCancel}
       tabIndex={TabIndex.FOCUSABLE}
       className="media-button"
       onClick={onClick}
-      onKeyDown={event => handleKeyDown(event, () => onClick(event))}
+      onKeyDown={event => handleKeyDown({event, callback: () => onClick(event), keys: [KEY.ENTER, KEY.SPACE]})}
       data-uie-name="status-loading-media"
     >
       <svg aria-hidden="true" viewBox={viewBox} data-uie-name="asset-loader-svg">

src/script/components/MessagesList/Message/ContentMessage/asset/FileAssetComponent.tsx

@@ -24,7 +24,7 @@ import {container} from 'tsyringe';
 
 import {RestrictedFile} from 'Components/asset/RestrictedFile';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {formatBytes, getFileExtension, trimFileExtension} from 'Util/util';
 
@@ -102,7 +102,7 @@ const FileAsset: React.FC<FileAssetProps> = ({
           tabIndex={messageFocusedTabIndex}
           aria-label={`${t('conversationContextMenuDownload')} ${fileName}.${fileExtension}`}
           onClick={onDownloadAsset}
-          onKeyDown={event => handleKeyDown(event, onDownloadAsset)}
+          onKeyDown={event => handleKeyDown({event, callback: onDownloadAsset, keys: [KEY.ENTER, KEY.SPACE]})}
         >
           {isPendingUpload ? (
             <div className="asset-placeholder loading-dots" />

src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset/ImageAsset.tsx

@@ -24,7 +24,7 @@ import {CSSObject} from '@emotion/react';
 import * as Icon from 'Components/Icon';
 import {AssetImage} from 'Components/Image';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 
 import {ContentMessage} from '../../../../../../entity/message/ContentMessage';
@@ -79,7 +79,9 @@ export const ImageAsset = ({asset, message, onClick}: ImageAssetProps) => {
           data-uie-name="go-image-detail"
           data-uie-visible={visible && !isObfuscated}
           onClick={event => onClick(message, event)}
-          onKeyDown={event => handleKeyDown(event, onClick.bind(null, message, event))}
+          onKeyDown={event =>
+            handleKeyDown({event, callback: onClick.bind(null, message, event), keys: [KEY.ENTER, KEY.SPACE]})
+          }
           tabIndex={0}
           role="button"
           aria-label={imageAltText}

src/script/components/MessagesList/Message/ContentMessage/asset/LinkPreviewAssetComponent.tsx

@@ -23,7 +23,7 @@ import cx from 'classnames';
 
 import {Image} from 'Components/Image';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {safeWindowOpen} from 'Util/SanitizationUtil';
 import {cleanURL, prependProtocol} from 'Util/UrlUtil';
@@ -89,7 +89,7 @@ const LinkPreviewAsset: React.FC<LinkPreviewAssetProps> = ({header = false, mess
       tabIndex={messageFocusedTabIndex}
       className="link-preview-asset"
       onClick={onClick}
-      onKeyDown={e => handleKeyDown(e, () => onClick(e))}
+      onKeyDown={event => handleKeyDown({event, callback: () => onClick(event), keys: [KEY.ENTER, KEY.SPACE]})}
     >
       <div className="link-preview-image-container">
         {preview && previewImage ? (

src/script/components/MessagesList/Message/ContentMessage/asset/TextMessageRenderer/TextMessageRenderer.tsx

@@ -22,7 +22,7 @@ import {useEffect, FC, useState, HTMLProps, useRef} from 'react';
 import {isKeyDownEvent} from 'src/script/guards/Event';
 import {isAuxClickEvent, isClickEvent} from 'src/script/guards/Mouse';
 import {getAllFocusableElements, setElementsTabIndex} from 'Util/focusUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 
 import {ShowMoreButton} from './ShowMoreButton';
 
@@ -88,9 +88,13 @@ const TextMessage: FC<TextMessageRendererProps> = ({
     messageDetails: MessageDetails,
   ) => {
     if (isKeyDownEvent(event) && isFocusable) {
-      handleKeyDown(event, () => {
-        event.preventDefault();
-        onMessageClick(event, elementType, messageDetails);
+      handleKeyDown({
+        event,
+        callback: () => {
+          event.preventDefault();
+          onMessageClick(event, elementType, messageDetails);
+        },
+        keys: [KEY.ENTER, KEY.SPACE],
       });
     } else if (isClickEvent(event) || isAuxClickEvent(event)) {
       event.preventDefault();

src/script/components/Modals/DetailViewModal/index.tsx

@@ -85,7 +85,11 @@ export const DetailViewModal = ({
   };
 
   const handleOnClosePress = (event: KeyboardEvent | ReactKeyboardEvent<HTMLButtonElement>) => {
-    handleKeyDown(event, onCloseClick);
+    handleKeyDown({
+      event,
+      callback: onCloseClick,
+      keys: [KEY.ENTER, KEY.SPACE],
+    });
   };
 
   const onReplyClick = async (conversation: Conversation, message: ContentMessage) => {

src/script/components/Modals/UserModal/UserModal.tsx

@@ -32,7 +32,7 @@ import {EnrichedFields} from 'Components/panel/EnrichedFields';
 import {UserActions} from 'Components/panel/UserActions';
 import {UserDetails} from 'Components/panel/UserDetails';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {replaceLink, t} from 'Util/LocalizerUtil';
 
 import {useUserModalState} from './UserModal.state';
@@ -197,7 +197,13 @@ const UserModal: React.FC<UserModalProps> = ({
         <Icon.CloseIcon
           className="modal__header__button"
           onClick={hide}
-          onKeyDown={event => handleKeyDown(event, hide)}
+          onKeyDown={event =>
+            handleKeyDown({
+              event,
+              callback: hide,
+              keys: [KEY.ENTER, KEY.SPACE],
+            })
+          }
           data-uie-name="do-close"
           tabIndex={TabIndex.FOCUSABLE}
         />

src/script/components/RichTextEditor/plugins/MentionsPlugin/MentionSuggestionsItem.tsx

@@ -25,7 +25,7 @@ import cx from 'classnames';
 import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
 import * as Icon from 'Components/Icon';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 
 import {User} from '../../../../entity/User';
 
@@ -55,7 +55,13 @@ const MentionSuggestionsItemComponent: React.ForwardRefRenderFunction<HTMLDivEle
       role="button"
       tabIndex={TabIndex.FOCUSABLE}
       onClick={onClick}
-      onKeyDown={e => handleKeyDown(e, () => onClick(e))}
+      onKeyDown={event =>
+        handleKeyDown({
+          event,
+          callback: () => onClick(event),
+          keys: [KEY.ENTER, KEY.SPACE],
+        })
+      }
       onMouseEnter={onMouseEnter}
       className={cx('mention-suggestion-list__item', {'mention-suggestion-list__item--highlighted': isSelected})}
       data-uie-name="item-mention-suggestion"

src/script/components/SelectText/SelectText.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 import cx from 'classnames';
 
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 
 export interface SelectTextProps {
   text: string;
@@ -52,7 +52,13 @@ export const SelectText = ({text, className = '', dataUieName = 'select-text'}:
       css={{wordBreak: 'break-all'}}
       className={cx('select-text', className)}
       onClick={onClick}
-      onKeyDown={event => handleKeyDown(event, () => onClick(event))}
+      onKeyDown={event =>
+        handleKeyDown({
+          event,
+          callback: () => onClick(event),
+          keys: [KEY.ENTER, KEY.SPACE],
+        })
+      }
     >
       {text}
     </div>

src/script/components/ServiceList/components/ServiceListItem/ServiceListItem.tsx

@@ -23,7 +23,7 @@ import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
 import {ParticipantItemContent} from 'Components/ParticipantItemContent';
 import {listItem, listWrapper} from 'Components/ParticipantItemContent/ParticipantItem.styles';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 
 import {ServiceEntity} from '../../../../integration/ServiceEntity';
@@ -44,7 +44,13 @@ export const ServiceListItem = ({service, onClick}: ServiceListItemProps) => {
       tabIndex={TabIndex.FOCUSABLE}
       role="button"
       onClick={onServiceClick}
-      onKeyDown={event => handleKeyDown(event, onServiceClick)}
+      onKeyDown={event =>
+        handleKeyDown({
+          event,
+          callback: onServiceClick,
+          keys: [KEY.ENTER, KEY.SPACE],
+        })
+      }
       data-uie-name="item-service"
       data-uie-value={serviceName}
       aria-label={t('accessibility.openConversation', {name: serviceName})}

src/script/components/TitleBar/TitleBar.tsx

@@ -35,7 +35,7 @@ import {User} from 'src/script/entity/User';
 import {useAppMainState, ViewType} from 'src/script/page/state';
 import {ContentState} from 'src/script/page/useAppState';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {matchQualifiedIds} from 'Util/QualifiedId';
 import {TIME_IN_MILLIS} from 'Util/TimeUtil';
@@ -252,7 +252,13 @@ export const TitleBar: React.FC<TitleBarProps> = ({
           onClick={onClickDetails}
           title={peopleTooltip}
           aria-label={peopleTooltip}
-          onKeyDown={event => handleKeyDown(event, onClickDetails)}
+          onKeyDown={event =>
+            handleKeyDown({
+              event,
+              callback: onClickDetails,
+              keys: [KEY.ENTER, KEY.SPACE],
+            })
+          }
           data-placement="bottom"
           role="button"
           tabIndex={TabIndex.FOCUSABLE}

src/script/components/UserDevices/components/DeviceCard/DeviceCard.tsx

@@ -24,7 +24,7 @@ import {DeviceVerificationBadges} from 'Components/Badge';
 import {LegalHoldDot} from 'Components/LegalHoldDot';
 import {useMessageFocusedTabIndex} from 'Components/MessagesList/Message/util';
 import {WireIdentity} from 'src/script/E2EIdentity';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {splitFingerprint} from 'Util/StringUtil';
 
@@ -62,7 +62,13 @@ const DeviceCard = ({click, getDeviceIdentity, device: clientEntity, showIcon =
       tabIndex={messageFocusedTabIndex}
       className={cx('device-card', {'device-card__no-hover': !clickable})}
       onClick={clickOnDevice}
-      onKeyDown={e => handleKeyDown(e, clickOnDevice)}
+      onKeyDown={event =>
+        handleKeyDown({
+          event,
+          callback: clickOnDevice,
+          keys: [KEY.ENTER, KEY.SPACE],
+        })
+      }
       data-uie-uid={id}
       data-uie-name="device-card"
     >

src/script/components/calling/CallParticipantsListItem/CallParticipantsListItem.tsx

@@ -26,7 +26,7 @@ import {UserStatusBadges} from 'Components/Badge';
 import {CallParticipantsListItemHandRaiseIcon} from 'Components/calling/CallParticipantsListItem/CallParticipantsListItemHandRaiseIcon';
 import {Participant} from 'src/script/calling/Participant';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {handleKeyDown} from 'Util/KeyboardUtil';
+import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {setContextMenuPosition} from 'Util/util';
 
@@ -68,9 +68,13 @@ export const CallParticipantsListItem = ({
   } = useKoSubscribableChildren(user, ['isDirectGuest', 'is_verified', 'name', 'isExternal']);
 
   const handleContextKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    handleKeyDown(event, () => {
-      const newEvent = setContextMenuPosition(event);
-      onContextMenu?.(newEvent as unknown as React.MouseEvent<HTMLDivElement>);
+    handleKeyDown({
+      event,
+      callback: () => {
+        const newEvent = setContextMenuPosition(event);
+        onContextMenu?.(newEvent as unknown as React.MouseEvent<HTMLDivElement>);
+      },
+      keys: [KEY.ENTER, KEY.SPACE],
     });
   };
 

src/script/components/calling/CallingOverlayContainer.tsx

@@ -22,6 +22,7 @@ import React, {Fragment, useEffect} from 'react';
 import {container} from 'tsyringe';
 
 import {useCallAlertState} from 'Components/calling/useCallAlertState';
+import {PropertiesRepository} from 'src/script/properties/PropertiesRepository';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 
 import {ChooseScreen} from './ChooseScreen';
@@ -37,13 +38,15 @@ import {MediaRepository} from '../../media/MediaRepository';
 import {CallViewTab} from '../../view_model/CallingViewModel';
 
 export interface CallingContainerProps {
+  readonly propertiesRepository: PropertiesRepository;
   readonly callingRepository: CallingRepository;
   readonly mediaRepository: MediaRepository;
   readonly callState?: CallState;
   readonly toggleScreenshare: (call: Call, desktopScreenShareMenu: DesktopScreenShareMenu) => void;
 }
 
 const CallingContainer: React.FC<CallingContainerProps> = ({
+  propertiesRepository,
   mediaRepository,
   callingRepository,
   callState = container.resolve(CallState),
@@ -150,6 +153,7 @@ const CallingContainer: React.FC<CallingContainerProps> = ({
           conversation={conversation}
           canShareScreen={callingRepository.supportsScreenSharing}
           maximizedParticipant={maximizedParticipant}
+          propertiesRepository={propertiesRepository}
           callingRepository={callingRepository}
           mediaDevicesHandler={mediaDevicesHandler}
           isMuted={isMuted}