feat(web, a11y): add labels! (#8354)

* feat(web, a11y): add labels!

* fix: move required prop to the top of the list

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -305,7 +305,13 @@
             </div>
           {:else if message}
             <div class="flex items-end w-fit ml-0">
-              <CircleIconButton size="15" icon={mdiSend} iconColor={'dark'} hoverColor={'rgb(173,203,250)'} />
+              <CircleIconButton
+                title="Send message"
+                size="15"
+                icon={mdiSend}
+                iconColor={'dark'}
+                hoverColor={'rgb(173,203,250)'}
+              />
             </div>
           {/if}
         </form>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -102,7 +102,7 @@
   class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
 >
   <div class="text-white">
-    <CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('back')} />
+    <CircleIconButton isOpacity={true} icon={mdiArrowLeft} title="Go back" on:click={() => dispatch('back')} />
   </div>
   <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
     {#if showShareButton}

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -39,7 +39,13 @@
             </div>
           </div>
           <div class="absolute right-2">
-            <CircleIconButton on:click={() => abort(downloadKey, download)} size="20" icon={mdiClose} forceDark />
+            <CircleIconButton
+              title="Close"
+              on:click={() => abort(downloadKey, download)}
+              size="20"
+              icon={mdiClose}
+              forceDark
+            />
           </div>
         </div>
       {/each}