fix: button text for file-select slot can now be customized (muxinc#1252)

## Changes

- Prevent translating the text if the file picker button is a custom
one.
- Added a test for this case

Author: Pintorado

packages/mux-uploader/src/mux-uploader-file-select.ts

@@ -32,7 +32,7 @@ export const fileSelectFragment = /*html*/ `
 
   </style>
 
-  <button id="file-select" type="button" part="file-select-button"></button>
+  <button id="file-select" type="button" part="file-select-button">Upload a video</button>
 `;
 
 const template = document.createElement('template');
@@ -157,13 +157,10 @@ class MuxUploaderFileSelectElement extends globalThis.HTMLElement {
     const locale = (this.#uploaderEl as MuxUploaderElement)?.locale;
     const text = t('Upload a video', locale);
 
-    if (this.filePickerEl) {
-      this.filePickerEl.textContent = text;
-    } else {
-      const buttonEl = this.shadowRoot?.querySelector('#file-select') as HTMLButtonElement;
-      if (buttonEl) {
-        buttonEl.textContent = text;
-      }
+    // Translate text only if it's the default button (inside the shadow DOM)
+    const buttonEl = this.shadowRoot?.querySelector('#file-select') as HTMLButtonElement;
+    if (buttonEl) {
+      buttonEl.textContent = text;
     }
   }
 }

packages/mux-uploader/test/file-select.test.js

@@ -126,5 +126,32 @@ describe('<mux-uploader-file-select>', () => {
       assert.equal(button.textContent, t('Upload a video', 'fr'), 'displays French text');
       assert.equal(button.textContent, 'Télécharger une vidéo', 'matches French translation');
     });
+
+    it('preserves custom button text when locale changes', async function () {
+      const uploader = await fixture(`
+        <mux-uploader 
+          endpoint="https://my-authenticated-url/storage?your-url-params">
+          <button class="btn" type="button" slot="file-select">Pick a file</button>
+        </mux-uploader>
+      `);
+
+      const el = uploader.shadowRoot.querySelector('mux-uploader-file-select');
+      const slot = el.querySelector('slot');
+      const button = slot.assignedNodes()[0];
+
+      // Verify initial custom text
+      assert.equal(button.textContent, 'Pick a file', 'custom button text is preserved initially');
+
+      // Change locale to Spanish
+      uploader.setAttribute('locale', 'es');
+
+      // Custom button text should still be preserved (not overwritten by translation)
+      assert.equal(button.textContent, 'Pick a file', 'custom button text is preserved after locale change');
+      assert.notEqual(
+        button.textContent,
+        t('Upload a video', 'es'),
+        'custom button text is not overwritten by translation'
+      );
+    });
   });
 });