♿️(summary) improve accessibility of transcription download link

Update the link label to use explicit text "Download your recording"
instead of generic "following this link."

This ensures blind users understand the purpose of the link
and the behavior of opening a new window.

CHANGELOG.md

@@ -12,6 +12,16 @@ and this project adheres to
 
 - ♿️(frontend) fix sidepanel accessibility aria-label #1182
 - ♿️(frontend) fix more tools heading hierarchy #1181
+- ♿️(fronted) improve button descriptions for More tools actions #1184
+- 💄(spinner) enforce spinner height #1183
+- 💄(custom-background) add upload indicator with preview #1183
+- ♿️(backend) improve logo accessibility in recording email notification #1092
+- ♿️(summary) improve accessibility of transcription download link #1187
+
+### Fixed
+
+- 🐛(frontend) disable personal custom background while deleting #1183
+- 🐛(frontend) auto-select new custom background when not logged in #1183
 
 ## [1.11.0] - 2026-03-19
 

src/frontend/src/features/files/api/createFile.ts

@@ -1,7 +1,8 @@
 import { fetchApi } from '@/api/fetchApi'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
 import { ApiFileItem } from '@/features/files/api/types.ts'
 import { keys } from '@/api/queryKeys.ts'
+import { queryClient } from '@/api/queryClient.ts'
 
 /**
  * Upload a file, using XHR so we can report on progress through a handler.
@@ -71,20 +72,22 @@ export const createFile = async ({
   }
   const policy = res.policy
   await uploadFile(policy, file, onProgress)
-  return await fetchApi<ApiFileItem>(`/files/${res.id}/upload-ended/`, {
-    method: 'POST',
+  const createdFile = await fetchApi<ApiFileItem>(
+    `/files/${res.id}/upload-ended/`,
+    {
+      method: 'POST',
+    }
+  )
+
+  // We invalidate the files query to make sure the new file is immediately available.
+  await queryClient.invalidateQueries({
+    queryKey: [keys.files],
   })
+  return createdFile
 }
 
 export const useCreateFile = () => {
-  const queryClient = useQueryClient()
-
   return useMutation({
     mutationFn: createFile,
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: [keys.files],
-      })
-    },
   })
 }

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -32,6 +32,7 @@ import { ApiFileItem } from '@/features/files/api/types.ts'
 import { useConfig } from '@/api/useConfig.ts'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices.ts'
 import { proxy, useSnapshot } from 'valtio'
+import { Spinner } from '@/primitives/Spinner.tsx'
 
 enum BlurRadius {
   NONE = 0,
@@ -268,6 +269,15 @@ export const EffectsConfiguration = ({
     'file_too_large' | 'invalid_file_type' | null
   >(null)
   const createFileMutation = useCreateFile()
+  const fileBeingUploadedObjectUrlRef = useRef<string | null>(null)
+  useEffect(() => {
+    return () => {
+      if (fileBeingUploadedObjectUrlRef.current) {
+        URL.revokeObjectURL(fileBeingUploadedObjectUrlRef.current)
+        fileBeingUploadedObjectUrlRef.current = null
+      }
+    }
+  }, [])
   const deleteFileMutation = useDeleteFile()
   const filesQ = useListMyFiles(listFilesQueryParams)
   const hasReachedMaxNbBackgrounds =
@@ -319,7 +329,9 @@ export const EffectsConfiguration = ({
         }
         const imagePath = URL.createObjectURL(file)
 
-        const fileId = `local-image`
+        // We concatenate with the image path so that the constructed file-id
+        // is unique for local files.
+        const fileId = `local-image-${imagePath}`
         await toggleEffect({
           type: ProcessorType.VIRTUAL,
           imagePath,
@@ -333,6 +345,11 @@ export const EffectsConfiguration = ({
       } else {
         // Otherwise we create the file in the backend and automatically select it
         // when it's uploaded.
+        // We create a local version so that we can quickly display it in the frontend.
+        if (fileBeingUploadedObjectUrlRef.current) {
+          URL.revokeObjectURL(fileBeingUploadedObjectUrlRef.current)
+        }
+        fileBeingUploadedObjectUrlRef.current = URL.createObjectURL(file)
         createFileMutation.mutate(
           {
             file,
@@ -674,6 +691,38 @@ export const EffectsConfiguration = ({
                     flexWrap: 'wrap',
                   })}
                 >
+                  {createFileMutation.isPending &&
+                    fileBeingUploadedObjectUrlRef.current && (
+                      <VisualOnlyTooltip
+                        tooltip={t('virtual.personal.uploadInProgress')}
+                      >
+                        <div className={css({ position: 'relative' })}>
+                          <ToggleButton
+                            variant="bigSquare"
+                            aria-label={t('virtual.personal.uploadInProgress')}
+                            isDisabled={true}
+                            data-attr={`virtual-upload-in-progress`}
+                            className={css({
+                              bgSize: 'cover',
+                              filter: 'grayscale(1)',
+                            })}
+                            style={{
+                              backgroundImage: `url(${fileBeingUploadedObjectUrlRef.current})`,
+                            }}
+                          />
+                          <div
+                            className={css({
+                              position: 'absolute',
+                              top: '50%',
+                              left: '50%',
+                              transform: 'translate(-50%, -50%)',
+                            })}
+                          >
+                            <Spinner size={24} />
+                          </div>
+                        </div>
+                      </VisualOnlyTooltip>
+                    )}
                   {canUploadBackground &&
                     processorOptions.remoteCustomVirtualBackgrounds.map(
                       (option) => (
@@ -739,7 +788,10 @@ export const EffectsConfiguration = ({
                           aria-label={
                             uploadNotPossibleSnap.imageBackgroundConfig.label
                           }
-                          isDisabled={processorOptions.isDisabled}
+                          isDisabled={
+                            processorOptions.isDisabled ||
+                            createFileMutation.isPending
+                          }
                           onChange={() => {
                             toggleEffect(
                               uploadNotPossibleSnap.imageBackgroundConfig!

src/frontend/src/locales/de/rooms.json

@@ -279,6 +279,7 @@
         "notLoggedInWarning": "Du bist nicht angemeldet, der persönliche Hintergrund wird nicht von einem Meeting zum anderen gespeichert.",
         "warningUploadDisabled": "Persönliche Hintergründe werden derzeit nicht von einem Meeting zum anderen gespeichert.",
         "uploadLimitReached": "Du kannst keine weiteren persönlichen Hintergründe hinzufügen.",
+        "uploadInProgress": "Datei wird hochgeladen…",
         "errors": {
           "close": "Schließen",
           "file_too_large": {
@@ -354,11 +355,11 @@
     "tools": {
       "transcript": {
         "title": "Transkribieren",
-        "body": "Das Gespräch aufzeichnen."
+        "body": "Wandelt Meetings in Text um."
       },
       "screenRecording": {
-        "title": "Aufzeichnen",
-        "body": "Das Meeting aufzeichnen."
+        "title": "Aufnehmen",
+        "body": "Speichert Meetings als Video."
       }
     }
   },

src/frontend/src/locales/en/rooms.json

@@ -279,6 +279,7 @@
         "notLoggedInWarning": "You are not logged-in, personal backgrounds won't be saved from one meeting to the other.",
         "warningUploadDisabled": "Personal backgrounds are currently not saved from one meeting to the other.",
         "uploadLimitReached": "You cannot upload more personal backgrounds.",
+        "uploadInProgress": "Image is being uploaded…",
         "errors": {
           "close": "Close",
           "file_too_large": {
@@ -353,11 +354,11 @@
     "tools": {
       "transcript": {
         "title": "Transcribe",
-        "body": "Record the conversation."
+        "body": "Turn meetings into text."
       },
       "screenRecording": {
         "title": "Record",
-        "body": "Record the meeting."
+        "body": "Save meetings as video."
       }
     }
   },

src/frontend/src/locales/fr/rooms.json

@@ -279,6 +279,7 @@
         "notLoggedInWarning": "Vous n'êtes pas connecté, l'arrière-plan personnel ne sera pas sauvegardé d'une réunion à l'autre.",
         "warningUploadDisabled": "Les arrière-plans personnels ne sont actuellement pas sauvegardés d'une réunion à l'autre.",
         "uploadLimitReached": "Vous ne pouvez pas ajouter plus d'arrière-plans personnels.",
+        "uploadInProgress": "Image en cours d'envoi…",
         "errors": {
           "close": "Fermer",
           "file_too_large": {
@@ -353,11 +354,11 @@
     "tools": {
       "transcript": {
         "title": "Transcrire",
-        "body": "Enregistrer la conversation."
+        "body": "Transcrire la réunion."
       },
       "screenRecording": {
         "title": "Enregistrer",
-        "body": "Enregistrer la réunion."
+        "body": "Enregistrer la réunion en vidéo."
       }
     }
   },

src/frontend/src/locales/nl/rooms.json

@@ -279,6 +279,7 @@
         "notLoggedInWarning": "U bent niet ingelogd, persoonlijke achtergronden worden niet opgeslagen van de ene vergadering naar de andere.",
         "warningUploadDisabled": "Persoonlijke achtergronden worden momenteel niet opgeslagen van de ene vergadering naar de andere.",
         "uploadLimitReached": "U kunt geen persoonlijke achtergronden meer uploaden.",
+        "uploadInProgress": "Afbeelding wordt geüpload…",
         "errors": {
           "close": "Sluiten",
           "file_too_large": {
@@ -353,11 +354,11 @@
     "tools": {
       "transcript": {
         "title": "Transcriberen",
-        "body": "Het gesprek opnemen."
+        "body": "Zet vergaderingen om in tekst."
       },
       "screenRecording": {
         "title": "Opnemen",
-        "body": "De vergadering opnemen."
+        "body": "Sla vergaderingen op als video."
       }
     }
   },

src/frontend/src/primitives/Spinner.tsx

@@ -20,7 +20,11 @@ export const Spinner = ({
   const r = 14 - strokeWidth
   const c = 2 * r * Math.PI
   return (
-    <ProgressBar aria-label="Loading..." value={30}>
+    <ProgressBar
+      aria-label="Loading..."
+      value={30}
+      style={{ height: size, width: size }}
+    >
       {({ percentage }) => (
         <div
           className={css({

src/mail/mjml/screen_recording.mjml

@@ -9,7 +9,7 @@
             align="center"
             src="{{logo_img}}"
             width="320px"
-            alt="{%trans 'Logo email' %}"
+            alt="{%trans 'Logo email' %} {{brandname}}"
           />
         </mj-column>
       </mj-section>

src/summary/summary/core/locales/de.py

@@ -23,8 +23,7 @@ Einige Punkte, die wir Ihnen empfehlen zu überprüfen:
 
 """,
     download_header_template=(
-        "\n*Laden Sie Ihre Aufnahme herunter, "
-        "indem Sie [diesem Link folgen]({download_link})*\n"
+        "\n*[Laden Sie hier Ihre Aufnahme herunter (externer Link)]({download_link})*\n"
     ),
     hallucination_replacement_text="[Text konnte nicht transkribiert werden]",
     document_default_title="Transkription",

src/summary/summary/core/locales/en.py

@@ -23,7 +23,7 @@ A few things we recommend you check:
 
 """,
     download_header_template=(
-        "\n*Download your recording by [following this link]({download_link})*\n"
+        "\n*[Download your recording (external link)]({download_link})*\n"
     ),
     hallucination_replacement_text="[Unable to transcribe text]",
     document_default_title="Transcription",

src/summary/summary/core/locales/fr.py

@@ -23,7 +23,7 @@ Quelques points que nous vous conseillons de vérifier :
 
 """,
     download_header_template=(
-        "\n*Télécharger votre enregistrement en [suivant ce lien]({download_link})*\n"
+        "\n*[Télécharger votre enregistrement (lien externe)]({download_link})*\n"
     ),
     hallucination_replacement_text="[Texte impossible à transcrire]",
     document_default_title="Transcription",

src/summary/summary/core/locales/nl.py

@@ -23,7 +23,7 @@ Een paar punten die wij u aanraden te controleren:
 
 """,
     download_header_template=(
-        "\n*Download uw opname door [deze link te volgen]({download_link})*\n"
+        "\n*[Download hier je opname (externe link)]({download_link})*\n"
     ),
     hallucination_replacement_text="[Tekst kon niet worden getranscribeerd]",
     document_default_title="Transcriptie",