feat: replace button with div and assigned role=button to it [WPB-21194] (#19846)

* feat: add aria label and also title on the close screen share icon

* feat: replace button with div and assigned role=button to it. Move inline css to styles.ts

* feat: call controls were not working using keyboard.

Author: zskhan

src/script/components/calling/GroupVideoGridTile.styles.ts

@@ -0,0 +1,99 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+const participantNameColor = (isActivelySpeaking: boolean, isAudioEstablished: boolean) => {
+  if (!isAudioEstablished) {
+    return 'var(--gray-60)';
+  }
+  if (isActivelySpeaking) {
+    return 'var(--app-bg-secondary)';
+  }
+  return 'var(--white)';
+};
+
+export const activelySpeakingBoxShadow = `inset 0px 0px 0px 1px var(--group-video-bg), inset 0px 0px 0px 4px var(--accent-color), inset 0px 0px 0px 7px var(--app-bg-secondary)`;
+
+export const groupVideoBoxShadow = (participantCount: number): string =>
+  participantCount > 1 ? 'inset 0px 0px 0px 2px var(--group-video-bg)' : 'initial';
+
+export const groupVideoTileWrapper: CSSObject = {
+  alignItems: 'center',
+  backgroundColor: 'var(--group-video-tile-bg)',
+  borderRadius: '10px',
+  display: 'flex',
+  height: '100%',
+  justifyContent: 'center',
+  width: '100%',
+};
+
+export const groupVideoActiveSpeakerTile = (isActivelySpeaking: boolean, participantCount: number): CSSObject => ({
+  borderRadius: '8px',
+  bottom: 0,
+  boxShadow: isActivelySpeaking ? activelySpeakingBoxShadow : groupVideoBoxShadow(participantCount),
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  transition: 'box-shadow 0.3s ease-in-out',
+});
+
+export const groupVideoActiveSpeaker = (isActivelySpeaking: boolean): CSSObject => ({
+  filter: isActivelySpeaking ? 'brightness(0.8)' : 'none',
+});
+
+export const groupVideoParticipantNameWrapper = (
+  isActivelySpeaking: boolean,
+  isAudioEstablished: boolean,
+): CSSObject => ({
+  overflow: 'hidden',
+  display: 'flex',
+  color: participantNameColor(isActivelySpeaking, isAudioEstablished),
+});
+
+export const groupVideoParticipantName: CSSObject = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+};
+
+export const groupVideoParticipantAudioStatus = (
+  isActivelySpeaking: boolean,
+  isAudioEstablished: boolean,
+): CSSObject => {
+  const color = participantNameColor(isActivelySpeaking, isAudioEstablished);
+  return {
+    color: 'var(--participant-audio-connecting-color)',
+    flexShrink: 0,
+    '&::before': {
+      content: "' • '",
+      whiteSpace: 'pre',
+      color,
+    },
+  };
+};
+
+export const groupVideoElementVideo = (fitContain: boolean, mirrorSelf: boolean): CSSObject => ({
+  objectFit: fitContain ? 'contain' : 'cover',
+  transform: mirrorSelf ? 'rotateY(180deg)' : 'initial',
+});
+
+export const groupVideoPauseOverlayLabel = (minimized: boolean): CSSObject => ({
+  fontSize: minimized ? '0.6875rem' : '0.875rem',
+});

src/script/components/calling/GroupVideoGridTile.tsx

@@ -25,6 +25,16 @@ import {VIDEO_STATE} from '@wireapp/avs';
 import {TabIndex} from '@wireapp/react-ui-kit';
 
 import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
+import {
+  groupVideoActiveSpeaker,
+  groupVideoActiveSpeakerTile,
+  groupVideoElementVideo,
+  groupVideoParticipantAudioStatus,
+  groupVideoParticipantName,
+  groupVideoParticipantNameWrapper,
+  groupVideoPauseOverlayLabel,
+  groupVideoTileWrapper,
+} from 'Components/calling/GroupVideoGridTile.styles';
 import * as Icon from 'Components/Icon';
 import type {Participant} from 'Repositories/calling/Participant';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
@@ -42,24 +52,6 @@ interface GroupVideoGridTileProps {
   selfParticipant: Participant;
 }
 
-const getParticipantNameColor = ({
-  isActivelySpeaking,
-  isAudioEstablished,
-}: {
-  isActivelySpeaking: boolean;
-  isAudioEstablished: boolean;
-}) => {
-  if (!isAudioEstablished) {
-    return 'var(--gray-60)';
-  }
-
-  if (isActivelySpeaking) {
-    return 'var(--app-bg-secondary)';
-  }
-
-  return 'var(--white)';
-};
-
 const GroupVideoGridTile = ({
   minimized,
   participant,
@@ -95,8 +87,6 @@ const GroupVideoGridTile = ({
   const hasPausedVideo = videoState === VIDEO_STATE.PAUSED;
   const doVideoReconnecting = videoState === VIDEO_STATE.RECONNECTING;
   const hasActiveVideo = (sharesCamera || sharesScreen) && !!videoStream;
-  const activelySpeakingBoxShadow = `inset 0px 0px 0px 1px var(--group-video-bg), inset 0px 0px 0px 4px var(--accent-color), inset 0px 0px 0px 7px var(--app-bg-secondary)`;
-  const groupVideoBoxShadow = participantCount > 1 ? 'inset 0px 0px 0px 2px var(--group-video-bg)' : 'initial';
 
   const handleTileClick = () => onTileDoubleClick(participant?.user.qualifiedId, participant?.clientId);
 
@@ -106,45 +96,21 @@ const GroupVideoGridTile = ({
     }
   };
 
-  const participantNameColor = getParticipantNameColor({isActivelySpeaking, isAudioEstablished});
-
   const nameContainer = !minimized && (
-    <div
-      className="group-video-grid__element__label"
-      css={{
-        backgroundColor: isActivelySpeaking ? 'var(--accent-color)' : 'var(--black)',
-      }}
-    >
+    <div className="group-video-grid__element__label" css={groupVideoActiveSpeaker(isActivelySpeaking)}>
       <span
         data-uie-name={isActivelySpeaking ? 'status-active-speaking' : isMuted ? 'status-audio-off' : 'status-audio-on'}
-        css={{
-          overflow: 'hidden',
-          display: 'flex',
-          color: participantNameColor,
-        }}
+        css={groupVideoParticipantNameWrapper(isActivelySpeaking, isAudioEstablished)}
       >
         <span
           data-uie-value={participant?.user.id}
           data-uie-name="call-participant-name"
-          css={{
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-          }}
+          css={groupVideoParticipantName}
         >
           {name}
         </span>
         {!isAudioEstablished && (
-          <span
-            css={{
-              color: 'var(--participant-audio-connecting-color)',
-              flexShrink: 0,
-              '&::before': {
-                content: "' • '",
-                whiteSpace: 'pre',
-                color: participantNameColor,
-              },
-            }}
-          >
+          <span css={groupVideoParticipantAudioStatus(isActivelySpeaking, isAudioEstablished)}>
             {t('videoCallParticipantConnecting')}
           </span>
         )}
@@ -153,13 +119,18 @@ const GroupVideoGridTile = ({
   );
 
   return (
-    <button
+    <div
       data-uie-name="item-grid"
       data-user-id={participant?.user.id}
       className="group-video-grid__element"
       onDoubleClick={handleTileClick}
       onKeyDown={handleEnterTileClick}
-      tabIndex={isMaximized ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE}
+      role="button"
+      // minimized is passed only from CallingCell where we don't want to focus individual the tile on the tab press
+      tabIndex={
+        (!minimized || isMaximized) && participant !== selfParticipant ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE
+      }
+      aria-label={`Focus video ${participant?.user.id}`}
     >
       {hasActiveVideo ? (
         <div className="tile-wrapper">
@@ -173,24 +144,11 @@ const GroupVideoGridTile = ({
             muted
             srcObject={blurredVideoStream?.stream ?? videoStream}
             className="group-video-grid__element-video"
-            css={{
-              objectFit: isMaximized || sharesScreen ? 'contain' : 'cover',
-              transform: participant === selfParticipant && sharesCamera ? 'rotateY(180deg)' : 'initial',
-            }}
+            css={groupVideoElementVideo(isMaximized || sharesScreen, participant === selfParticipant && sharesCamera)}
           />
         </div>
       ) : (
-        <div
-          css={{
-            alignItems: 'center',
-            backgroundColor: 'var(--group-video-tile-bg)',
-            borderRadius: '10px',
-            display: 'flex',
-            height: '100%',
-            justifyContent: 'center',
-            width: '100%',
-          }}
-        >
+        <div css={groupVideoTileWrapper}>
           <Avatar
             avatarSize={minimized ? AVATAR_SIZE.MEDIUM : AVATAR_SIZE.LARGE}
             participant={participant?.user}
@@ -199,18 +157,7 @@ const GroupVideoGridTile = ({
         </div>
       )}
 
-      <div
-        css={{
-          borderRadius: '8px',
-          bottom: 0,
-          boxShadow: isActivelySpeaking ? activelySpeakingBoxShadow : groupVideoBoxShadow,
-          left: 0,
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          transition: 'box-shadow 0.3s ease-in-out',
-        }}
-      />
+      <div css={groupVideoActiveSpeakerTile(isActivelySpeaking, participantCount)} />
 
       {!minimized && isMuted && (
         <span className="group-video-grid__element__label__icon">
@@ -243,15 +190,15 @@ const GroupVideoGridTile = ({
 
           <div
             className="group-video-grid__pause-overlay__label"
-            css={{fontsize: minimized ? '0.6875rem' : '0.875rem'}}
+            css={groupVideoPauseOverlayLabel(minimized)}
             data-uie-name="status-video-paused"
           >
             {hasPausedVideo ? t('videoCallPaused') : t('videoCallParticipantConnecting')}
           </div>
           {nameContainer}
         </div>
       )}
-    </button>
+    </div>
   );
 };
 

src/script/util/KeyboardUtil.ts

@@ -90,7 +90,15 @@ export const handleKeyDown = ({
   keys: Array<(typeof KEY)[keyof typeof KEY]>;
 }) => {
   if (keys.includes(event.key as (typeof KEY)[keyof typeof KEY])) {
+    if ('preventDefault' in event) {
+      event.preventDefault();
+    }
+    if ('stopPropagation' in event) {
+      event.stopPropagation();
+    }
+
     callback(event);
+    return true;
   }
   return true;
 };