diff --git a/e2e/src/web/specs/timeline/utils.ts b/e2e/src/web/specs/timeline/utils.ts
index 4c232ff09a..f6aa5e0f49 100644
--- a/e2e/src/web/specs/timeline/utils.ts
+++ b/e2e/src/web/specs/timeline/utils.ts
@@ -119,7 +119,7 @@ export const thumbnailUtils = {
   async expectSelectedReadonly(page: Page, assetId: string) {
     const container = thumbnailUtils.withAssetId(page, assetId);
     await expect(container.locator('[data-selected]')).toBeVisible();
-    await expect(container.locator('button[role="checkbox"][disabled]')).toBeVisible();
+    await expect(container.locator('[data-disabled]')).toBeVisible();
   },
   async expectTimelineHasOnScreenAssets(page: Page) {
     const first = await thumbnailUtils.getFirstInViewport(page);
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index d141c96641..33a06d6fa2 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -224,6 +224,8 @@
   bind:this={element}
   data-asset={asset.id}
   data-thumbnail-focus-container
+  data-selected={selected || undefined}
+  data-disabled={disabled || undefined}
   tabindex={0}
   role="link"
 >
@@ -234,7 +236,6 @@
       { 'rounded-xl': selected },
     ]}
     data-outline
-    data-selected={selected || undefined}
   ></div>
 
   <div