From 5a66b708b840eee1debb0cb78b6f9ffc18ab3c5f Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 31 Jul 2026 20:05:51 -0700
Subject: [PATCH] [eric] dock: agent tiles had no accessible name and a browser
 tile's hover card was an unlabeled screenshot

---
 .../pages/Dashboard/desktop/DesktopDock.tsx   |  3 +++
 .../Dashboard/desktop/DockHoverPreview.tsx    | 24 +++++++++----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
index 35ccfcdd..5b696dc1 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DesktopDock.tsx
@@ -196,6 +196,9 @@ function DesktopDock({
               <Box
                 key={entry.id}
                 className="osw-dock-tile"
+                role="button"
+                // The hover card carries the name for the eye; this carries it for everything else (screen readers, tests).
+                aria-label={entry.label}
                 onMouseEnter={(e) => beginHover(entry, e.currentTarget as HTMLElement)}
                 onClick={() => {
                   endHover();
diff --git a/frontend/src/app/pages/Dashboard/desktop/DockHoverPreview.tsx b/frontend/src/app/pages/Dashboard/desktop/DockHoverPreview.tsx
index 0eb31f99..e1c70104 100644
--- a/frontend/src/app/pages/Dashboard/desktop/DockHoverPreview.tsx
+++ b/frontend/src/app/pages/Dashboard/desktop/DockHoverPreview.tsx
@@ -27,20 +27,18 @@ function DockHoverPreview({ entry, top, image }: DockHoverPreviewProps): React.R
         pointerEvents: 'none',
       }}
     >
-      {image ? (
-        <Box component="img" src={image} alt="" sx={{ width: '100%', display: 'block' }} />
-      ) : (
-        <Box sx={{ p: 1.25 }}>
-          <Typography sx={{ color: '#fff', fontSize: '0.75rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {entry.label}
+      {image && <Box component="img" src={image} alt="" sx={{ width: '100%', display: 'block' }} />}
+      {/* The name rides along even under a live shot: a thumbnail of a page is not its title, and three identical glyphs need one. */}
+      <Box sx={{ p: 1.25, ...(image && { background: 'rgba(22,12,34,0.9)' }) }}>
+        <Typography sx={{ color: '#fff', fontSize: '0.75rem', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {entry.label}
+        </Typography>
+        {!image && entry.snippet && (
+          <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.6875rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+            {entry.snippet}
           </Typography>
-          {entry.snippet && (
-            <Typography sx={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.6875rem', mt: 0.25, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
-              {entry.snippet}
-            </Typography>
-          )}
-        </Box>
-      )}
+        )}
+      </Box>
     </Box>
   );
 }