Frontend: Alt text indicators

fe_calckey/frontend/client/src/components/MkDriveFileThumbnail.vue

@@ -1,5 +1,9 @@
 <template>
-    <button ref="thumbnail" class="zdjebgpv">
+    <button
+        ref="thumbnail"
+        class="zdjebgpv"
+        :class="{ 'no-alt': !file.comment }"
+    >
         <ImgWithBlurhash
             v-if="isThumbnailAvailable"
             :hash="file.blurhash"
@@ -92,6 +96,10 @@ const isThumbnailAvailable = computed(() => {
     padding: 0;
     cursor: pointer;
 
+    &.no-alt {
+        border: 2px solid orangered;
+    }
+
     > .icon-sub {
         position: absolute;
         width: 30%;

fe_calckey/frontend/client/src/components/MkMediaImage.vue

@@ -27,19 +27,38 @@
             />
             <div v-if="image.type === 'image/gif'" class="gif">GIF</div>
         </a>
-        <button
+        <div class="_image_controls">
-            v-tooltip="i18n.ts.hide"
+            <button
-            class="_button hide"
+                v-if="!image.comment"
-            @click="hide = true"
+                v-tooltip="i18n.ts.noAltText"
-        >
+                class="_button _image_control_btn _image_control_warn"
-            <i class="ph-eye-slash ph-bold ph-lg"></i>
+                @click="noAltTextPopup"
-        </button>
+            >
+                <i class="ph-file-x ph-bold ph-lg"></i>
+            </button>
+            <button
+                v-if="image.comment"
+                v-tooltip="i18n.ts.altText"
+                class="_button _image_control_btn"
+                @click="altTextPopup"
+            >
+                <i class="ph-file-text ph-bold ph-lg"></i>
+            </button>
+            <button
+                v-tooltip="i18n.ts.hide"
+                class="_button _image_control_btn"
+                @click="hide = true"
+            >
+                <i class="ph-eye-slash ph-bold ph-lg"></i>
+            </button>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { watch } from "vue";
 import type * as misskey from "calckey-js";
+import * as os from "@/os";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
@@ -52,6 +71,26 @@ const props = defineProps<{
 
 let hide = $ref(true);
 
+function noAltTextPopup(event: MouseEvent) {
+    os.alert({
+        type: "warning",
+        title: i18n.ts.noAltText,
+        text: i18n.ts.noAltTextDescription,
+    });
+
+    event.stopPropagation();
+}
+
+function altTextPopup(event: MouseEvent) {
+    os.alert({
+        type: "info",
+        title: i18n.ts.altText,
+        text: props.image.comment,
+    });
+
+    event.stopPropagation();
+}
+
 const url =
     props.raw || defaultStore.state.loadRawImages
         ? props.image.url
@@ -110,22 +149,34 @@ watch(
     position: relative;
     background: var(--bg);
 
-    > .hide {
+    > ._image_controls {
-        display: block;
+        display: flex;
         position: absolute;
-        border-radius: 6px;
+        gap: 6px;
-        background-color: var(--accentedBg);
-        -webkit-backdrop-filter: var(--blur, blur(15px));
-        backdrop-filter: var(--blur, blur(15px));
-        color: var(--accent);
-        font-size: 0.8em;
-        padding: 6px 8px;
-        text-align: center;
         top: 12px;
         right: 12px;
 
-        > i {
+        > ._image_control_btn {
             display: block;
+            border-radius: 6px;
+            background-color: var(--accentedBg);
+            -webkit-backdrop-filter: var(--blur, blur(15px));
+            backdrop-filter: var(--blur, blur(15px));
+            color: var(--accent);
+            font-size: 0.8em;
+            padding: 6px 8px;
+            text-align: center;
+            border: 2px solid transparent;
+
+            > i {
+                display: block;
+            }
+        }
+
+        > ._image_control_warn {
+            color: #f6b195;
+            border: 2px solid #fa895c;
+            box-sizing: border-box;
         }
     }
 

fe_calckey/frontend/client/src/pages/gallery/post.vue

@@ -145,11 +145,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from "vue";
+import { computed, watch } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";

fe_calckey/frontend/locales/cs-CZ.yml

@@ -599,6 +599,8 @@ troubleshooting: "Poradce při potížích"
 whatIsNew: "Zobrazit změny"
 translate: "Přeložit"
 hide: "Skrýt"
+noAltText: "Chybějící popis obrázku"
+noAltTextDescription: "Tento obrázek nemá alt text. Popis obrázku je užitečný pro zrakově-postižené uživatele a poskytuje lepší kontext pro všechny."
 smartphone: "Telefon"
 tablet: "Tablet"
 auto: "Auto"

fe_calckey/frontend/locales/en-US.yml

@@ -942,6 +942,9 @@ deleteAccountConfirm: "This will irreversibly delete your account. Proceed?"
 incorrectPassword: "Incorrect password."
 voteConfirm: "Confirm your vote for \"{choice}\"?"
 hide: "Hide"
+altText: "Alt text"
+noAltText: "No alt text"
+noAltTextDescription: "This image does not have alt text. Alt text is useful for vision impaired users, as well as for everyone else for context."
 leaveGroup: "Leave group"
 leaveGroupConfirm: "Are you sure you want to leave \"{name}\"?"
 useDrawerReactionPickerForMobile: "Display reaction picker as drawer on mobile"