web/picker: add item type icons and improve accessibility

web/i18n/en/a11y/dialog.json

@@ -1,3 +1,4 @@
 {
-    "picker.item.generic": "media thumbnail"
+    "picker.item.photo": "photo thumbnail",
+    "picker.item.video": "video thumbnail"
 }

web/src/components/dialog/PickerDialog.svelte

@@ -50,6 +50,14 @@
             open = true;
         });
     }
+
+    // item id for alt text
+    let counter = 0;
+
+    const itemNumber = () => {
+        counter++
+        return counter
+    }
 </script>
 
 <dialog
@@ -74,7 +82,7 @@
         <div class="picker-body">
             {#if items}
                 {#each items as item}
-                    <PickerItem {item} />
+                    <PickerItem {item} number={itemNumber()} />
                 {/each}
             {/if}
         </div>

web/src/components/dialog/PickerItem.svelte

@@ -6,9 +6,18 @@
 
     import Skeleton from "$components/misc/Skeleton.svelte";
 
+    import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
+    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
+
     export let item: DialogPickerItem;
+    export let number: number;
 
     let imageLoaded = false;
+
+    let itemType = item.type;
+    if (!itemType) {
+        itemType = "photo"
+    }
 </script>
 
 <button
@@ -17,20 +26,31 @@
         downloadFile(item.url);
     }}
 >
+    {#if item.type}
+        <div class="picker-type">
+            {#if item.type === "video"}
+                <IconMovie />
+            {:else if item.type === "photo"}
+                <IconPhoto />
+            {/if}
+        </div>
+    {/if}
+
     <img
         class="picker-image"
         src={item.thumb ? item.thumb : item.url}
+
         class:loading={!imageLoaded}
         on:load={() => (imageLoaded = true)}
-        alt={$t("a11y.dialog.picker.item.generic")}
+
-        height="100"
+        alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"
-        width="100"
     />
     <Skeleton class="picker-image" hidden={imageLoaded} />
 </button>
 
 <style>
     .picker-item {
+        position: relative;
         background: none;
         padding: 2px;
         box-shadow: none;
@@ -62,4 +82,30 @@
             opacity: 0.8;
         }
     }
+
+    .picker-type {
+        position: absolute;
+        color: var(--white);
+        background: rgba(0, 0, 0, 0.5);
+        width: 24px;
+        height: 24px;
+        z-index: 9;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        top: 6px;
+        left: 6px;
+
+        border-radius: 4px;
+
+        pointer-events: none;
+    }
+
+    .picker-type :global(svg) {
+        width: 21px;
+        height: 21px;
+    }
 </style>