fix focusable prop

Expensify · Mar 7, 2023 · 6520062 · 6520062
1 parent cd93903
commit 6520062
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -40,7 +40,9 @@ const propTypes = {
 const BaseQuickEmojiReactions = props => (
     <View style={styles.quickReactionsContainer}>
         {_.map(CONST.QUICK_REACTIONS, emoji => (
-            <Tooltip text={`:${emoji.name}:`} key={emoji.name}>
+
+            // Note: focus is handled by the Pressable component in EmojiReactionBubble
+            <Tooltip text={`:${emoji.name}:`} key={emoji.name} focusable={false}>
                 <EmojiReactionBubble
                     emojiName={emoji.name}
                     emojiCodes={[getPreferredEmojiCode(emoji, props.preferredSkinTone)]}

diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
@@ -150,6 +150,7 @@ class Tooltip extends PureComponent {
             <View
                 ref={el => this.wrapperView = el}
                 onBlur={this.hideTooltip}
+                focusable={this.props.focusable}
             >
                 {this.props.children}
             </View>

diff --git a/src/components/Tooltip/tooltipPropTypes.js b/src/components/Tooltip/tooltipPropTypes.js
@@ -32,6 +32,9 @@ const propTypes = {
 
     /** Maximum number of lines to show in tooltip */
     numberOfLines: PropTypes.number,
+
+    /** Accessibility prop. Sets the tabindex to 0 if true. Default is true. */
+    focusable: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -42,6 +45,7 @@ const defaultProps = {
     text: '',
     maxWidth: variables.sideBarWidth,
     numberOfLines: CONST.TOOLTIP_MAX_LINES,
+    focusable: true,
 };
 
 export {