fix: label the Attach from Files dialog's X as Close

components/files/__tests__/file-picker-dialog.test.tsx

@@ -44,6 +44,16 @@ function renderPicker(list: () => Promise<FileNode[]> = async () => TREE) {
 }
 
 describe('FilePickerDialog', () => {
+  // The X in the header was labelled "Cancel" like the footer button.
+  it('names the header X "Close" and keeps one Cancel button, both closing', async () => {
+    const { onClose } = renderPicker();
+    await screen.findByText('invoice.pdf');
+    expect(screen.getAllByRole('button', { name: 'cancel' })).toHaveLength(1);
+    fireEvent.click(screen.getByRole('button', { name: 'close' }));
+    fireEvent.click(screen.getByRole('button', { name: 'cancel' }));
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
   it('lists the root without hidden or shared nodes, and offers Shared with me', async () => {
     renderPicker();
     expect(await screen.findByText('invoice.pdf')).toBeInTheDocument();

components/files/file-picker-dialog.tsx

@@ -45,6 +45,7 @@ function byFolderThenName(a: FileNode, b: FileNode): number {
 export function FilePickerDialog({ client, onClose, onPick }: FilePickerDialogProps) {
   const t = useTranslations("files");
   const tComposer = useTranslations("email_composer");
+  const tCommon = useTranslations("common");
   const [nodes, setNodes] = useState<FileNode[] | null>(null);
   const [failed, setFailed] = useState(false);
   const [attempt, setAttempt] = useState(0);
@@ -245,7 +246,7 @@ export function FilePickerDialog({ client, onClose, onPick }: FilePickerDialogPr
           <button
             type="button"
             onClick={onClose}
-            aria-label={t("cancel")}
+            aria-label={tCommon("close")}
             className="p-1.5 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
           >
             <X className="w-4 h-4" />