From 51a5f7feee29382caf14ba5ba4673e282bbb93c2 Mon Sep 17 00:00:00 2001
From: Russell Anderson <randerson@d2iq.com>
Date: Tue, 25 Oct 2022 10:16:22 -0500
Subject: [PATCH] fix: forwardrefs to FocusStyleManager children (#843)

I am not sure that I did this correctly. This is a tough then where the
child component could literally be anything, so typing the ref is very
difficult. In some cases its a button, others an a, sometimes a label.
In any event, for the ui-kit components that are children of
FocusStyleManager, I wrapped them in forwardRef. Resolves the console
warning issues for the pages that use FocusStyleManager.

Closes D2IQ-93522
---
 packages/button/components/ButtonBase.tsx     | 192 +++++++++---------
 .../__snapshots__/ButtonBase.test.tsx.snap    |   5 +
 packages/link/components/UnstyledLink.tsx     |  14 +-
 packages/link/types.ts                        |   4 +-
 .../tests/__snapshots__/Modal.test.tsx.snap   | 102 ++++++----
 .../components/SegmentedControlButton.tsx     |  34 +++-
 .../shared/components/FocusStyleManager.tsx   |   2 +-
 7 files changed, 205 insertions(+), 148 deletions(-)

diff --git a/packages/button/components/ButtonBase.tsx b/packages/button/components/ButtonBase.tsx
index 33a71c5d7..975eca85c 100644
--- a/packages/button/components/ButtonBase.tsx
+++ b/packages/button/components/ButtonBase.tsx
@@ -91,56 +91,24 @@ export interface ButtonBaseProps extends ButtonProps {
   className?: string;
 }
 
-const ButtonBase = (props: ButtonBaseProps) => {
-  const {
-    appearance,
-    children,
-    className,
-    disabled,
-    iconStart,
-    iconEnd,
-    isInverse,
-    isProcessing,
-    isFullWidth,
-    onClick,
-    type = "button",
-    url,
-    openInNewTab,
-    ...other
-  } = props;
-
-  const buttonClassName = cx(
-    buttonReset,
-    button(appearance),
-    buttonBase,
-    textWeight("medium"),
-    className,
-    {
-      [fullWidthButton]: isFullWidth,
-      [buttonInverse(appearance)]: isInverse,
-      [getMutedButtonStyles(appearance)]: disabled || isProcessing,
-      [getInverseMutedButtonStyles(appearance)]:
-        (disabled || isProcessing) && isInverse
-    }
-  );
-
-  const handleClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    if (!disabled && onClick) {
-      onClick(e);
-    }
-  };
-
-  const getIconStart = icon => {
-    return (
-      <span className={cx(flexItem("shrink"), display("inherit"))}>
-        <IconPropAdapter icon={icon} size="xs" color="inherit" />
-      </span>
-    );
-  };
-
-  const getIconEnd = icon => {
-    return (
-      Boolean(icon) && (
+const ButtonContent = ({ iconStart, iconEnd, isProcessing, children }) => {
+  return iconStart || iconEnd ? (
+    <span className={flex({ align: "center", justify: "center" })}>
+      {iconStart && (
+        <span className={cx(flexItem("shrink"), display("inherit"))}>
+          <IconPropAdapter icon={iconStart} size="xs" color="inherit" />
+        </span>
+      )}
+      {children && (
+        <span
+          className={cx(flexItem("shrink"), padding("left", "xs"), {
+            [processingTextStyle]: isProcessing
+          })}
+        >
+          {children}
+        </span>
+      )}
+      {iconEnd && (
         <span
           className={cx(
             flexItem("shrink"),
@@ -148,58 +116,78 @@ const ButtonBase = (props: ButtonBaseProps) => {
             padding("left", "xxs")
           )}
         >
-          <IconPropAdapter icon={icon} size="xs" color="inherit" />
+          <IconPropAdapter icon={iconEnd} size="xs" color="inherit" />
         </span>
-      )
-    );
-  };
-
-  const getButtonContent = () => {
-    const { iconStart, iconEnd, isProcessing, children } = props;
+      )}
+    </span>
+  ) : (
+    <span className={isProcessing ? processingTextStyle : ""}>{children}</span>
+  );
+};
 
-    return iconStart || iconEnd ? (
-      <span className={flex({ align: "center", justify: "center" })}>
-        {iconStart && getIconStart(iconStart)}
-        {children && (
-          <span
-            className={cx(flexItem("shrink"), padding("left", "xs"), {
-              [processingTextStyle]: isProcessing
-            })}
-          >
-            {children}
-          </span>
-        )}
-        {iconEnd && getIconEnd(iconEnd)}
-      </span>
-    ) : (
-      <span className={isProcessing ? processingTextStyle : ""}>
-        {children}
-      </span>
+const ButtonNode = React.forwardRef(
+  (
+    {
+      appearance,
+      children,
+      className,
+      disabled,
+      iconStart,
+      iconEnd,
+      isInverse,
+      isProcessing,
+      isFullWidth,
+      onClick,
+      type = "button",
+      url,
+      openInNewTab,
+      ariaHaspopup,
+      ariaLabel,
+      ...other
+    }: ButtonBaseProps,
+    ref
+  ) => {
+    const buttonClassName = cx(
+      buttonReset,
+      button(appearance),
+      buttonBase,
+      textWeight("medium"),
+      className,
+      {
+        [fullWidthButton]: isFullWidth,
+        [buttonInverse(appearance)]: isInverse,
+        [getMutedButtonStyles(appearance)]: disabled || isProcessing,
+        [getInverseMutedButtonStyles(appearance)]:
+          (disabled || isProcessing) && isInverse
+      }
     );
-  };
 
-  const getButtonNode = () => {
+    const handleClick = (e: React.SyntheticEvent<HTMLElement>) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    };
+
     if (url) {
-      return !disabled && !isProcessing ? (
+      const enabled = !disabled && !isProcessing;
+      return (
         <UnstyledLink
-          href={url}
+          href={enabled ? url : undefined}
+          aria-disabled={!enabled}
           className={buttonClassName}
           onClick={handleClick}
-          tabIndex={0}
+          tabIndex={enabled ? 0 : -1}
           openInNewTab={openInNewTab}
+          ref={ref}
           {...other}
         >
-          {getButtonContent()}
-        </UnstyledLink>
-      ) : (
-        <UnstyledLink
-          className={buttonClassName}
-          aria-disabled="true"
-          tabIndex={-1}
-          openInNewTab={openInNewTab}
-          {...other}
-        >
-          {getButtonContent()}
+          <ButtonContent
+            iconStart={iconStart}
+            iconEnd={iconEnd}
+            isProcessing={isProcessing}
+          >
+            {children}
+          </ButtonContent>
         </UnstyledLink>
       );
     }
@@ -211,18 +199,32 @@ const ButtonBase = (props: ButtonBaseProps) => {
         onClick={handleClick}
         tabIndex={0}
         type={type}
+        ref={ref as React.ForwardedRef<HTMLButtonElement>}
+        aria-haspopup={ariaHaspopup}
+        aria-label={ariaLabel}
         {...other}
       >
-        {getButtonContent()}
+        <ButtonContent
+          iconStart={iconStart}
+          iconEnd={iconEnd}
+          isProcessing={isProcessing}
+        >
+          {children}
+        </ButtonContent>
       </button>
     );
-  };
+  }
+);
 
+const ButtonBase = (props: ButtonBaseProps) => {
   return (
     <FocusStyleManager
-      focusEnabledClass={focusStyleByAppearance(appearance, isInverse)}
+      focusEnabledClass={focusStyleByAppearance(
+        props.appearance,
+        props.isInverse
+      )}
     >
-      {getButtonNode()}
+      <ButtonNode {...props} />
     </FocusStyleManager>
   );
 };
diff --git a/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap b/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap
index 9db366a3e..01f6756ef 100644
--- a/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap
+++ b/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap
@@ -168,6 +168,7 @@ exports[`ButtonBase renders all appearances with props 1`] = `
 }
 
 <button
+    aria-haspopup="true"
     class="emotion-0 emotion-1"
     disabled=""
     tabindex="0"
@@ -389,6 +390,7 @@ exports[`ButtonBase renders all appearances with props 2`] = `
 }
 
 <button
+    aria-haspopup="true"
     class="emotion-0 emotion-1"
     disabled=""
     tabindex="0"
@@ -611,6 +613,7 @@ exports[`ButtonBase renders all appearances with props 3`] = `
 }
 
 <button
+    aria-haspopup="true"
     class="emotion-0 emotion-1"
     disabled=""
     tabindex="0"
@@ -833,6 +836,7 @@ exports[`ButtonBase renders all appearances with props 4`] = `
 }
 
 <button
+    aria-haspopup="true"
     class="emotion-0 emotion-1"
     disabled=""
     tabindex="0"
@@ -1055,6 +1059,7 @@ exports[`ButtonBase renders all appearances with props 5`] = `
 }
 
 <button
+    aria-haspopup="true"
     class="emotion-0 emotion-1"
     disabled=""
     tabindex="0"
diff --git a/packages/link/components/UnstyledLink.tsx b/packages/link/components/UnstyledLink.tsx
index 7f5d9905c..b7b4a2b41 100644
--- a/packages/link/components/UnstyledLink.tsx
+++ b/packages/link/components/UnstyledLink.tsx
@@ -2,23 +2,29 @@ import React from "react";
 import { LinkComponentContext } from "../../uiKitProvider/link/context";
 import { ExpandedLinkProps } from "../types";
 
-const UnstyledLink = (props: ExpandedLinkProps) => {
+const UnstyledLink = (props: ExpandedLinkProps, ref) => {
   const { href, url, target, openInNewTab, children, ...rest } = props;
 
   // Context is used for `UIKitProvider` link delegation
   const LinkComponent = React.useContext(LinkComponentContext);
   if (LinkComponent) {
-    return <LinkComponent {...props} />;
+    return <LinkComponent ref={ref} {...props} />;
   }
 
   const rel = target === "_blank" || openInNewTab ? "noopener" : undefined;
   const blankTargetOrDefault = !target && openInNewTab ? "_blank" : target;
 
   return (
-    <a href={href || url} target={blankTargetOrDefault} rel={rel} {...rest}>
+    <a
+      ref={ref}
+      href={href || url}
+      target={blankTargetOrDefault}
+      rel={rel}
+      {...rest}
+    >
       {children}
     </a>
   );
 };
 
-export default UnstyledLink;
+export default React.forwardRef(UnstyledLink);
diff --git a/packages/link/types.ts b/packages/link/types.ts
index b6b55cbdc..ddf4e7165 100644
--- a/packages/link/types.ts
+++ b/packages/link/types.ts
@@ -15,4 +15,6 @@ export interface LinkProps {
 export type ExpandedLinkProps = LinkProps &
   Omit<React.HTMLProps<HTMLAnchorElement>, "ref">;
 
-export type LinkComponent = React.ComponentType<ExpandedLinkProps>;
+export type LinkComponent = React.ComponentType<
+  LinkProps & React.HTMLProps<HTMLAnchorElement>
+>;
diff --git a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
index 4cef2ba1b..4c6924a75 100644
--- a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
+++ b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
@@ -2111,17 +2111,25 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                                         <Memo(FocusStyleManager)
                                           focusEnabledClass="css-1h85cd2"
                                         >
-                                          <button
-                                            className="emotion-14"
+                                          <ForwardRef
+                                            appearance="secondary"
                                             data-cy="secondaryButton"
-                                            onClick={[Function]}
-                                            tabIndex={0}
-                                            type="button"
+                                            onClick={[MockFunction]}
                                           >
-                                            <span>
-                                              Close
-                                            </span>
-                                          </button>
+                                            <button
+                                              className="emotion-14"
+                                              data-cy="secondaryButton"
+                                              onClick={[Function]}
+                                              tabIndex={0}
+                                              type="button"
+                                            >
+                                              <ButtonContent>
+                                                <span>
+                                                  Close
+                                                </span>
+                                              </ButtonContent>
+                                            </button>
+                                          </ForwardRef>
                                         </Memo(FocusStyleManager)>
                                       </Memo(ButtonBase)>
                                     </SecondaryButton>
@@ -2137,17 +2145,24 @@ exports[`Modal DialogModal renders DialogModal 1`] = `
                                         <Memo(FocusStyleManager)
                                           focusEnabledClass="css-xcotv6"
                                         >
-                                          <button
-                                            className="emotion-16"
+                                          <ForwardRef
+                                            appearance="primary"
                                             data-cy="primaryButton"
-                                            onClick={[Function]}
-                                            tabIndex={0}
-                                            type="button"
                                           >
-                                            <span>
-                                              CTA
-                                            </span>
-                                          </button>
+                                            <button
+                                              className="emotion-16"
+                                              data-cy="primaryButton"
+                                              onClick={[Function]}
+                                              tabIndex={0}
+                                              type="button"
+                                            >
+                                              <ButtonContent>
+                                                <span>
+                                                  CTA
+                                                </span>
+                                              </ButtonContent>
+                                            </button>
+                                          </ForwardRef>
                                         </Memo(FocusStyleManager)>
                                       </Memo(ButtonBase)>
                                     </PrimaryButton>
@@ -3974,17 +3989,25 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                                               <Memo(FocusStyleManager)
                                                 focusEnabledClass="css-1h85cd2"
                                               >
-                                                <button
-                                                  className="emotion-9"
+                                                <ForwardRef
+                                                  appearance="secondary"
                                                   data-cy="secondaryButton"
-                                                  onClick={[Function]}
-                                                  tabIndex={0}
-                                                  type="button"
+                                                  onClick={[MockFunction]}
                                                 >
-                                                  <span>
-                                                    Close
-                                                  </span>
-                                                </button>
+                                                  <button
+                                                    className="emotion-9"
+                                                    data-cy="secondaryButton"
+                                                    onClick={[Function]}
+                                                    tabIndex={0}
+                                                    type="button"
+                                                  >
+                                                    <ButtonContent>
+                                                      <span>
+                                                        Close
+                                                      </span>
+                                                    </ButtonContent>
+                                                  </button>
+                                                </ForwardRef>
                                               </Memo(FocusStyleManager)>
                                             </Memo(ButtonBase)>
                                           </SecondaryButton>
@@ -4012,17 +4035,24 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
                                               <Memo(FocusStyleManager)
                                                 focusEnabledClass="css-xcotv6"
                                               >
-                                                <button
-                                                  className="emotion-14"
+                                                <ForwardRef
+                                                  appearance="primary"
                                                   data-cy="primaryButton"
-                                                  onClick={[Function]}
-                                                  tabIndex={0}
-                                                  type="button"
                                                 >
-                                                  <span>
-                                                    CTA
-                                                  </span>
-                                                </button>
+                                                  <button
+                                                    className="emotion-14"
+                                                    data-cy="primaryButton"
+                                                    onClick={[Function]}
+                                                    tabIndex={0}
+                                                    type="button"
+                                                  >
+                                                    <ButtonContent>
+                                                      <span>
+                                                        CTA
+                                                      </span>
+                                                    </ButtonContent>
+                                                  </button>
+                                                </ForwardRef>
                                               </Memo(FocusStyleManager)>
                                             </Memo(ButtonBase)>
                                           </PrimaryButton>
diff --git a/packages/segmentedControl/components/SegmentedControlButton.tsx b/packages/segmentedControl/components/SegmentedControlButton.tsx
index 76aa1b66b..470130c55 100644
--- a/packages/segmentedControl/components/SegmentedControlButton.tsx
+++ b/packages/segmentedControl/components/SegmentedControlButton.tsx
@@ -39,23 +39,27 @@ export interface SegmentedControlButtonProps {
   children?: React.ReactNode;
 }
 
-const SegmentedControlButton = ({
-  id = nextId("segmentedControlButton-"),
-  isActive,
-  onChange,
-  name,
-  value,
-  tooltipContent,
-  children
-}: SegmentedControlButtonProps) => {
-  return (
-    <FocusStyleManager focusEnabledClass={staticKeyboardFocusClassname}>
+const SegmentedControlLabel = React.forwardRef(
+  (
+    {
+      id = nextId("segmentedControlButton-"),
+      isActive,
+      onChange,
+      name,
+      value,
+      tooltipContent,
+      children
+    }: SegmentedControlButtonProps,
+    ref
+  ) => {
+    return (
       <label
         className={cx(segmentedControlButton, {
           [segmentedControlButtonActive]: isActive
         })}
         data-cy="segmentedControlButton"
         htmlFor={id}
+        ref={ref as React.ForwardedRef<HTMLLabelElement>}
       >
         <input
           className={visuallyHidden}
@@ -79,6 +83,14 @@ const SegmentedControlButton = ({
           <div className={segmentedControlButtonInner}>{children}</div>
         )}
       </label>
+    );
+  }
+);
+
+const SegmentedControlButton = (props: SegmentedControlButtonProps) => {
+  return (
+    <FocusStyleManager focusEnabledClass={staticKeyboardFocusClassname}>
+      <SegmentedControlLabel {...props}>{props.children}</SegmentedControlLabel>
     </FocusStyleManager>
   );
 };
diff --git a/packages/shared/components/FocusStyleManager.tsx b/packages/shared/components/FocusStyleManager.tsx
index bfa656e09..1a227b330 100644
--- a/packages/shared/components/FocusStyleManager.tsx
+++ b/packages/shared/components/FocusStyleManager.tsx
@@ -11,7 +11,7 @@ const FocusStyleManager = ({
   focusEnabledClass,
   children
 }: FocusStyleManagerProps) => {
-  const focusWrapperRef = React.useRef<HTMLDivElement>();
+  const focusWrapperRef = React.useRef();
 
   React.useEffect(() => {
     if (focusWrapperRef.current) {