Merge pull request #6957 from BlueWallet/tooltipaccessbility

ADD: Tooltip for header buttons for accessbility

components/AddWalletButton.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, TouchableOpacity, GestureResponderEvent } from 'react-native';
+import { Icon } from '@rneui/themed';
+import { useTheme } from './themes';
+import ToolTipMenu from './TooltipMenu';
+import { CommonToolTipActions } from '../typings/CommonToolTipActions';
+import loc from '../loc';
+import { navigationRef } from '../NavigationService';
+
+type AddWalletButtonProps = {
+  onPress?: (event: GestureResponderEvent) => void;
+};
+
+const styles = StyleSheet.create({
+  ball: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+});
+
+const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
+  const { colors } = useTheme();
+  const stylesHook = StyleSheet.create({
+    ball: {
+      backgroundColor: colors.buttonBackgroundColor,
+    },
+  });
+
+  const onPressMenuItem = useCallback((action: string) => {
+    switch (action) {
+      case CommonToolTipActions.ImportWallet.id:
+        navigationRef.current?.navigate('AddWalletRoot', { screen: 'ImportWallet' });
+        break;
+      default:
+        break;
+    }
+  }, []);
+
+  const actions = useMemo(() => [CommonToolTipActions.ImportWallet], []);
+
+  return (
+    <ToolTipMenu accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPressMenuItem={onPressMenuItem} actions={actions}>
+      <TouchableOpacity style={[styles.ball, stylesHook.ball]} onPress={onPress}>
+        <Icon name="add" size={22} type="ionicons" color={colors.foregroundColor} />
+      </TouchableOpacity>
+    </ToolTipMenu>
+  );
+};
+
+export default AddWalletButton;

components/Header.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import PlusIcon from './icons/PlusIcon';
 import { useTheme } from './themes';
+import AddWalletButton from './AddWalletButton';
 
 interface HeaderProps {
   leftText: string;
@@ -25,7 +25,7 @@ export const Header: React.FC<HeaderProps> = ({ leftText, isDrawerList, onNewWal
   return (
     <View style={[styles.root, styleWithProps.root]}>
       <Text style={[styles.text, styleWithProps.text]}>{leftText}</Text>
-      {onNewWalletPress && <PlusIcon onPress={onNewWalletPress} />}
+      {onNewWalletPress && <AddWalletButton onPress={onNewWalletPress} />}
     </View>
   );
 };

components/icons/PlusIcon.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
-import { Icon } from '@rneui/themed';
-
-import { useTheme } from '../themes';
-import loc from '../../loc';
-
-type PlusIconProps = {
-  onPress: () => void;
-};
-
-const styles = StyleSheet.create({
-  ball: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    justifyContent: 'center',
-    alignContent: 'center',
-  } as ViewStyle,
-});
-
-const PlusIcon: React.FC<PlusIconProps> = ({ onPress }) => {
-  const { colors } = useTheme();
-  const stylesHook = StyleSheet.create({
-    ball: {
-      backgroundColor: colors.buttonBackgroundColor,
-    },
-  });
-
-  return (
-    <TouchableOpacity
-      style={[styles.ball, stylesHook.ball]}
-      accessibilityLabel={loc.wallets.add_title}
-      onPress={onPress}
-      accessibilityRole="button"
-    >
-      <Icon name="add" size={22} type="ionicons" color={colors.foregroundColor} />
-    </TouchableOpacity>
-  );
-};
-
-export default PlusIcon;

components/icons/SettingsButton.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Icon } from '@rneui/themed';
 import { useTheme } from '../themes';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import loc from '../../loc';
+import ToolTipMenu from '../TooltipMenu';
+import { CommonToolTipActions } from '../../typings/CommonToolTipActions';
 
 const SettingsButton = () => {
   const { colors } = useTheme();
@@ -12,16 +14,32 @@ const SettingsButton = () => {
     navigate('Settings');
   };
 
+  const onPressMenuItem = useCallback(
+    (menuItem: string) => {
+      switch (menuItem) {
+        case CommonToolTipActions.ManageWallet.id:
+          navigate('ManageWallets');
+          break;
+        default:
+          break;
+      }
+    },
+    [navigate],
+  );
+
+  const actions = useMemo(() => [CommonToolTipActions.ManageWallet], []);
   return (
-    <TouchableOpacity
+    <ToolTipMenu onPressMenuItem={onPressMenuItem} actions={actions}>
-      accessibilityRole="button"
+      <TouchableOpacity
-      accessibilityLabel={loc.settings.default_title}
+        accessibilityRole="button"
-      testID="SettingsButton"
+        accessibilityLabel={loc.settings.default_title}
-      style={[style.buttonStyle, { backgroundColor: colors.lightButton }]}
+        testID="SettingsButton"
-      onPress={onPress}
+        style={[style.buttonStyle, { backgroundColor: colors.lightButton }]}
-    >
+        onPress={onPress}
-      <Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
+      >
-    </TouchableOpacity>
+        <Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
+      </TouchableOpacity>
+    </ToolTipMenu>
   );
 };
 

navigation/DetailViewScreensStack.tsx

@@ -58,7 +58,6 @@ import SignVerifyStackRoot from './SignVerifyStack';
 import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
-import PlusIcon from '../components/icons/PlusIcon';
 import SettingsButton from '../components/icons/SettingsButton';
 import ExportMultisigCoordinationSetupStack from './ExportMultisigCoordinationSetupStack';
 import ManageWallets from '../screen/wallets/ManageWallets';
@@ -66,6 +65,7 @@ import getWalletTransactionsOptions from './helpers/getWalletTransactionsOptions
 import { useSettings } from '../hooks/context/useSettings';
 import { useStorage } from '../hooks/context/useStorage';
 import WalletTransactions from '../screen/wallets/WalletTransactions';
+import AddWalletButton from '../components/AddWalletButton';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
@@ -82,7 +82,7 @@ const DetailViewStackScreensStack = () => {
   const RightBarButtons = useMemo(
     () => (
       <>
-        <PlusIcon onPress={navigateToAddWallet} />
+        <AddWalletButton onPress={navigateToAddWallet} />
         <View style={styles.width24} />
         <SettingsButton />
       </>

typings/CommonToolTipActions.ts

@@ -7,6 +7,8 @@ const keys = {
   OpenInBlockExplorer: 'open_in_blockExplorer',
   CopyAmount: 'copyAmount',
   CopyNote: 'copyNote',
+  ManageWallets: 'manageWallets',
+  ImportWallet: 'importWallet',
   HideBalance: 'hideBalance',
   ViewInBitcoin: 'viewInBitcoin',
   ViewInSats: 'viewInSats',
@@ -35,6 +37,12 @@ const icons = {
   Note: {
     iconValue: 'note.text',
   },
+  ManageWallets: {
+    iconValue: 'slider.horizontal.3',
+  },
+  ImportWallet: {
+    iconValue: 'square.and.arrow.down.on.square',
+  },
   ViewInBitcoin: {
     iconValue: 'bitcoinsign.circle',
   },
@@ -92,6 +100,16 @@ export const CommonToolTipActions = {
     text: loc.transactions.details_copy_note,
     icon: icons.Clipboard,
   },
+  ManageWallet: {
+    id: keys.ManageWallets,
+    text: loc.wallets.manage_title,
+    icon: icons.ManageWallets,
+  },
+  ImportWallet: {
+    id: keys.ImportWallet,
+    text: loc.wallets.add_import_wallet,
+    icon: icons.ImportWallet,
+  },
   HideBalance: {
     id: keys.HideBalance,
     text: loc.transactions.details_balance_hide,