From b4e01fee639a7b4119ec86490625237c3f0ba39a Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Sun, 1 Oct 2023 01:05:18 +0200
Subject: [PATCH] Frontend: Alt text indicators

---
 .../src/components/MkDriveFileThumbnail.vue   | 10 ++-
 .../client/src/components/MkMediaImage.vue    | 87 +++++++++++++++----
 .../client/src/pages/gallery/post.vue         |  3 +-
 fe_calckey/frontend/locales/cs-CZ.yml         |  2 +
 fe_calckey/frontend/locales/en-US.yml         |  3 +
 5 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/fe_calckey/frontend/client/src/components/MkDriveFileThumbnail.vue b/fe_calckey/frontend/client/src/components/MkDriveFileThumbnail.vue
index 96ca279..ef0cd8c 100644
--- a/fe_calckey/frontend/client/src/components/MkDriveFileThumbnail.vue
+++ b/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%;
diff --git a/fe_calckey/frontend/client/src/components/MkMediaImage.vue b/fe_calckey/frontend/client/src/components/MkMediaImage.vue
index 70b33dc..7b5280a 100644
--- a/fe_calckey/frontend/client/src/components/MkMediaImage.vue
+++ b/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
-            v-tooltip="i18n.ts.hide"
-            class="_button hide"
-            @click="hide = true"
-        >
-            <i class="ph-eye-slash ph-bold ph-lg"></i>
-        </button>
+        <div class="_image_controls">
+            <button
+                v-if="!image.comment"
+                v-tooltip="i18n.ts.noAltText"
+                class="_button _image_control_btn _image_control_warn"
+                @click="noAltTextPopup"
+            >
+                <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 {
-        display: block;
+    > ._image_controls {
+        display: flex;
         position: absolute;
-        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;
+        gap: 6px;
         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;
         }
     }
 
diff --git a/fe_calckey/frontend/client/src/pages/gallery/post.vue b/fe_calckey/frontend/client/src/pages/gallery/post.vue
index e47cd8f..229b9dd 100644
--- a/fe_calckey/frontend/client/src/pages/gallery/post.vue
+++ b/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";
diff --git a/fe_calckey/frontend/locales/cs-CZ.yml b/fe_calckey/frontend/locales/cs-CZ.yml
index da92441..a9e7c7c 100644
--- a/fe_calckey/frontend/locales/cs-CZ.yml
+++ b/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"
diff --git a/fe_calckey/frontend/locales/en-US.yml b/fe_calckey/frontend/locales/en-US.yml
index daba0b8..a9ca55f 100644
--- a/fe_calckey/frontend/locales/en-US.yml
+++ b/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"