From ae161fec40fe8d924004516430b59ce26328f3b8 Mon Sep 17 00:00:00 2001
From: Nevyana Angelova <nevyangelova@Nevy-Macbook-16-2025.local>
Date: Mon, 31 Aug 2026 15:03:59 +0700
Subject: [PATCH 1/2] MM-70344: Confirm the copy in the Share modal and Space
 info

---
 webapp/i18n/en.json                           |  4 +-
 .../share_space_modal.test.tsx                | 12 +++++
 .../share_space_modal/share_space_modal.tsx   | 25 ++++++---
 .../space_info/space_info_menu.test.tsx       | 54 +++++++++++++++++++
 .../components/space_info/space_info_menu.tsx | 20 ++++---
 webapp/src/hooks/copy_text.test.ts            | 44 +++++++++++++++
 webapp/src/hooks/copy_text.ts                 | 39 ++++++++++++++
 7 files changed, 180 insertions(+), 18 deletions(-)
 create mode 100644 webapp/src/components/space_info/space_info_menu.test.tsx
 create mode 100644 webapp/src/hooks/copy_text.test.ts
 create mode 100644 webapp/src/hooks/copy_text.ts

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index c3932673..3baa5e77 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -145,6 +145,7 @@
   "docs.share.access.canView": "Can View",
   "docs.share.copyLink": "Copy link",
   "docs.share.handle": "@{username}",
+  "docs.share.linkCopied": "Copied",
   "docs.share.noResults": "No people found",
   "docs.share.remove": "Remove {name}",
   "docs.share.search": "Add people or groups",
@@ -153,8 +154,6 @@
   "docs.share.visibility.disabledReason": "Public spaces are coming soon",
   "docs.share.visibility.private": "Private",
   "docs.share.visibility.privateHint": "Only invited members",
-  "docs.share.visibility.public": "Public",
-  "docs.share.visibility.publicHint": "Anyone in Mattermost",
   "docs.sidebar.add.browse": "Browse spaces",
   "docs.sidebar.add.create": "Create a space",
   "docs.sidebar.add.menu": "Add or browse spaces",
@@ -221,6 +220,7 @@
   "docs.spaceInfo.editDescription": "Edit description",
   "docs.spaceInfo.members": "Members",
   "docs.spaceInfo.menu.copyLink": "Copy link",
+  "docs.spaceInfo.menu.linkCopied": "Copied",
   "docs.spaceInfo.menu.members": "Members",
   "docs.spaceInfo.menu.settings": "Space settings",
   "docs.spaceInfo.menu.title": "Space info actions",
diff --git a/webapp/src/components/share_space_modal/share_space_modal.test.tsx b/webapp/src/components/share_space_modal/share_space_modal.test.tsx
index 9c89fd9e..581da294 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.test.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.test.tsx
@@ -3,6 +3,7 @@
 
 import {act, fireEvent, screen, waitFor} from '@testing-library/react';
 import React from 'react';
+import {copyToClipboard} from 'utils/clipboard';
 
 import {makeSpace} from 'store/test_fixtures';
 
@@ -41,6 +42,8 @@ jest.mock('hooks/navigation', () => ({
     useDocsNavigation: () => ({paths: {space: (id: string) => `/team/spaces/${id}`}}),
 }));
 
+jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn()}));
+
 // AddMembersField renders the real people picker, which pulls in mattermost-redux's
 // user search actions (published ESM that jest doesn't transform). Stub at the hook
 // boundary, as people_picker.test.tsx does.
@@ -145,4 +148,13 @@ describe('ShareSpaceModal', () => {
         await waitFor(() => expect(mockLeave).toHaveBeenCalled());
         expect(onClose).not.toHaveBeenCalled();
     });
+
+    it('confirms the copy on the button itself', async () => {
+        renderModal();
+
+        fireEvent.click(screen.getByRole('button', {name: 'Copy link'}));
+
+        expect(await screen.findByRole('button', {name: 'Copied'})).toBeInTheDocument();
+        expect(copyToClipboard).toHaveBeenCalledWith('/team/spaces/space-1');
+    });
 });
diff --git a/webapp/src/components/share_space_modal/share_space_modal.tsx b/webapp/src/components/share_space_modal/share_space_modal.tsx
index fc3fb857..4bfd07e5 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.tsx
@@ -1,14 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {useCopyText} from 'hooks/copy_text';
 import {useSpaceMemberProfiles} from 'hooks/members';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useCanManageSpaceMembers} from 'hooks/permissions';
 import {useManageSpaceMembers} from 'hooks/space_members';
 import React, {useMemo} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
-import {copyToClipboard} from 'utils/clipboard';
 
+import CheckIcon from '@mattermost/compass-icons/components/check';
 import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';
 import ContentCopyIcon from '@mattermost/compass-icons/components/content-copy';
 import LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';
@@ -48,7 +49,7 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
         disabled: busy,
     };
 
-    const copyLink = () => copyToClipboard(absolutePaths.space(space.id));
+    const copyLink = useCopyText(absolutePaths.space(space.id));
 
     const title = (
         <FormattedMessage
@@ -62,13 +63,21 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
         <SecondaryButton
             size='sm'
             className={styles.copyLink}
-            onClick={copyLink}
+            onClick={copyLink.copy}
+            aria-live='polite'
         >
-            <ContentCopyIcon size={16}/>
-            <FormattedMessage
-                id='docs.share.copyLink'
-                defaultMessage='Copy link'
-            />
+            {copyLink.copied ? <CheckIcon size={16}/> : <ContentCopyIcon size={16}/>}
+            {copyLink.copied ? (
+                <FormattedMessage
+                    id='docs.share.linkCopied'
+                    defaultMessage='Copied'
+                />
+            ) : (
+                <FormattedMessage
+                    id='docs.share.copyLink'
+                    defaultMessage='Copy link'
+                />
+            )}
         </SecondaryButton>
     );
 
diff --git a/webapp/src/components/space_info/space_info_menu.test.tsx b/webapp/src/components/space_info/space_info_menu.test.tsx
new file mode 100644
index 00000000..8901c2de
--- /dev/null
+++ b/webapp/src/components/space_info/space_info_menu.test.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {fireEvent, screen} from '@testing-library/react';
+import React from 'react';
+import {copyToClipboard} from 'utils/clipboard';
+
+import {makeSpace} from 'store/test_fixtures';
+
+import SpaceInfoMenu from './space_info_menu';
+
+import {renderWithContext} from '../../../tests/react_testing_utils';
+
+jest.mock('hooks/navigation', () => ({
+    useDocsNavigation: () => ({paths: {space: (id: string) => `/team/spaces/${id}`}}),
+}));
+
+jest.mock('hooks/permissions', () => ({
+    useCanManageSpaceMembers: () => true,
+}));
+
+jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn()}));
+
+const space = makeSpace('space-1', 'Engineering');
+
+const renderMenu = () => renderWithContext(
+    <SpaceInfoMenu
+        space={space}
+        memberCount={3}
+        onShowMembers={jest.fn()}
+    />,
+);
+
+describe('SpaceInfoMenu', () => {
+    beforeEach(() => jest.clearAllMocks());
+
+    it('copies the space link', () => {
+        renderMenu();
+
+        fireEvent.click(screen.getByRole('button', {name: 'Copy link'}));
+
+        expect(copyToClipboard).toHaveBeenCalledWith('/team/spaces/space-1');
+    });
+
+    // MM-70344: the click gave no sign that anything happened.
+    it('confirms the copy on the item itself', () => {
+        renderMenu();
+
+        fireEvent.click(screen.getByRole('button', {name: 'Copy link'}));
+
+        expect(screen.getByRole('button', {name: 'Copied'})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Copy link'})).not.toBeInTheDocument();
+    });
+});
diff --git a/webapp/src/components/space_info/space_info_menu.tsx b/webapp/src/components/space_info/space_info_menu.tsx
index f96e4bf6..6a93b7ab 100644
--- a/webapp/src/components/space_info/space_info_menu.tsx
+++ b/webapp/src/components/space_info/space_info_menu.tsx
@@ -1,13 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {useCopyText} from 'hooks/copy_text';
 import {useDocsNavigation} from 'hooks/navigation';
 import {useCanManageSpaceMembers} from 'hooks/permissions';
 import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
-import {copyToClipboard} from 'utils/clipboard';
 
 import AccountMultipleOutlineIcon from '@mattermost/compass-icons/components/account-multiple-outline';
+import CheckIcon from '@mattermost/compass-icons/components/check';
 import ChevronRightIcon from '@mattermost/compass-icons/components/chevron-right';
 import CogOutlineIcon from '@mattermost/compass-icons/components/cog-outline';
 import LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';
@@ -29,14 +30,18 @@ type ItemProps = {
 
     /** Marks the item as drilling into a sub-panel, adding a chevron. */
     opensPanel?: boolean;
+
+    /** Reads out `text` when it changes, for items that confirm in place. */
+    announce?: boolean;
     onClick: () => void;
 };
 
-const SpaceInfoMenuItem = ({icon, text, badge, opensPanel, onClick}: ItemProps) => (
+const SpaceInfoMenuItem = ({icon, text, badge, opensPanel, announce, onClick}: ItemProps) => (
     <Button
         emphasis='quaternary'
         size='sm'
         className={styles.item}
+        aria-live={announce ? 'polite' : undefined}
         onClick={onClick}
     >
         <span
@@ -84,9 +89,7 @@ const SpaceInfoMenu = ({space, memberCount, onShowMembers}: Props) => {
         ));
     }, [space]);
 
-    const copyLink = useCallback(() => {
-        copyToClipboard(absolutePaths.space(space.id));
-    }, [absolutePaths, space.id]);
+    const copyLink = useCopyText(absolutePaths.space(space.id));
 
     return (
         <nav
@@ -108,9 +111,10 @@ const SpaceInfoMenu = ({space, memberCount, onShowMembers}: Props) => {
                 onClick={onShowMembers}
             />
             <SpaceInfoMenuItem
-                icon={<LinkVariantIcon size={18}/>}
-                text={formatMessage({id: 'docs.spaceInfo.menu.copyLink', defaultMessage: 'Copy link'})}
-                onClick={copyLink}
+                icon={copyLink.copied ? <CheckIcon size={18}/> : <LinkVariantIcon size={18}/>}
+                text={copyLink.copied ? formatMessage({id: 'docs.spaceInfo.menu.linkCopied', defaultMessage: 'Copied'}) : formatMessage({id: 'docs.spaceInfo.menu.copyLink', defaultMessage: 'Copy link'})}
+                announce={copyLink.copied}
+                onClick={copyLink.copy}
             />
         </nav>
     );
diff --git a/webapp/src/hooks/copy_text.test.ts b/webapp/src/hooks/copy_text.test.ts
new file mode 100644
index 00000000..b27c62aa
--- /dev/null
+++ b/webapp/src/hooks/copy_text.test.ts
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {act, renderHook} from '@testing-library/react';
+import {copyToClipboard} from 'utils/clipboard';
+
+import {useCopyText} from './copy_text';
+
+jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn()}));
+
+describe('useCopyText', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        jest.clearAllMocks();
+    });
+
+    afterEach(() => jest.useRealTimers());
+
+    it('copies and confirms for a moment', () => {
+        const {result} = renderHook(() => useCopyText('https://example.com/space'));
+
+        expect(result.current.copied).toBe(false);
+
+        act(() => result.current.copy());
+
+        expect(copyToClipboard).toHaveBeenCalledWith('https://example.com/space');
+        expect(result.current.copied).toBe(true);
+
+        act(() => jest.advanceTimersByTime(2000));
+
+        expect(result.current.copied).toBe(false);
+    });
+
+    it('holds the confirmation open when copied again', () => {
+        const {result} = renderHook(() => useCopyText('link'));
+
+        act(() => result.current.copy());
+        act(() => jest.advanceTimersByTime(1500));
+        act(() => result.current.copy());
+        act(() => jest.advanceTimersByTime(1500));
+
+        expect(result.current.copied).toBe(true);
+    });
+});
diff --git a/webapp/src/hooks/copy_text.ts b/webapp/src/hooks/copy_text.ts
new file mode 100644
index 00000000..781d065a
--- /dev/null
+++ b/webapp/src/hooks/copy_text.ts
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {copyToClipboard} from 'utils/clipboard';
+
+const COPIED_TIMEOUT = 2000;
+
+type CopyText = {
+
+    /** True for a moment after a copy, for controls that confirm in place. */
+    copied: boolean;
+    copy: () => void;
+};
+
+// Core's useCopyText, which plugins can't import. Controls own the confirmation:
+// core swaps the label and icon rather than raising a toast.
+export function useCopyText(text: string, timeout: number = COPIED_TIMEOUT): CopyText {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => () => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+    }, []);
+
+    const copy = useCallback(() => {
+        copyToClipboard(text);
+
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        setCopied(true);
+        timer.current = setTimeout(() => setCopied(false), timeout);
+    }, [text, timeout]);
+
+    return {copied, copy};
+}

From a5130ca9174912ab4dd18b4fd9798f95eb7c6929 Mon Sep 17 00:00:00 2001
From: Nevyana Angelova <nevyangelova@Nevy-Macbook-16-2025.local>
Date: Mon, 31 Aug 2026 23:25:39 +0700
Subject: [PATCH 2/2]  PR feedback

---
 .../share_space_modal.test.tsx                |  2 +-
 .../share_space_modal/share_space_modal.tsx   |  5 ++-
 .../space_info/space_info_menu.test.tsx       | 14 ++++---
 .../components/space_info/space_info_menu.tsx | 11 ++----
 webapp/src/hooks/copy_text.test.ts            | 39 ++++++++++++++++---
 webapp/src/hooks/copy_text.ts                 | 36 +++++++++++++----
 webapp/src/utils/clipboard.ts                 | 24 ++++++++----
 7 files changed, 94 insertions(+), 37 deletions(-)

diff --git a/webapp/src/components/share_space_modal/share_space_modal.test.tsx b/webapp/src/components/share_space_modal/share_space_modal.test.tsx
index 581da294..8d24410c 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.test.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.test.tsx
@@ -42,7 +42,7 @@ jest.mock('hooks/navigation', () => ({
     useDocsNavigation: () => ({paths: {space: (id: string) => `/team/spaces/${id}`}}),
 }));
 
-jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn()}));
+jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn(() => Promise.resolve(true))}));
 
 // AddMembersField renders the real people picker, which pulls in mattermost-redux's
 // user search actions (published ESM that jest doesn't transform). Stub at the hook
diff --git a/webapp/src/components/share_space_modal/share_space_modal.tsx b/webapp/src/components/share_space_modal/share_space_modal.tsx
index 4bfd07e5..862ab546 100644
--- a/webapp/src/components/share_space_modal/share_space_modal.tsx
+++ b/webapp/src/components/share_space_modal/share_space_modal.tsx
@@ -49,7 +49,9 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
         disabled: busy,
     };
 
-    const copyLink = useCopyText(absolutePaths.space(space.id));
+    const copyLink = useCopyText(absolutePaths.space(space.id), {
+        announcement: formatMessage({id: 'docs.share.linkCopied', defaultMessage: 'Copied'}),
+    });
 
     const title = (
         <FormattedMessage
@@ -64,7 +66,6 @@ const ShareSpaceModal = ({space, onClose}: Props) => {
             size='sm'
             className={styles.copyLink}
             onClick={copyLink.copy}
-            aria-live='polite'
         >
             {copyLink.copied ? <CheckIcon size={16}/> : <ContentCopyIcon size={16}/>}
             {copyLink.copied ? (
diff --git a/webapp/src/components/space_info/space_info_menu.test.tsx b/webapp/src/components/space_info/space_info_menu.test.tsx
index 8901c2de..15c13a52 100644
--- a/webapp/src/components/space_info/space_info_menu.test.tsx
+++ b/webapp/src/components/space_info/space_info_menu.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {fireEvent, screen} from '@testing-library/react';
+import {act, fireEvent, screen} from '@testing-library/react';
 import React from 'react';
 import {copyToClipboard} from 'utils/clipboard';
 
@@ -19,7 +19,7 @@ jest.mock('hooks/permissions', () => ({
     useCanManageSpaceMembers: () => true,
 }));
 
-jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn()}));
+jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn(() => Promise.resolve(true))}));
 
 const space = makeSpace('space-1', 'Engineering');
 
@@ -34,21 +34,23 @@ const renderMenu = () => renderWithContext(
 describe('SpaceInfoMenu', () => {
     beforeEach(() => jest.clearAllMocks());
 
-    it('copies the space link', () => {
+    it('copies the space link', async () => {
         renderMenu();
 
-        fireEvent.click(screen.getByRole('button', {name: 'Copy link'}));
+        await act(async () => {
+            fireEvent.click(screen.getByRole('button', {name: 'Copy link'}));
+        });
 
         expect(copyToClipboard).toHaveBeenCalledWith('/team/spaces/space-1');
     });
 
     // MM-70344: the click gave no sign that anything happened.
-    it('confirms the copy on the item itself', () => {
+    it('confirms the copy on the item itself', async () => {
         renderMenu();
 
         fireEvent.click(screen.getByRole('button', {name: 'Copy link'}));
 
-        expect(screen.getByRole('button', {name: 'Copied'})).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: 'Copied'})).toBeInTheDocument();
         expect(screen.queryByRole('button', {name: 'Copy link'})).not.toBeInTheDocument();
     });
 });
diff --git a/webapp/src/components/space_info/space_info_menu.tsx b/webapp/src/components/space_info/space_info_menu.tsx
index 6a93b7ab..372ce25c 100644
--- a/webapp/src/components/space_info/space_info_menu.tsx
+++ b/webapp/src/components/space_info/space_info_menu.tsx
@@ -30,18 +30,14 @@ type ItemProps = {
 
     /** Marks the item as drilling into a sub-panel, adding a chevron. */
     opensPanel?: boolean;
-
-    /** Reads out `text` when it changes, for items that confirm in place. */
-    announce?: boolean;
     onClick: () => void;
 };
 
-const SpaceInfoMenuItem = ({icon, text, badge, opensPanel, announce, onClick}: ItemProps) => (
+const SpaceInfoMenuItem = ({icon, text, badge, opensPanel, onClick}: ItemProps) => (
     <Button
         emphasis='quaternary'
         size='sm'
         className={styles.item}
-        aria-live={announce ? 'polite' : undefined}
         onClick={onClick}
     >
         <span
@@ -89,7 +85,9 @@ const SpaceInfoMenu = ({space, memberCount, onShowMembers}: Props) => {
         ));
     }, [space]);
 
-    const copyLink = useCopyText(absolutePaths.space(space.id));
+    const copyLink = useCopyText(absolutePaths.space(space.id), {
+        announcement: formatMessage({id: 'docs.spaceInfo.menu.linkCopied', defaultMessage: 'Copied'}),
+    });
 
     return (
         <nav
@@ -113,7 +111,6 @@ const SpaceInfoMenu = ({space, memberCount, onShowMembers}: Props) => {
             <SpaceInfoMenuItem
                 icon={copyLink.copied ? <CheckIcon size={18}/> : <LinkVariantIcon size={18}/>}
                 text={copyLink.copied ? formatMessage({id: 'docs.spaceInfo.menu.linkCopied', defaultMessage: 'Copied'}) : formatMessage({id: 'docs.spaceInfo.menu.copyLink', defaultMessage: 'Copy link'})}
-                announce={copyLink.copied}
                 onClick={copyLink.copy}
             />
         </nav>
diff --git a/webapp/src/hooks/copy_text.test.ts b/webapp/src/hooks/copy_text.test.ts
index b27c62aa..c28a255f 100644
--- a/webapp/src/hooks/copy_text.test.ts
+++ b/webapp/src/hooks/copy_text.test.ts
@@ -4,26 +4,32 @@
 import {act, renderHook} from '@testing-library/react';
 import {copyToClipboard} from 'utils/clipboard';
 
+import {clearReadout, getReadoutMessage} from 'components/readout/readout_store';
+
 import {useCopyText} from './copy_text';
 
 jest.mock('utils/clipboard', () => ({copyToClipboard: jest.fn()}));
 
+const mockCopy = copyToClipboard as jest.MockedFunction<typeof copyToClipboard>;
+
 describe('useCopyText', () => {
     beforeEach(() => {
         jest.useFakeTimers();
         jest.clearAllMocks();
+        mockCopy.mockResolvedValue(true);
+        clearReadout();
     });
 
     afterEach(() => jest.useRealTimers());
 
-    it('copies and confirms for a moment', () => {
+    it('copies and confirms for a moment', async () => {
         const {result} = renderHook(() => useCopyText('https://example.com/space'));
 
         expect(result.current.copied).toBe(false);
 
-        act(() => result.current.copy());
+        await act(async () => result.current.copy());
 
-        expect(copyToClipboard).toHaveBeenCalledWith('https://example.com/space');
+        expect(mockCopy).toHaveBeenCalledWith('https://example.com/space');
         expect(result.current.copied).toBe(true);
 
         act(() => jest.advanceTimersByTime(2000));
@@ -31,12 +37,33 @@ describe('useCopyText', () => {
         expect(result.current.copied).toBe(false);
     });
 
-    it('holds the confirmation open when copied again', () => {
+    // The clipboard write can fail on permissions or an insecure context, and
+    // confirming a copy that never happened is worse than staying quiet.
+    it('says nothing when the copy fails', async () => {
+        mockCopy.mockResolvedValue(false);
+
+        const {result} = renderHook(() => useCopyText('link', {announcement: 'Copied'}));
+
+        await act(async () => result.current.copy());
+
+        expect(result.current.copied).toBe(false);
+        expect(getReadoutMessage()).toBe('');
+    });
+
+    it('announces the confirmation through the live region', async () => {
+        const {result} = renderHook(() => useCopyText('link', {announcement: 'Copied'}));
+
+        await act(async () => result.current.copy());
+
+        expect(getReadoutMessage()).toBe('Copied');
+    });
+
+    it('holds the confirmation open when copied again', async () => {
         const {result} = renderHook(() => useCopyText('link'));
 
-        act(() => result.current.copy());
+        await act(async () => result.current.copy());
         act(() => jest.advanceTimersByTime(1500));
-        act(() => result.current.copy());
+        await act(async () => result.current.copy());
         act(() => jest.advanceTimersByTime(1500));
 
         expect(result.current.copied).toBe(true);
diff --git a/webapp/src/hooks/copy_text.ts b/webapp/src/hooks/copy_text.ts
index 781d065a..7b56134f 100644
--- a/webapp/src/hooks/copy_text.ts
+++ b/webapp/src/hooks/copy_text.ts
@@ -4,8 +4,15 @@
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {copyToClipboard} from 'utils/clipboard';
 
+import {announce} from 'components/readout/readout_store';
+
 const COPIED_TIMEOUT = 2000;
 
+type CopyOptions = {
+    announcement?: string;
+    timeout?: number;
+};
+
 type CopyText = {
 
     /** True for a moment after a copy, for controls that confirm in place. */
@@ -15,25 +22,38 @@ type CopyText = {
 
 // Core's useCopyText, which plugins can't import. Controls own the confirmation:
 // core swaps the label and icon rather than raising a toast.
-export function useCopyText(text: string, timeout: number = COPIED_TIMEOUT): CopyText {
+export function useCopyText(text: string, {announcement, timeout = COPIED_TIMEOUT}: CopyOptions = {}): CopyText {
     const [copied, setCopied] = useState(false);
     const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const mounted = useRef(true);
 
-    useEffect(() => () => {
-        if (timer.current) {
-            clearTimeout(timer.current);
-        }
+    useEffect(() => {
+        mounted.current = true;
+
+        return () => {
+            mounted.current = false;
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+        };
     }, []);
 
-    const copy = useCallback(() => {
-        copyToClipboard(text);
+    const copy = useCallback(async () => {
+        const done = await copyToClipboard(text);
+        if (!done || !mounted.current) {
+            return;
+        }
+
+        if (announcement) {
+            announce(announcement);
+        }
 
         if (timer.current) {
             clearTimeout(timer.current);
         }
         setCopied(true);
         timer.current = setTimeout(() => setCopied(false), timeout);
-    }, [text, timeout]);
+    }, [announcement, text, timeout]);
 
     return {copied, copy};
 }
diff --git a/webapp/src/utils/clipboard.ts b/webapp/src/utils/clipboard.ts
index 54df50da..9da4f50d 100644
--- a/webapp/src/utils/clipboard.ts
+++ b/webapp/src/utils/clipboard.ts
@@ -4,17 +4,19 @@
 // Copies text to the clipboard, preferring the async Clipboard API and falling
 // back to a hidden textarea + execCommand on browsers/contexts without it (or
 // when writeText rejects — e.g. permissions or an insecure context).
-// Mirrors the core webapp's utils.copyToClipboard.
-export function copyToClipboard(text: string): void {
+// Mirrors the core webapp's utils.copyToClipboard, resolving to whether the text
+// made it, so callers can confirm a copy that actually happened.
+export function copyToClipboard(text: string): Promise<boolean> {
     if (navigator.clipboard) {
-        navigator.clipboard.writeText(text).catch(() => legacyCopy(text));
-        return;
+        return navigator.clipboard.writeText(text).
+            then(() => true).
+            catch(() => legacyCopy(text));
     }
 
-    legacyCopy(text);
+    return Promise.resolve(legacyCopy(text));
 }
 
-function legacyCopy(text: string): void {
+function legacyCopy(text: string): boolean {
     const textArea = document.createElement('textarea');
     textArea.style.position = 'fixed';
     textArea.style.top = '0';
@@ -29,6 +31,14 @@ function legacyCopy(text: string): void {
     textArea.value = text;
     document.body.appendChild(textArea);
     textArea.select();
-    document.execCommand('copy');
+
+    let copied = false;
+    try {
+        copied = document.execCommand('copy');
+    } catch {
+        copied = false;
+    }
     document.body.removeChild(textArea);
+
+    return copied;
 }