HelpButton: general fixes and VR fixes (#3949)

pinterest · Jan 17, 2025 · 1988d1e · 1988d1e
1 parent b492883
commit 1988d1e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/packages/gestalt/src/HelpButton.css b/packages/gestalt/src/HelpButton.css
@@ -7,3 +7,8 @@
   /* stylelint-disable-next-line declaration-no-important */
   color: var(--color-text-dark) !important;
 }
+
+.focused:focus {
+  outline: 2px solid var(--sema-color-border-focus-outer-default);
+  outline-offset: 0;
+}
diff --git a/packages/gestalt/src/HelpButton.tsx b/packages/gestalt/src/HelpButton.tsx
@@ -1,17 +1,20 @@
 import { ComponentProps, ReactElement, useId, useRef, useState } from 'react';
+import classnames from 'classnames';
 import Box from './Box';
 import { useColorScheme } from './contexts/ColorSchemeProvider';
 import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
 import Flex from './Flex';
+import focusStyles from './Focus.css';
 import styles from './HelpButton.css';
 import Icon from './Icon';
 import { ESCAPE, TAB } from './keyCodes';
 import Layer from './Layer';
 import Link from './Link';
 import InternalPopover from './Popover/InternalPopover';
+import MaybeTooltip from './sharedSubcomponents/MaybeTooltip';
 import TapArea from './TapArea';
 import Text from './Text';
-import Tooltip from './Tooltip';
+import useFocusVisible from './useFocusVisible';
 import useInExperiment from './useInExperiment';
 import { CompositeZIndex, FixedZIndex, Indexable } from './zIndex';
 
@@ -87,12 +90,14 @@ export default function HelpButton({
   zIndex,
 }: Props) {
   const tapAreaRef = useRef<null | HTMLDivElement>(null);
-  const textRef = useRef<null | HTMLElement>(null);
+  const textRef = useRef<null | HTMLDivElement>(null);
 
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
 
+  const { isFocusVisible } = useFocusVisible();
+
   // Define where the focused content stays
   const [innerModalFocus, setInnerModalFocus] = useState(false);
 
@@ -185,15 +190,25 @@ export default function HelpButton({
          * `id` - used to tracking children by line 130
          * `tabIndex={0}` - It's used to make the text element as a focusable element
          */}
-        <Box ref={textRef} id={`helpButtonText-${popoverId}`} tabIndex={0}>
+        <div
+          ref={textRef}
+          className={classnames({
+            [focusStyles.hideOutline]: !isFocusVisible,
+            [focusStyles.accessibilityOutline]: !isInVRExperiment && isFocusVisible,
+            [styles.focused]: isInVRExperiment && isFocusVisible,
+          })}
+          id={`helpButtonText-${popoverId}`}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+        >
           {typeof text === 'string' ? (
             <Text align="start">{text}</Text>
           ) : (
             <span className={textColorOverrideStyles}>{text}</span>
           )}
-        </Box>
+        </div>
         {link && link?.href && (
-          <Box display="block" marginTop={3} width="100%">
+          <Box display="block" marginTop={isInVRExperiment ? 5 : 3} width="100%">
             <Text>
               <Link
                 ref={link.ref}
@@ -218,11 +233,14 @@ export default function HelpButton({
   return (
     // The only purpose of this Flex is to make zIndex work (Tooltip over Popover).
     <Flex alignItems="center" flex="none" justifyContent="center">
-      <Tooltip
-        accessibilityLabel=""
-        idealDirection={idealDirection}
-        text={tooltipMessage}
-        zIndex={tooltipZIndex}
+      <MaybeTooltip
+        disabled={open}
+        tooltip={{
+          idealDirection,
+          text: tooltipMessage,
+          zIndex: tooltipZIndex,
+          accessibilityLabel: '',
+        }}
       >
         <TapArea
           ref={tapAreaRef}
@@ -260,7 +278,7 @@ export default function HelpButton({
             />
           </Box>
         </TapArea>
-      </Tooltip>
+      </MaybeTooltip>
       {open &&
         (isWithinFixedContainer ? (
           // This Box is  handling the zIndex work (Tooltip over Popover)