From 40637aa3dcc25be6a1a506787dd995882547d93e Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Mon, 22 Aug 2022 12:40:59 +0300
Subject: [PATCH] ref(ui-components) Improve Button component (#12015)

Bring web and native more in line
---
 ...aseTheme.native.js => BaseTheme.native.ts} |  2 --
 .../base/ui/components/native/Button.tsx      | 13 ++++-----
 react/features/base/ui/components/types.ts    | 11 ++++++--
 ...eTheme.native.js => updateTheme.native.ts} |  2 --
 .../base/ui/components/web/Button.tsx         | 15 ++++++----
 react/features/base/ui/constants.ts           |  4 ++-
 ...unctions.native.js => functions.native.ts} |  4 +--
 react/features/base/ui/utils.ts               |  2 +-
 .../native/LonelyMeetingExperience.js         |  6 ++--
 .../native/carmode/EndMeetingButton.tsx       |  5 ++--
 .../native/carmode/SoundDeviceButton.tsx      |  5 ++--
 .../lobby/components/native/LobbyScreen.js    | 20 ++++++-------
 .../native/AddBreakoutRoomButton.tsx          |  4 +--
 .../components/native/AutoAssignButton.tsx    |  4 +--
 .../native/LeaveBreakoutRoomButton.tsx        |  4 +--
 .../components/web/AddBreakoutRoomButton.tsx  |  2 +-
 .../components/web/AutoAssignButton.tsx       |  2 +-
 .../components/web/JoinQuickActionButton.tsx  |  2 +-
 .../components/web/LeaveButton.tsx            |  2 +-
 .../components/native/LobbyParticipantItem.js |  4 +--
 .../components/native/LobbyParticipantList.js |  4 +--
 .../native/MeetingParticipantList.js          |  4 +--
 .../native/ParticipantsPaneFooter.tsx         |  4 +--
 .../components/web/InviteButton.tsx           |  2 +-
 .../components/web/LobbyParticipantItem.js    |  4 +--
 .../components/web/ParticipantsPane.tsx       |  2 +-
 .../polls/components/native/PollAnswer.js     |  8 +++---
 .../polls/components/native/PollCreate.js     | 12 ++++----
 .../polls/components/native/PollsPane.js      |  4 +--
 .../polls/components/web/PollAnswer.tsx       |  4 +--
 .../polls/components/web/PollCreate.tsx       |  6 ++--
 .../polls/components/web/PollsPane.tsx        |  3 +-
 .../prejoin/components/Prejoin.native.tsx     |  8 +++---
 .../components/native/RaiseHandButton.js      |  4 +--
 .../Recording/native/HighlightDialog.js       |  8 +++---
 .../security-dialog/native/SecurityDialog.js  | 28 +++++++++----------
 36 files changed, 110 insertions(+), 108 deletions(-)
 rename react/features/base/ui/components/{BaseTheme.native.js => BaseTheme.native.ts} (96%)
 rename react/features/base/ui/components/{updateTheme.native.js => updateTheme.native.ts} (95%)
 rename react/features/base/ui/{functions.native.js => functions.native.ts} (91%)

diff --git a/react/features/base/ui/components/BaseTheme.native.js b/react/features/base/ui/components/BaseTheme.native.ts
similarity index 96%
rename from react/features/base/ui/components/BaseTheme.native.js
rename to react/features/base/ui/components/BaseTheme.native.ts
index bdb0ea6f8..097555310 100644
--- a/react/features/base/ui/components/BaseTheme.native.js
+++ b/react/features/base/ui/components/BaseTheme.native.ts
@@ -1,5 +1,3 @@
-// @flow
-
 import { font, colors, colorMap, spacing, shape, typography } from '../Tokens';
 import { createNativeTheme } from '../functions.native';
 
diff --git a/react/features/base/ui/components/native/Button.tsx b/react/features/base/ui/components/native/Button.tsx
index 46caad690..24aa4fc75 100644
--- a/react/features/base/ui/components/native/Button.tsx
+++ b/react/features/base/ui/components/native/Button.tsx
@@ -8,7 +8,6 @@ import {
 } from 'react-native-paper';
 
 import { BUTTON_MODES, BUTTON_TYPES } from '../../constants';
-// @ts-ignore
 import BaseTheme from '../BaseTheme.native';
 import { ButtonProps } from '../types';
 
@@ -17,7 +16,6 @@ import styles from './buttonStyles';
 export interface IButtonProps extends ButtonProps {
     color?: string;
     labelStyle?: Object | undefined;
-    onPress?: Function;
     style?: Object | undefined;
 }
 
@@ -26,9 +24,9 @@ const Button: React.FC<IButtonProps> = ({
     color: buttonColor,
     disabled,
     icon,
-    label,
+    labelKey,
     labelStyle,
-    onPress,
+    onClick: onPress,
     style,
     type
 }: IButtonProps) => {
@@ -70,7 +68,6 @@ const Button: React.FC<IButtonProps> = ({
             <TouchableRipple
                 accessibilityLabel = { accessibilityLabel }
                 disabled = { disabled }
-                // @ts-ignore
                 onPress = { onPress }
                 rippleColor = 'transparent'
                 style = { [
@@ -81,18 +78,18 @@ const Button: React.FC<IButtonProps> = ({
                     style = { [
                         buttonLabelStyles,
                         labelStyle
-                    ] }>{ t(label ?? '') }</Text>
+                    ] }>{ t(labelKey ?? '') }</Text>
             </TouchableRipple>
         );
     }
 
     return (
-        // @ts-ignore
         <NativePaperButton
             accessibilityLabel = { t(accessibilityLabel ?? '') }
-            children = { t(label ?? '') }
+            children = { t(labelKey ?? '') }
             color = { color }
             disabled = { disabled }
+            // @ts-ignore
             icon = { icon }
             labelStyle = { [
                 buttonLabelStyles,
diff --git a/react/features/base/ui/components/types.ts b/react/features/base/ui/components/types.ts
index b7d4a5399..2a69f0cf5 100644
--- a/react/features/base/ui/components/types.ts
+++ b/react/features/base/ui/components/types.ts
@@ -1,3 +1,5 @@
+import { GestureResponderEvent } from 'react-native';
+
 import { BUTTON_TYPES } from '../constants';
 
 export interface ButtonProps {
@@ -18,9 +20,14 @@ export interface ButtonProps {
     icon?: Function;
 
     /**
-     * The text to be displayed on the button.
+     * The translation key of the text to be displayed on the button.
      */
-    label?: string;
+    labelKey?: string;
+
+    /**
+     * Click callback.
+     */
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement> | GestureResponderEvent) => void;
 
     /**
      * The type of button to be displayed.
diff --git a/react/features/base/ui/components/updateTheme.native.js b/react/features/base/ui/components/updateTheme.native.ts
similarity index 95%
rename from react/features/base/ui/components/updateTheme.native.js
rename to react/features/base/ui/components/updateTheme.native.ts
index bdbe074dc..17f62d510 100644
--- a/react/features/base/ui/components/updateTheme.native.js
+++ b/react/features/base/ui/components/updateTheme.native.ts
@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * Custom theme for setting client branding.
  *
diff --git a/react/features/base/ui/components/web/Button.tsx b/react/features/base/ui/components/web/Button.tsx
index 692379139..91491b1b7 100644
--- a/react/features/base/ui/components/web/Button.tsx
+++ b/react/features/base/ui/components/web/Button.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from '@material-ui/core';
 import clsx from 'clsx';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
@@ -8,7 +9,6 @@ import { BUTTON_TYPES } from '../../constants';
 import { Theme } from '../../types';
 import { ButtonProps } from '../types';
 
-
 interface IButtonProps extends ButtonProps {
 
     /**
@@ -32,9 +32,10 @@ interface IButtonProps extends ButtonProps {
     isSubmit?: boolean;
 
     /**
-     * Click callback.
+     * Text to be displayed on the component.
+     * Used when there's no labelKey.
      */
-    onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    label?: string;
 
     /**
      * Which size the button should be.
@@ -185,19 +186,21 @@ const Button = ({
     id,
     isSubmit,
     label,
+    labelKey,
     onClick = () => null,
     size = 'medium',
     testId,
     type = BUTTON_TYPES.PRIMARY
 }: IButtonProps) => {
     const styles = useStyles();
+    const { t } = useTranslation();
 
     return (
         <button
             aria-label = { accessibilityLabel }
             className = { clsx(styles.button, styles[type],
                 disabled && styles.disabled,
-                icon && !label && `${styles.iconButton} iconButton`,
+                icon && !(labelKey || label) && `${styles.iconButton} iconButton`,
                 styles[size], fullWidth && styles.fullWidth, className) }
             data-testid = { testId }
             disabled = { disabled }
@@ -208,7 +211,9 @@ const Button = ({
             {icon && <Icon
                 size = { 20 }
                 src = { icon } />}
-            {label && <span className = { icon ? styles.textWithIcon : '' }>{label}</span>}
+            {(labelKey || label) && <span className = { icon ? styles.textWithIcon : '' }>
+                {labelKey ? t(labelKey) : label}
+            </span>}
         </button>
     );
 };
diff --git a/react/features/base/ui/constants.ts b/react/features/base/ui/constants.ts
index 4664bc769..b8bd8876d 100644
--- a/react/features/base/ui/constants.ts
+++ b/react/features/base/ui/constants.ts
@@ -13,7 +13,9 @@ export enum BUTTON_TYPES {
 /**
  * The modes of the buttons.
  */
-export const BUTTON_MODES = {
+export const BUTTON_MODES: {
+    CONTAINED: 'contained'
+} = {
     CONTAINED: 'contained'
 };
 
diff --git a/react/features/base/ui/functions.native.js b/react/features/base/ui/functions.native.ts
similarity index 91%
rename from react/features/base/ui/functions.native.js
rename to react/features/base/ui/functions.native.ts
index 794f6af33..6c3ab9950 100644
--- a/react/features/base/ui/functions.native.js
+++ b/react/features/base/ui/functions.native.ts
@@ -1,5 +1,3 @@
-// @flow
-
 import { DefaultTheme } from 'react-native-paper';
 
 import { createColorTokens } from './utils';
@@ -10,7 +8,7 @@ import { createColorTokens } from './utils';
  * @param {Object} arg - The ui tokens.
  * @returns {Object}
  */
-export function createNativeTheme({ font, colors, colorMap, shape, spacing, typography }: Object) {
+export function createNativeTheme({ font, colors, colorMap, shape, spacing, typography }: any): any {
     return {
         ...DefaultTheme,
         palette: createColorTokens(colorMap, colors),
diff --git a/react/features/base/ui/utils.ts b/react/features/base/ui/utils.ts
index 5bc8485ae..e474d702b 100644
--- a/react/features/base/ui/utils.ts
+++ b/react/features/base/ui/utils.ts
@@ -6,7 +6,7 @@
  * @param {Object} colors - An object containing all the theme colors.
  * @returns {Object}
  */
-export function createColorTokens(colorMap: Object, colors: Object): Object {
+export function createColorTokens(colorMap: Object, colors: Object): any {
     return Object.entries(colorMap)
         .reduce((result, [ token, value ]: [any, keyof Object]) =>
             Object.assign(result, { [token]: colors[value] || value }), {});
diff --git a/react/features/conference/components/native/LonelyMeetingExperience.js b/react/features/conference/components/native/LonelyMeetingExperience.js
index 8babef756..b2f1a2d07 100644
--- a/react/features/conference/components/native/LonelyMeetingExperience.js
+++ b/react/features/conference/components/native/LonelyMeetingExperience.js
@@ -21,7 +21,7 @@ type Props = {
     /**
      * True if currently in a breakout room.
      */
-     _isInBreakoutRoom: boolean,
+    _isInBreakoutRoom: boolean,
 
     /**
      * True if the invite functions (dial out, invite, share...etc) are disabled.
@@ -98,8 +98,8 @@ class LonelyMeetingExperience extends PureComponent<Props> {
                     <Button
                         accessibilityLabel = 'lonelyMeetingExperience.button'
                         icon = { this._renderAddPeopleIcon }
-                        label = 'lonelyMeetingExperience.button'
-                        onPress = { this._onPress }
+                        labelKey = 'lonelyMeetingExperience.button'
+                        onClick = { this._onPress }
                         style = { styles.lonelyButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 ) }
diff --git a/react/features/conference/components/native/carmode/EndMeetingButton.tsx b/react/features/conference/components/native/carmode/EndMeetingButton.tsx
index d85ccb35a..b565b125d 100644
--- a/react/features/conference/components/native/carmode/EndMeetingButton.tsx
+++ b/react/features/conference/components/native/carmode/EndMeetingButton.tsx
@@ -30,10 +30,9 @@ const EndMeetingButton = () : JSX.Element => {
     return (
         <Button
             accessibilityLabel = 'carmode.actions.leaveMeeting'
-            // @ts-ignore
             icon = { EndMeetingIcon }
-            label = 'carmode.actions.leaveMeeting'
-            onPress = { onSelect }
+            labelKey = 'carmode.actions.leaveMeeting'
+            onClick = { onSelect }
             style = { styles.endMeetingButton }
             type = { BUTTON_TYPES.DESTRUCTIVE } />
     );
diff --git a/react/features/conference/components/native/carmode/SoundDeviceButton.tsx b/react/features/conference/components/native/carmode/SoundDeviceButton.tsx
index d167b1ff7..0e6d4dcbe 100644
--- a/react/features/conference/components/native/carmode/SoundDeviceButton.tsx
+++ b/react/features/conference/components/native/carmode/SoundDeviceButton.tsx
@@ -28,10 +28,9 @@ const SelectSoundDevice = () : JSX.Element => {
     return (
         <Button
             accessibilityLabel = 'carmode.actions.selectSoundDevice'
-            // @ts-ignore
             icon = { AudioIcon }
-            label = 'carmode.actions.selectSoundDevice'
-            onPress = { onSelect }
+            labelKey = 'carmode.actions.selectSoundDevice'
+            onClick = { onSelect }
             style = { styles.soundDeviceButton }
             type = { BUTTON_TYPES.SECONDARY } />
     );
diff --git a/react/features/lobby/components/native/LobbyScreen.js b/react/features/lobby/components/native/LobbyScreen.js
index a2a7c6c57..e1b0a0699 100644
--- a/react/features/lobby/components/native/LobbyScreen.js
+++ b/react/features/lobby/components/native/LobbyScreen.js
@@ -190,15 +190,15 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
             <View style = { styles.passwordJoinButtonsWrapper }>
                 <Button
                     accessibilityLabel = 'lobby.backToKnockModeButton'
-                    label = 'lobby.backToKnockModeButton'
-                    onPress = { this._onSwitchToKnockMode }
+                    labelKey = 'lobby.backToKnockModeButton'
+                    onClick = { this._onSwitchToKnockMode }
                     style = { styles.lobbyButton }
                     type = { BUTTON_TYPES.PRIMARY } />
                 <Button
                     accessibilityLabel = 'lobby.passwordJoinButton'
                     disabled = { !this.state.password }
-                    label = 'lobby.passwordJoinButton'
-                    onPress = { this._onJoinWithPassword }
+                    labelKey = 'lobby.passwordJoinButton'
+                    onClick = { this._onJoinWithPassword }
                     style = { styles.lobbyButton }
                     type = { BUTTON_TYPES.PRIMARY } />
             </View>
@@ -245,8 +245,8 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                     _knocking && _isLobbyChatActive
                     && <Button
                         accessibilityLabel = 'toolbar.openChat'
-                        label = 'toolbar.openChat'
-                        onPress = { this._onNavigateToLobbyChat }
+                        labelKey = 'toolbar.openChat'
+                        onClick = { this._onNavigateToLobbyChat }
                         style = { styles.openChatButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
@@ -255,8 +255,8 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                     || <Button
                         accessibilityLabel = 'lobby.knockButton'
                         disabled = { !displayName }
-                        label = 'lobby.knockButton'
-                        onPress = { this._onAskToJoin }
+                        labelKey = 'lobby.knockButton'
+                        onClick = { this._onAskToJoin }
                         style = { styles.lobbyButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
@@ -264,8 +264,8 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
                     _renderPassword
                     && <Button
                         accessibilityLabel = 'lobby.enterPasswordButton'
-                        label = 'lobby.enterPasswordButton'
-                        onPress = { this._onSwitchToPasswordMode }
+                        labelKey = 'lobby.enterPasswordButton'
+                        onClick = { this._onSwitchToPasswordMode }
                         style = { styles.enterPasswordButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx
index b89e4fe2d..76ab4b77c 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx
@@ -25,8 +25,8 @@ const AddBreakoutRoomButton = () => {
     return (
         <Button
             accessibilityLabel = 'breakoutRooms.actions.add'
-            label = 'breakoutRooms.actions.add'
-            onPress = { onAdd }
+            labelKey = 'breakoutRooms.actions.add'
+            onClick = { onAdd }
             style = { styles.button }
             type = { BUTTON_TYPES.SECONDARY } />
     );
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx
index 23cef447b..3d2b246c3 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx
@@ -25,9 +25,9 @@ const AutoAssignButton = () => {
     return (
         <Button
             accessibilityLabel = 'breakoutRooms.actions.autoAssign'
-            label = 'breakoutRooms.actions.autoAssign'
+            labelKey = 'breakoutRooms.actions.autoAssign'
             labelStyle = { styles.autoAssignLabel }
-            onPress = { onAutoAssign }
+            onClick = { onAutoAssign }
             style = { styles.autoAssignButton }
             type = { BUTTON_TYPES.TERTIARY } />
     );
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx
index 4af8d4859..e51ed4068 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx
@@ -29,8 +29,8 @@ const LeaveBreakoutRoomButton = () => {
     return (
         <Button
             accessibilityLabel = 'breakoutRooms.actions.leaveBreakoutRoom'
-            label = 'breakoutRooms.actions.leaveBreakoutRoom'
-            onPress = { onLeave }
+            labelKey = 'breakoutRooms.actions.leaveBreakoutRoom'
+            onClick = { onLeave }
             style = { styles.button }
             type = { BUTTON_TYPES.DESTRUCTIVE } />
     );
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/AddBreakoutRoomButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/AddBreakoutRoomButton.tsx
index 806ec7b1c..a98bc328e 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/AddBreakoutRoomButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/AddBreakoutRoomButton.tsx
@@ -20,7 +20,7 @@ export const AddBreakoutRoomButton = () => {
         <Button
             accessibilityLabel = { t('breakoutRooms.actions.add') }
             fullWidth = { true }
-            label = { t('breakoutRooms.actions.add') }
+            labelKey = { 'breakoutRooms.actions.add' }
             onClick = { onAdd }
             type = { BUTTON_TYPES.SECONDARY } />
     );
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/AutoAssignButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/AutoAssignButton.tsx
index e4be0b60c..25c58f65f 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/AutoAssignButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/AutoAssignButton.tsx
@@ -20,7 +20,7 @@ export const AutoAssignButton = () => {
         <Button
             accessibilityLabel = { t('breakoutRooms.actions.autoAssign') }
             fullWidth = { true }
-            label = { t('breakoutRooms.actions.autoAssign') }
+            labelKey = { 'breakoutRooms.actions.autoAssign' }
             onClick = { onAutoAssign }
             type = { BUTTON_TYPES.TERTIARY } />
     );
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx
index 5275a5c7f..733b3e3c7 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx
@@ -45,7 +45,7 @@ const JoinActionButton = ({ room }: Props) => {
         <Button
             accessibilityLabel = { t('breakoutRooms.actions.join') }
             className = { styles.button }
-            label = { t('breakoutRooms.actions.join') }
+            labelKey = { 'breakoutRooms.actions.join' }
             onClick = { onJoinRoom }
             size = 'small'
             testId = { `join-room-${room.id}` } />
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx
index c2a8d1a56..990cc2ebf 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/LeaveButton.tsx
@@ -23,7 +23,7 @@ export const LeaveButton = () => {
         <Button
             accessibilityLabel = { t('breakoutRooms.actions.leaveBreakoutRoom') }
             fullWidth = { true }
-            label = { t('breakoutRooms.actions.leaveBreakoutRoom') }
+            labelKey = { 'breakoutRooms.actions.leaveBreakoutRoom' }
             onClick = { onLeave }
             type = { BUTTON_TYPES.DESTRUCTIVE } />
     );
diff --git a/react/features/participants-pane/components/native/LobbyParticipantItem.js b/react/features/participants-pane/components/native/LobbyParticipantItem.js
index c62061258..0ac7b989c 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantItem.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantItem.js
@@ -39,8 +39,8 @@ export const LobbyParticipantItem = ({ participant: p }: Props) => {
             videoMediaState = { MEDIA_STATE.NONE }>
             <Button
                 accessibilityLabel = 'lobby.admit'
-                label = 'lobby.admit'
-                onPress = { admit }
+                labelKey = 'lobby.admit'
+                onClick = { admit }
                 style = { styles.participantActionsButtonAdmit }
                 type = { BUTTON_TYPES.PRIMARY } />
         </ParticipantItem>
diff --git a/react/features/participants-pane/components/native/LobbyParticipantList.js b/react/features/participants-pane/components/native/LobbyParticipantList.js
index 285bd2cb5..4d322b8cf 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantList.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantList.js
@@ -39,9 +39,9 @@ const LobbyParticipantList = () => {
                 participants.length > 1 && (
                     <Button
                         accessibilityLabel = 'lobby.admitAll'
-                        label = 'lobby.admitAll'
+                        labelKey = 'lobby.admitAll'
                         labelStyle = { styles.admitAllButtonLabel }
-                        onPress = { admitAll }
+                        onClick = { admitAll }
                         type = { BUTTON_TYPES.TERTIARY } />
                 )
             }
diff --git a/react/features/participants-pane/components/native/MeetingParticipantList.js b/react/features/participants-pane/components/native/MeetingParticipantList.js
index 3d0cddb5c..4b2672f27 100644
--- a/react/features/participants-pane/components/native/MeetingParticipantList.js
+++ b/react/features/participants-pane/components/native/MeetingParticipantList.js
@@ -229,8 +229,8 @@ class MeetingParticipantList extends PureComponent<Props> {
                     && <Button
                         accessibilityLabel = 'participantsPane.actions.invite'
                         icon = { this._renderInviteMoreIcon }
-                        label = 'participantsPane.actions.invite'
-                        onPress = { this._onInvite }
+                        labelKey = 'participantsPane.actions.invite'
+                        onClick = { this._onInvite }
                         style = { styles.inviteButton }
                         type = { BUTTON_TYPES.PRIMARY } />
                 }
diff --git a/react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx b/react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx
index 8064c6b2c..b8c4787cb 100644
--- a/react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx
+++ b/react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx
@@ -40,8 +40,8 @@ const ParticipantsPaneFooter = (): JSX.Element => {
                 showMuteAll && (
                     <Button
                         accessibilityLabel = 'participantsPane.actions.muteAll'
-                        label = 'participantsPane.actions.muteAll'
-                        onPress = { muteAll }
+                        labelKey = 'participantsPane.actions.muteAll'
+                        onClick = { muteAll }
                         type = { BUTTON_TYPES.SECONDARY } />
                 )
             }
diff --git a/react/features/participants-pane/components/web/InviteButton.tsx b/react/features/participants-pane/components/web/InviteButton.tsx
index 6676a78f4..6344ab813 100644
--- a/react/features/participants-pane/components/web/InviteButton.tsx
+++ b/react/features/participants-pane/components/web/InviteButton.tsx
@@ -25,7 +25,7 @@ export const InviteButton = () => {
             accessibilityLabel = { t('participantsPane.actions.invite') }
             fullWidth = { true }
             icon = { IconInviteMore }
-            label = { t('participantsPane.actions.invite') }
+            labelKey = { 'participantsPane.actions.invite' }
             onClick = { onInvite }
             type = { BUTTON_TYPES.PRIMARY } />
     );
diff --git a/react/features/participants-pane/components/web/LobbyParticipantItem.js b/react/features/participants-pane/components/web/LobbyParticipantItem.js
index 551c69efc..d9576ddcd 100644
--- a/react/features/participants-pane/components/web/LobbyParticipantItem.js
+++ b/react/features/participants-pane/components/web/LobbyParticipantItem.js
@@ -74,7 +74,7 @@ export const LobbyParticipantItem = ({
         <Button
             accessibilityLabel = { `${t('lobby.admit')} ${p.name}` }
             className = { styles.button }
-            label = { t('lobby.admit') }
+            labelKey = { 'lobby.admit' }
             onClick = { admit }
             size = 'small'
             testId = { `admit-${id}` } />);
@@ -127,7 +127,7 @@ export const LobbyParticipantItem = ({
                 <Button
                     accessibilityLabel = { `${t('lobby.reject')} ${p.name}` }
                     className = { styles.button }
-                    label = { t('lobby.reject') }
+                    labelKey = { 'lobby.reject' }
                     onClick = { reject }
                     size = 'small'
                     testId = { `reject-${id}` }
diff --git a/react/features/participants-pane/components/web/ParticipantsPane.tsx b/react/features/participants-pane/components/web/ParticipantsPane.tsx
index d360443aa..0861b8b1a 100644
--- a/react/features/participants-pane/components/web/ParticipantsPane.tsx
+++ b/react/features/participants-pane/components/web/ParticipantsPane.tsx
@@ -262,7 +262,7 @@ class ParticipantsPane extends Component<Props, State> {
                             {_showMuteAllButton && (
                                 <Button
                                     accessibilityLabel = { t('participantsPane.actions.muteAll') }
-                                    label = { t('participantsPane.actions.muteAll') }
+                                    labelKey = { 'participantsPane.actions.muteAll' }
                                     onClick = { this._onMuteAll }
                                     type = { BUTTON_TYPES.SECONDARY } />
                             )}
diff --git a/react/features/polls/components/native/PollAnswer.js b/react/features/polls/components/native/PollAnswer.js
index bf0200ec3..a5b0456ff 100644
--- a/react/features/polls/components/native/PollAnswer.js
+++ b/react/features/polls/components/native/PollAnswer.js
@@ -53,15 +53,15 @@ const PollAnswer = (props: AbstractProps) => {
             <View style = { chatStyles.buttonRow }>
                 <Button
                     accessibilityLabel = 'polls.answer.skip'
-                    label = 'polls.answer.skip'
-                    onPress = { changingVote ? skipChangeVote : skipAnswer }
+                    labelKey = 'polls.answer.skip'
+                    onClick = { changingVote ? skipChangeVote : skipAnswer }
                     style = { chatStyles.pollCreateButton }
                     type = { SECONDARY } />
                 <Button
                     accessibilityLabel = 'polls.answer.submit'
                     disabled = { isSubmitAnswerDisabled(checkBoxStates) }
-                    label = 'polls.answer.submit'
-                    onPress = { submitAnswer }
+                    labelKey = 'polls.answer.submit'
+                    onClick = { submitAnswer }
                     style = { chatStyles.pollCreateButton }
                     type = { PRIMARY } />
             </View>
diff --git a/react/features/polls/components/native/PollCreate.js b/react/features/polls/components/native/PollCreate.js
index 008f199bf..9a8fafdf7 100644
--- a/react/features/polls/components/native/PollCreate.js
+++ b/react/features/polls/components/native/PollCreate.js
@@ -160,8 +160,8 @@ const PollCreate = (props: AbstractProps) => {
                     <Button
                         accessibilityLabel = 'polls.create.addOption'
                         disabled = { answers.length >= ANSWERS_LIMIT }
-                        label = 'polls.create.addOption'
-                        onPress = { () => {
+                        labelKey = 'polls.create.addOption'
+                        onClick = { () => {
                             // adding and answer
                             addAnswer();
                             requestFocus(answers.length);
@@ -172,15 +172,15 @@ const PollCreate = (props: AbstractProps) => {
                         style = { buttonRowStyles }>
                         <Button
                             accessibilityLabel = 'polls.create.cancel'
-                            label = 'polls.create.cancel'
-                            onPress = { () => setCreateMode(false) }
+                            labelKey = 'polls.create.cancel'
+                            onClick = { () => setCreateMode(false) }
                             style = { chatStyles.pollCreateButton }
                             type = { SECONDARY } />
                         <Button
                             accessibilityLabel = 'polls.create.send'
                             disabled = { isSubmitDisabled }
-                            label = 'polls.create.send'
-                            onPress = { onSubmit }
+                            labelKey = 'polls.create.send'
+                            onClick = { onSubmit }
                             style = { chatStyles.pollCreateButton }
                             type = { PRIMARY } />
                     </View>
diff --git a/react/features/polls/components/native/PollsPane.js b/react/features/polls/components/native/PollsPane.js
index 688904f48..c7c5fa05f 100644
--- a/react/features/polls/components/native/PollsPane.js
+++ b/react/features/polls/components/native/PollsPane.js
@@ -47,8 +47,8 @@ const PollsPane = (props: AbstractProps) => {
             {
                 !createMode && <Button
                     accessibilityLabel = 'polls.create.create'
-                    label = 'polls.create.create'
-                    onPress = { onCreate }
+                    labelKey = 'polls.create.create'
+                    onClick = { onCreate }
                     style = { chatStyles.createPollButton }
                     type = { BUTTON_TYPES.PRIMARY } />
             }
diff --git a/react/features/polls/components/web/PollAnswer.tsx b/react/features/polls/components/web/PollAnswer.tsx
index 66f10928d..bab97eb75 100644
--- a/react/features/polls/components/web/PollAnswer.tsx
+++ b/react/features/polls/components/web/PollAnswer.tsx
@@ -65,14 +65,14 @@ const PollAnswer = ({
                     accessibilityLabel = { t('polls.answer.skip') }
                     className = { styles.buttonMargin }
                     fullWidth = { true }
-                    label = { t('polls.answer.skip') }
+                    labelKey = { 'polls.answer.skip' }
                     onClick = { changingVote ? skipChangeVote : skipAnswer }
                     type = { BUTTON_TYPES.SECONDARY } />
                 <Button
                     accessibilityLabel = { t('polls.answer.submit') }
                     disabled = { isSubmitAnswerDisabled(checkBoxStates) }
                     fullWidth = { true }
-                    label = { t('polls.answer.submit') }
+                    labelKey = { 'polls.answer.submit' }
                     onClick = { submitAnswer } />
             </div>
         </div>
diff --git a/react/features/polls/components/web/PollCreate.tsx b/react/features/polls/components/web/PollCreate.tsx
index d10d90383..e7b04a24d 100644
--- a/react/features/polls/components/web/PollCreate.tsx
+++ b/react/features/polls/components/web/PollCreate.tsx
@@ -253,7 +253,7 @@ const PollCreate = ({
                     accessibilityLabel = { t('polls.create.addOption') }
                     disabled = { answers.length >= ANSWERS_LIMIT }
                     fullWidth = { true }
-                    label = { t('polls.create.addOption') }
+                    labelKey = { 'polls.create.addOption' }
                     onClick = { () => {
                         addAnswer();
                         requestFocus(answers.length);
@@ -266,7 +266,7 @@ const PollCreate = ({
                 accessibilityLabel = { t('polls.create.cancel') }
                 className = { styles.buttonMargin }
                 fullWidth = { true }
-                label = { t('polls.create.cancel') }
+                labelKey = { 'polls.create.cancel' }
                 onClick = { () => setCreateMode(false) }
                 type = { BUTTON_TYPES.SECONDARY } />
             <Button
@@ -274,7 +274,7 @@ const PollCreate = ({
                 disabled = { isSubmitDisabled }
                 fullWidth = { true }
                 isSubmit = { true }
-                label = { t('polls.create.send') } />
+                labelKey = { 'polls.create.send' } />
         </div>
     </form>);
 
diff --git a/react/features/polls/components/web/PollsPane.tsx b/react/features/polls/components/web/PollsPane.tsx
index 3d8a8f63a..295368df7 100644
--- a/react/features/polls/components/web/PollsPane.tsx
+++ b/react/features/polls/components/web/PollsPane.tsx
@@ -26,8 +26,7 @@ const PollsPane = (props: AbstractProps) => {
                 <Button
                     accessibilityLabel = { t('polls.create.create') }
                     fullWidth = { true }
-                    label = { t('polls.create.create') }
-                    // eslint-disable-next-line react/jsx-no-bind
+                    labelKey = { 'polls.create.create' }
                     onClick = { onCreate } />
             </div>
         </div>;
diff --git a/react/features/prejoin/components/Prejoin.native.tsx b/react/features/prejoin/components/Prejoin.native.tsx
index d55aaf1ac..71728f1f7 100644
--- a/react/features/prejoin/components/Prejoin.native.tsx
+++ b/react/features/prejoin/components/Prejoin.native.tsx
@@ -158,14 +158,14 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
                     <Button
                         accessibilityLabel = 'prejoin.joinMeeting'
                         disabled = { joinButtonDisabled }
-                        label = 'prejoin.joinMeeting'
-                        onPress = { onJoin }
+                        labelKey = 'prejoin.joinMeeting'
+                        onClick = { onJoin }
                         style = { styles.prejoinButton }
                         type = { PRIMARY } />
                     <Button
                         accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
-                        label = 'prejoin.joinMeetingInLowBandwidthMode'
-                        onPress = { onJoinLowBandwidth }
+                        labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
+                        onClick = { onJoinLowBandwidth }
                         style = { styles.prejoinButton }
                         type = { SECONDARY } />
                 </View>
diff --git a/react/features/reactions/components/native/RaiseHandButton.js b/react/features/reactions/components/native/RaiseHandButton.js
index e3c0a4461..d2da4e494 100644
--- a/react/features/reactions/components/native/RaiseHandButton.js
+++ b/react/features/reactions/components/native/RaiseHandButton.js
@@ -151,8 +151,8 @@ class RaiseHandButton extends Component<Props, *> {
             <Button
                 accessibilityLabel = { this.accessibilityLabel }
                 icon = { this._renderRaiseHandEmoji }
-                label = { this._getLabel() }
-                onPress = { this._onClick }
+                labelKey = { this._getLabel() }
+                onClick = { this._onClick }
                 style = { styles.raiseHandButton }
                 type = { BUTTON_TYPES.SECONDARY } />
         );
diff --git a/react/features/recording/components/Recording/native/HighlightDialog.js b/react/features/recording/components/Recording/native/HighlightDialog.js
index 6043a2d70..dcee3083d 100644
--- a/react/features/recording/components/Recording/native/HighlightDialog.js
+++ b/react/features/recording/components/Recording/native/HighlightDialog.js
@@ -30,14 +30,14 @@ const HighlightDialog = () => {
                 <View style = { styles.highlightDialogButtonsContainer } >
                     <Button
                         accessibilityLabel = 'dialog.Cancel'
-                        label = 'dialog.Cancel'
-                        onPress = { closeDialog }
+                        labelKey = 'dialog.Cancel'
+                        onClick = { closeDialog }
                         type = { BUTTON_TYPES.SECONDARY } />
                     <View style = { styles.highlightDialogButtonsSpace } />
                     <Button
                         accessibilityLabel = 'recording.highlight'
-                        label = 'recording.highlight'
-                        onPress = { highlightMoment }
+                        labelKey = 'recording.highlight'
+                        onClick = { highlightMoment }
                         type = { BUTTON_TYPES.PRIMARY } />
                 </View>
             </View>
diff --git a/react/features/security/components/security-dialog/native/SecurityDialog.js b/react/features/security/components/security-dialog/native/SecurityDialog.js
index 77c79d48b..2676ee8dd 100644
--- a/react/features/security/components/security-dialog/native/SecurityDialog.js
+++ b/react/features/security/components/security-dialog/native/SecurityDialog.js
@@ -221,17 +221,17 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <>
                     <Button
                         accessibilityLabel = 'dialog.Remove'
-                        label = 'dialog.Remove'
+                        labelKey = 'dialog.Remove'
                         labelStyle = { styles.passwordSetupButtonLabel }
-                        onPress = { this._onCancel }
+                        onClick = { this._onCancel }
                         type = { BUTTON_TYPES.TERTIARY } />
                     {
                         _password
                         && <Button
                             accessibilityLabel = 'dialog.copy'
-                            label = 'dialog.copy'
+                            labelKey = 'dialog.copy'
                             labelStyle = { styles.passwordSetupButtonLabel }
-                            onPress = { this._onCopy }
+                            onClick = { this._onCopy }
                             type = { BUTTON_TYPES.TERTIARY } />
                     }
                 </>
@@ -241,15 +241,15 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <>
                     <Button
                         accessibilityLabel = 'dialog.Cancel'
-                        label = 'dialog.Cancel'
+                        labelKey = 'dialog.Cancel'
                         labelStyle = { styles.passwordSetupButtonLabel }
-                        onPress = { this._onCancel }
+                        onClick = { this._onCancel }
                         type = { BUTTON_TYPES.TERTIARY } />
                     <Button
                         accessibilityLabel = 'dialog.add'
-                        label = 'dialog.add'
+                        labelKey = 'dialog.add'
                         labelStyle = { styles.passwordSetupButtonLabel }
-                        onPress = { this._onSubmit }
+                        onClick = { this._onSubmit }
                         type = { BUTTON_TYPES.TERTIARY } />
                 </>
             );
@@ -258,9 +258,9 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <Button
                     accessibilityLabel = 'info.addPassword'
                     disabled = { !_isModerator }
-                    label = 'info.addPassword'
+                    labelKey = 'info.addPassword'
                     labelStyle = { styles.passwordSetupButtonLabel }
-                    onPress = { this._onAddPassword }
+                    onClick = { this._onAddPassword }
                     type = { BUTTON_TYPES.TERTIARY } />
             );
         }
@@ -274,9 +274,9 @@ class SecurityDialog extends PureComponent<Props, State> {
                         </Text>
                         <Button
                             accessibilityLabel = 'dialog.Remove'
-                            label = 'dialog.Remove'
+                            labelKey = 'dialog.Remove'
                             labelStyle = { styles.passwordSetupButtonLabel }
-                            onPress = { this._onCancel }
+                            onClick = { this._onCancel }
                             type = { BUTTON_TYPES.TERTIARY } />
                     </View>
                 );
@@ -289,9 +289,9 @@ class SecurityDialog extends PureComponent<Props, State> {
                         <Button
                             accessibilityLabel = 'info.addPassword'
                             disabled = { !_isModerator }
-                            label = 'info.addPassword'
+                            labelKey = 'info.addPassword'
                             labelStyle = { styles.passwordSetupButtonLabel }
-                            onPress = { this._onAddPassword }
+                            onClick = { this._onAddPassword }
                             type = { BUTTON_TYPES.TERTIARY } />
                     </View>
                 );