Show "source tags" heading only if generated tags exist

Signed-off-by: Olga Bulat <[email protected]>
WordPress · May 29, 2024 · 579dd43 · 579dd43
1 parent 4c66149
commit 579dd43
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="flex flex-col gap-6 sm:gap-8">
-    <div v-if="tagsByType.source.length > 0">
-      <h3 class="label-regular mb-2">
+    <div v-if="hasSourceTags">
+      <h3 v-if="hasGeneratedTags" class="label-regular mb-2">
         {{ $t("mediaDetails.tags.source.heading") }}
       </h3>
+      <h3 v-else class="sr-only">{{ $t("mediaDetails.tags.title") }}</h3>
       <VCollapsibleTagSection
         :media-type="mediaType"
         :tags="tagsByType.source"
       />
     </div>
-    <div v-if="tagsByType.generated.length > 0">
+    <div v-if="hasGeneratedTags">
       <div class="label-regular mb-2 flex gap-2">
         <h3>{{ $t("mediaDetails.tags.generated.heading") }}</h3>
         <VLink :href="generatedTagsPath">{{
@@ -68,11 +69,16 @@ export default defineComponent({
       return { generated: generatedTags, source: sourceTags }
     })
 
+    const hasSourceTags = computed(() => tagsByType.value.source.length > 0)
+    const hasGeneratedTags = computed(
+      () => tagsByType.value.generated.length > 0
+    )
+
     const { app } = useContext()
 
     const generatedTagsPath = computed(() => app.localePath("/generated-tags"))
 
-    return { generatedTagsPath, tagsByType }
+    return { generatedTagsPath, tagsByType, hasSourceTags, hasGeneratedTags }
   },
 })
 </script>
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
@@ -825,6 +825,7 @@
     imageInfo: "Image information",
     audioInfo: "Audio track information",
     tags: {
+      title: "Tags",
       generated: {
         heading: "Generated tags",
         pageTitle: "What is this?",