From 80cc7c723f92d889d771f60aae9fa73bfed91b8d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 9 Sep 2024 18:20:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20enhance=20accessibilit?=
 =?UTF-8?q?y=20of=20'copy=20link'=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added user feedback for actions with explicit text indicating
URL will be copied to clipboard. Modeled after Jitsi's button
behavior for clarity and consistency in user experience.
---
 .../rooms/components/InviteDialog.tsx         | 92 ++++++++++++-------
 src/frontend/src/locales/de/rooms.json        |  1 +
 src/frontend/src/locales/en/rooms.json        |  3 +-
 src/frontend/src/locales/fr/rooms.json        |  3 +-
 4 files changed, 64 insertions(+), 35 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx
index 520468fa..2006586f 100644
--- a/src/frontend/src/features/rooms/components/InviteDialog.tsx
+++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx
@@ -4,7 +4,13 @@ import { Div, Button, type DialogProps, P } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
-import { RiCloseLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
+import {
+  RiCheckLine,
+  RiCloseLine,
+  RiFileCopyLine,
+  RiSpam2Fill,
+} from '@remixicon/react'
+import { useEffect, useState } from 'react'
 
 // fixme - extract in a proper primitive this dialog without overlay
 const StyledRACDialog = styled(Dialog, {
@@ -34,17 +40,25 @@ export const InviteDialog = ({
   const { t } = useTranslation('rooms')
   const roomUrl = getRouteUrl('room', roomId)
 
+  const [isCopied, setIsCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
+
+  const [isHovered, setIsHovered] = useState(false)
+
   return (
     <StyledRACDialog {...dialogProps}>
       {({ close }) => (
         <VStack
-          alignItems={'left'}
+          alignItems="left"
           justify="start"
           gap={0}
-          style={{
-            maxWidth: '100%',
-            overflow: 'hidden',
-          }}
+          style={{ maxWidth: '100%', overflow: 'hidden' }}
         >
           <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
             {t('shareDialog.heading')}
@@ -63,36 +77,48 @@ export const InviteDialog = ({
             </Button>
           </Div>
           <P>{t('shareDialog.description')}</P>
-          <HStack
-            justify={'space-between'}
-            alignItems="center"
+          <Button
+            variant={isCopied ? 'success' : 'primary'}
+            size="sm"
+            fullWidth
+            aria-label={t('shareDialog.copy')}
             style={{
-              backgroundColor: '#f1f3f4',
-              borderRadius: '4px',
-              maxWidth: '100%',
+              justifyContent: 'start',
             }}
-            gap={0}
+            onPress={() => {
+              navigator.clipboard.writeText(roomUrl)
+              setIsCopied(true)
+            }}
+            onHoverChange={setIsHovered}
           >
-            <div
-              style={{
-                paddingLeft: '0.75rem',
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                textWrap: 'nowrap',
-                userSelect: 'none',
-              }}
-            >
-              {roomUrl.replace(/^https?:\/\//, '')}
-            </div>
-            <Button
-              square
-              invisible
-              tooltip={t('shareDialog.copy')}
-              onPress={() => navigator.clipboard.writeText(roomUrl)}
-            >
-              <RiFileCopyLine size={24} />
-            </Button>
-          </HStack>
+            {isCopied ? (
+              <>
+                <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                {t('shareDialog.copied')}
+              </>
+            ) : (
+              <>
+                <RiFileCopyLine
+                  size={18}
+                  style={{ marginRight: '8px', minWidth: '18px' }}
+                />
+                {isHovered ? (
+                  t('shareDialog.copy')
+                ) : (
+                  <div
+                    style={{
+                      textOverflow: 'ellipsis',
+                      overflow: 'hidden',
+                      userSelect: 'none',
+                      textWrap: 'nowrap',
+                    }}
+                  >
+                    {roomUrl.replace(/^https?:\/\//, '')}
+                  </div>
+                )}
+              </>
+            )}
+          </Button>
           <HStack>
             <div
               style={{
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 7adab588..004c0548 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -13,6 +13,7 @@
   "leaveRoomPrompt": "",
   "shareDialog": {
     "copy": "",
+    "copied": "",
     "heading": "",
     "description": "",
     "permissions": ""
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index c0ed83ee..3587aeee 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -12,7 +12,8 @@
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
-    "copy": "Copy link",
+    "copy": "Copy the meeting link",
+    "copied": "Link copied to clipboard",
     "heading": "Your meeting is ready",
     "description": "Share this link with people you want to invite to the meeting.",
     "permissions": "People with this link do not need your permission to join this meeting."
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 36123aeb..862da214 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -12,7 +12,8 @@
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
-    "copy": "Copier le lien",
+    "copy": "Copier le lien de la réunion",
+    "copied": "Lien copié dans le presse-papiers",
     "heading": "Votre réunion est prête",
     "description": "Partagez ce lien avec les personnes que vous souhaitez inviter à la réunion.",
     "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."