Floating dismissable alert - initial commit

src/features/files/FilesPage.tsx

@@ -1117,9 +1117,7 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
   return (
     <div className="workspace-data-page module-entry-page file-manager-page file-manager-fullscreen">
       {error && (
-        <div className="file-manager-alerts">
-          <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
-        </div>
+        <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>
       )}
 
       <div className={`file-manager-shell ${busy ? "is-loading" : ""}`}>
@@ -1325,6 +1323,19 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
         <FileDialog title={`Upload to ${activeDialogSpace?.label || "Files"} / ${activeDialogTarget?.folderPath || "Root"}`} onClose={closeDialog}>
           <div
             className={`file-upload-drop-zone ${dragActive ? "is-active" : ""}`}
+            role="button"
+            tabIndex={busy || !activeDialogSpace ? -1 : 0}
+            aria-label="Drop files here or click to select files"
+            aria-disabled={busy || !activeDialogSpace}
+            onClick={() => {
+              if (!busy && activeDialogSpace) fileInputRef.current?.click();
+            }}
+            onKeyDown={(event) => {
+              if ((event.key === "Enter" || event.key === " ") && !busy && activeDialogSpace) {
+                event.preventDefault();
+                fileInputRef.current?.click();
+              }
+            }}
             onDragOver={(event) => { event.preventDefault(); setDragActive(true); }}
             onDragLeave={() => setDragActive(false)}
             onDrop={(event) => {
@@ -1335,6 +1346,7 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
           >
             <UploadCloud size={28} aria-hidden="true" />
             <strong>Drop files here</strong>
+            <span>or click to select files</span>
             <span className="muted small-text">Files are uploaded into {activeDialogTarget?.folderPath || "Root"}.</span>
           </div>
           <ToggleSwitch label="Unpack ZIP uploads" checked={unpackZip} onChange={setUnpackZip} disabled={busy} />