From 02c4c6945a9c68be02b9b86903539b071b8eb5a0 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <aaron.casanova@shopify.com>
Date: Tue, 26 Mar 2024 15:30:51 -0700
Subject: [PATCH 1/3] Update Tooltip to dismiss on enter/space key interactions

---
 .../components/Tooltip/Tooltip.stories.tsx    | 78 ++++++++++++++++++-
 .../src/components/Tooltip/Tooltip.tsx        |  8 +-
 2 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 173bf0a2fc3..0abd4eb089e 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,5 +1,9 @@
 import React, {useState} from 'react';
-import {QuestionCircleIcon} from '@shopify/polaris-icons';
+import {
+  CheckIcon,
+  ClipboardIcon,
+  QuestionCircleIcon,
+} from '@shopify/polaris-icons';
 import type {ComponentMeta} from '@storybook/react';
 import {
   Button,
@@ -13,6 +17,7 @@ import {
   BlockStack,
   Popover,
   Card,
+  Link,
 } from '@shopify/polaris';
 import type {TooltipProps} from '@shopify/polaris';
 
@@ -566,3 +571,74 @@ export function OneCharacter() {
     </Box>
   );
 }
+
+export function CopyToClipboard() {
+  const [copy, status] = useCopyToClipboard({
+    defaultValue: 'hello@example.com',
+  });
+
+  return (
+    <div style={{maxWidth: 300, paddingTop: 100}}>
+      <Card>
+        <InlineStack align="space-between" gap="200">
+          <Link removeUnderline>hello@example.com</Link>
+          <Tooltip
+            dismissOnMouseOut
+            hoverDelay={500}
+            preferredPosition="above"
+            content="Copy"
+          >
+            <Button
+              variant="tertiary"
+              onClick={copy}
+              icon={status === 'copied' ? CheckIcon : ClipboardIcon}
+              accessibilityLabel={status === 'copied' ? 'Copied' : 'Copy'}
+            />
+          </Tooltip>
+        </InlineStack>
+      </Card>
+    </div>
+  );
+}
+
+type Status = 'inactive' | 'copied' | 'failed';
+
+interface UseCopyToClipboardOptions {
+  defaultValue?: string;
+  timeout?: number;
+}
+
+/**
+ * Copy text to the native clipboard using the `navigator.clipboard` API
+ * Adapted from https://www.benmvp.com/blog/copy-to-clipboard-react-custom-hook
+ */
+function useCopyToClipboard(options: UseCopyToClipboardOptions = {}) {
+  const {defaultValue = '', timeout = 1500} = options;
+
+  const [status, setStatus] = React.useState<Status>('inactive');
+
+  const copy = React.useCallback(
+    (value?: string) => {
+      navigator.clipboard
+        .writeText(typeof value === 'string' ? value : defaultValue)
+        .then(
+          () => setStatus('copied'),
+          () => setStatus('failed'),
+        )
+        .catch((error) => {
+          throw error;
+        });
+    },
+    [defaultValue],
+  );
+
+  React.useEffect(() => {
+    if (status === 'inactive') return;
+
+    const timeoutId = setTimeout(() => setStatus('inactive'), timeout);
+
+    return () => clearTimeout(timeoutId);
+  }, [status, timeout]);
+
+  return [copy, status] as const;
+}
diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index 635e3977fed..6cbe027bafd 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -158,7 +158,13 @@ export function Tooltip({
 
   const handleKeyUp = useCallback(
     (event: React.KeyboardEvent) => {
-      if (event.key !== 'Escape') return;
+      if (
+        event.key !== 'Escape' &&
+        event.key !== 'Enter' &&
+        event.key !== ' '
+      ) {
+        return;
+      }
       handleClose?.();
       handleBlur();
       persistOnClick && togglePersisting();

From 79041d23e6aea3f93420d830d7f0bc7f8ada7918 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <aaron.casanova@shopify.com>
Date: Tue, 26 Mar 2024 16:31:39 -0700
Subject: [PATCH 2/3] Clear hoverDelayTimeout onBlur to prevent flickering

---
 polaris-react/src/components/Tooltip/Tooltip.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index 6cbe027bafd..937ba1bbedc 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -212,6 +212,11 @@ export function Tooltip({
         handleFocus();
       }}
       onBlur={() => {
+        if (hoverDelayTimeout.current) {
+          clearTimeout(hoverDelayTimeout.current);
+          hoverDelayTimeout.current = null;
+        }
+
         handleClose();
         handleBlur();
 

From cf9054102baf625f53b8507b2fe96a7ea0a0e5eb Mon Sep 17 00:00:00 2001
From: Aaron Casanova <aaron.casanova@shopify.com>
Date: Tue, 26 Mar 2024 16:34:05 -0700
Subject: [PATCH 3/3] Simplify a11y label after voice over test

---
 polaris-react/src/components/Tooltip/Tooltip.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 0abd4eb089e..99fd3bee3f1 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -590,9 +590,9 @@ export function CopyToClipboard() {
           >
             <Button
               variant="tertiary"
-              onClick={copy}
+              accessibilityLabel="Copy"
               icon={status === 'copied' ? CheckIcon : ClipboardIcon}
-              accessibilityLabel={status === 'copied' ? 'Copied' : 'Copy'}
+              onClick={copy}
             />
           </Tooltip>
         </InlineStack>