From f6421a05917a3f00c7a957a303ba6761bcda8870 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 19 Feb 2024 20:21:31 +0300
Subject: [PATCH] Cleanup tag display for long lists of tags

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../src/components/VMediaInfo/VMediaTags.vue  | 198 ++++++++++++--
 frontend/src/locales/scripts/en.json5         |   5 +
 frontend/src/utils/focus-management.ts        |   7 +-
 .../test/playwright/e2e/collections.spec.ts   |  18 ++
 ...ad-4cf7-b91d-7f0e3bd06750_keep-alive.json5 | 257 ++++++++++++++++++
 5 files changed, 466 insertions(+), 19 deletions(-)
 create mode 100644 frontend/test/tapes/detail/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750_keep-alive.json5

diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
index def4e95e3c5..d9a6f4d2464 100644
--- a/frontend/src/components/VMediaInfo/VMediaTags.vue
+++ b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,38 +1,80 @@
 <template>
-  <ul v-if="tags.length && additionalSearchViews" class="flex flex-wrap gap-3">
-    <VTag
-      v-for="(tag, index) in tags"
-      :key="index"
-      :href="localizedTagPath(tag)"
-      :title="tag.name"
-    />
-  </ul>
-  <ul v-else class="flex flex-wrap gap-2">
-    <VMediaTag v-for="(tag, index) in tags" :key="index" tag="li">{{
-      tag.name
+  <div v-if="normalizedTags.length && additionalSearchViews">
+    <ul
+      ref="tagsContainerRef"
+      :aria-label="$t('mediaDetails.tags.title').toString()"
+      class="flex flex-wrap gap-3 overflow-y-hidden p-1.5px"
+      :class="heightClass"
+    >
+      <li v-for="tag in visibleTags" :key="tag">
+        <VTag :href="localizedTagPath(tag)" :title="tag" />
+      </li>
+    </ul>
+    <VButton
+      v-if="hasOverflow"
+      size="small"
+      variant="transparent-tx"
+      has-icon-end
+      class="label-bold -ms-2 mt-4 hover:underline"
+      @click="handleClick"
+      >{{
+        $t(
+          buttonStatus === "show"
+            ? "mediaDetails.tags.showAll"
+            : "mediaDetails.tags.seeLess"
+        )
+      }}<VIcon
+        name="caret-down"
+        :size="4"
+        :class="{ '-scale-y-100 transform': buttonStatus === 'hide' }"
+    /></VButton>
+  </div>
+
+  <ul
+    v-else
+    class="flex flex-wrap gap-2"
+    :aria-label="$t('mediaDetails.tags').toString()"
+  >
+    <VMediaTag v-for="(tag, index) in normalizedTags" :key="index" tag="li">{{
+      tag
     }}</VMediaTag>
   </ul>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  type PropType,
+  ref,
+} from "vue"
 import { useContext } from "@nuxtjs/composition-api"
 
+import { useResizeObserver, watchDebounced } from "@vueuse/core"
+
 import type { Tag } from "~/types/media"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
+import { focusElement } from "~/utils/focus-management"
+
 import VMediaTag from "~/components/VMediaTag/VMediaTag.vue"
 import VTag from "~/components/VTag/VTag.vue"
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
 
 export default defineComponent({
   name: "VMediaTags",
-  components: { VMediaTag, VTag },
+  components: { VIcon, VButton, VMediaTag, VTag },
   props: {
     tags: {
       type: Array as PropType<Tag[]>,
       required: true,
     },
   },
-  setup() {
+  setup(props) {
+    const tagsContainerRef = ref<HTMLElement>()
+
     const { app } = useContext()
     const featureFlagStore = useFeatureFlagStore()
 
@@ -40,11 +82,133 @@ export default defineComponent({
       featureFlagStore.isOn("additional_search_views")
     )
 
-    const localizedTagPath = (tag: Tag) => {
-      return app.localePath({ path: `tag/${tag.name}` })
+    const localizedTagPath = (tag: string) => {
+      return app.localePath({ path: `tag/${tag}` })
+    }
+
+    const normalizedTags = computed(() => {
+      return Array.from(new Set(props.tags.map((tag) => tag.name)))
+    })
+
+    const fourthRowStartsAt = ref<number>()
+
+    function findFourthRowStartsAt(parent: HTMLElement) {
+      const children = Array.from(parent.children)
+      if (!children.length) {
+        return 0
+      }
+      let rowCount = 0
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i] as HTMLElement
+        if (
+          !child.previousElementSibling ||
+          (child.previousElementSibling as HTMLElement).offsetLeft >
+            child.offsetLeft
+        ) {
+          rowCount++
+        }
+        if (rowCount === 4) {
+          return i
+        }
+      }
+      return children.length
+    }
+
+    const visibleTags = computed(() => {
+      return fourthRowStartsAt.value && buttonStatus.value === "show"
+        ? normalizedTags.value.slice(0, fourthRowStartsAt.value)
+        : normalizedTags.value
+    })
+
+    const hasOverflow = computed(() => {
+      return (
+        fourthRowStartsAt.value &&
+        fourthRowStartsAt.value < normalizedTags.value.length
+      )
+    })
+
+    onMounted(() => {
+      /**
+       * Find the index of the first item after the third row of tags. This is used
+       * to determine which tags to hide.
+       */
+      if (tagsContainerRef.value) {
+        fourthRowStartsAt.value = findFourthRowStartsAt(tagsContainerRef.value)
+      }
+    })
+
+    const buttonStatus = ref<"show" | "hide">("show")
+    /**
+     * Toggles the text for the "Show more" button. When showing more tags, we also
+     * focus the first tag in the newly-opened row for a11y.
+     */
+    const handleClick = () => {
+      buttonStatus.value = buttonStatus.value === "show" ? "hide" : "show"
+      if (buttonStatus.value === "hide" && fourthRowStartsAt.value) {
+        nextTick(() => {
+          if (!fourthRowStartsAt.value) {
+            return
+          }
+          const firstTagInFourthRow = tagsContainerRef.value?.children.item(
+            fourthRowStartsAt.value
+          ) as HTMLElement
+          focusElement(firstTagInFourthRow?.querySelector("a"))
+        })
+      }
     }
 
-    return { additionalSearchViews, localizedTagPath }
+    const heightClass = computed(() => {
+      if (!hasOverflow.value) {
+        return "max-h-none"
+      }
+      /**
+       * Height is 3 rows of tags, gaps, and a padding for the focus rings.
+       */
+      return buttonStatus.value === "show" ? "max-h-[7.6875rem]" : "mah-h-none"
+    })
+
+    const listWidth = ref<number>()
+    useResizeObserver(tagsContainerRef, (entries) => {
+      listWidth.value = entries[0].contentRect.width
+    })
+
+    watchDebounced(
+      listWidth,
+      (newWidth, oldWidth) => {
+        if (!tagsContainerRef.value) {
+          return
+        }
+        const isWidening = oldWidth && newWidth && newWidth > oldWidth
+
+        if (isWidening) {
+          fourthRowStartsAt.value = normalizedTags.value.length
+        }
+        nextTick(() => {
+          if (tagsContainerRef.value) {
+            fourthRowStartsAt.value = findFourthRowStartsAt(
+              tagsContainerRef.value
+            )
+          }
+        })
+      },
+      { debounce: 300 }
+    )
+
+    return {
+      tagsContainerRef,
+
+      additionalSearchViews,
+      localizedTagPath,
+
+      normalizedTags,
+      visibleTags,
+
+      hasOverflow,
+      buttonStatus,
+      heightClass,
+
+      handleClick,
+    }
   },
 })
 </script>
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index 9cab04500bf..e128fa84536 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -497,6 +497,11 @@
     },
     imageInfo: "Image information",
     audioInfo: "Audio information",
+    tags: {
+      title: "Tags",
+      showAll: "Show all tags",
+      seeLess: "See less",
+    },
     contentReport: {
       short: "Report",
       long: "Report this content",
diff --git a/frontend/src/utils/focus-management.ts b/frontend/src/utils/focus-management.ts
index b9db344ea18..814d9836ed5 100644
--- a/frontend/src/utils/focus-management.ts
+++ b/frontend/src/utils/focus-management.ts
@@ -88,8 +88,11 @@ export function isFocusableElement(element: HTMLElement) {
   return element.matches(focusableSelector)
 }
 
-export function focusElement(element: HTMLElement | null) {
-  element?.focus()
+export function focusElement(element: HTMLElement | Element | null) {
+  if (!element || !(element instanceof HTMLElement)) {
+    return
+  }
+  element.focus()
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
diff --git a/frontend/test/playwright/e2e/collections.spec.ts b/frontend/test/playwright/e2e/collections.spec.ts
index 89a929af0af..08018501d32 100644
--- a/frontend/test/playwright/e2e/collections.spec.ts
+++ b/frontend/test/playwright/e2e/collections.spec.ts
@@ -6,6 +6,7 @@ import {
   getH1,
   getLoadMoreButton,
 } from "~~/test/playwright/utils/components"
+import { t } from "~~/test/playwright/utils/i18n"
 
 test.describe.configure({ mode: "parallel" })
 
@@ -55,3 +56,20 @@ test.describe("collections", () => {
     expect(await page.locator("figure").count()).toEqual(20)
   })
 })
+test("some tags are hidden if there are more than 3 rows", async ({ page }) => {
+  await preparePageForTests(page, "xl", {
+    features: { additional_search_views: "on" },
+  })
+  await page.goto("/image/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750")
+
+  const tags = page.getByRole("list", { name: t("mediaDetails.tags.title") })
+  await expect(tags).toBeVisible()
+  const tagsCount = await tags.locator("li").count()
+  const showMoreButton = page.getByRole("button", {
+    name: t("mediaDetails.tags.showAll"),
+  })
+  await expect(showMoreButton).toBeVisible()
+
+  await showMoreButton.click()
+  expect(await tags.locator("li").count()).toBeGreaterThan(tagsCount)
+})
diff --git a/frontend/test/tapes/detail/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750_keep-alive.json5 b/frontend/test/tapes/detail/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750_keep-alive.json5
new file mode 100644
index 00000000000..bcaf7538e20
--- /dev/null
+++ b/frontend/test/tapes/detail/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750_keep-alive.json5
@@ -0,0 +1,257 @@
+{
+    meta: {
+        createdAt: '2024-02-19T17:03:23.360Z',
+        host: 'https://api.openverse.engineering',
+        resHumanReadable: true,
+        resUncompressed: true,
+    },
+    req: {
+        headers: {
+            connection: 'keep-alive',
+        },
+        url: '/v1/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750/',
+        method: 'GET',
+        body: '',
+    },
+    res: {
+        status: 200,
+        headers: {
+            date: [
+                'Mon, 19 Feb 2024 17:03:23 GMT',
+            ],
+            'content-type': [
+                'application/json',
+            ],
+            'transfer-encoding': [
+                'chunked',
+            ],
+            connection: [
+                'keep-alive',
+            ],
+            vary: [
+                'Accept-Encoding, Accept, Authorization, origin',
+            ],
+            allow: [
+                'GET, HEAD, OPTIONS',
+            ],
+            'x-ratelimit-limit-anon_burst': [
+                '20/min',
+            ],
+            'x-ratelimit-available-anon_burst': [
+                '19',
+            ],
+            'x-ratelimit-limit-anon_sustained': [
+                '200/day',
+            ],
+            'x-ratelimit-available-anon_sustained': [
+                '199',
+            ],
+            'x-frame-options': [
+                'DENY',
+            ],
+            'x-content-type-options': [
+                'nosniff',
+            ],
+            'referrer-policy': [
+                'same-origin',
+            ],
+            'cross-origin-opener-policy': [
+                'same-origin',
+            ],
+            'x-request-id': [
+                'f3cf70767a3e4dc3bf40b854158123ea',
+            ],
+            'cache-control': [
+                'max-age=14400',
+            ],
+            'cf-cache-status': [
+                'HIT',
+            ],
+            age: [
+                '27135',
+            ],
+            'last-modified': [
+                'Mon, 19 Feb 2024 09:31:08 GMT',
+            ],
+            'strict-transport-security': [
+                'max-age=15552000; includeSubDomains; preload',
+            ],
+            server: [
+                'cloudflare',
+            ],
+            'cf-ray': [
+                '8580153e2f57692b-FRA',
+            ],
+            'content-encoding': [
+                'br',
+            ],
+            'alt-svc': [
+                'h3=":443"; ma=86400',
+            ],
+        },
+        body: {
+            id: '2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750',
+            title: 'August Great Horned Owl',
+            indexed_on: '2020-04-25T07:58:25.731612Z',
+            foreign_landing_url: 'https://www.flickr.com/photos/7327719@N06/3823784992',
+            url: 'https://live.staticflickr.com/3486/3823784992_a1dcf4a1d1_b.jpg',
+            creator: "Vicki's Nature",
+            creator_url: 'https://www.flickr.com/photos/7327719@N06',
+            license: 'by-nc-nd',
+            license_version: '2.0',
+            license_url: 'https://creativecommons.org/licenses/by-nc-nd/2.0/',
+            provider: 'flickr',
+            source: 'flickr',
+            category: null,
+            filesize: null,
+            filetype: null,
+            tags: [
+                {
+                    name: '100commentgroup',
+                    accuracy: null,
+                },
+                {
+                    name: 'aas2010',
+                    accuracy: null,
+                },
+                {
+                    name: 'beautifulworldchallenges',
+                    accuracy: null,
+                },
+                {
+                    name: 'bird',
+                    accuracy: null,
+                },
+                {
+                    name: 'bwcgg',
+                    accuracy: null,
+                },
+                {
+                    name: 'canon',
+                    accuracy: null,
+                },
+                {
+                    name: 'cnc',
+                    accuracy: null,
+                },
+                {
+                    name: 'faves3539',
+                    accuracy: null,
+                },
+                {
+                    name: 'favescontestfavored',
+                    accuracy: null,
+                },
+                {
+                    name: 'favescontestwinner',
+                    accuracy: null,
+                },
+                {
+                    name: 'favesfavoredchallenge',
+                    accuracy: null,
+                },
+                {
+                    name: 'favesfavoredwinner',
+                    accuracy: null,
+                },
+                {
+                    name: 'favesrunnerupchallenge',
+                    accuracy: null,
+                },
+                {
+                    name: 'favesrunnerupwinner',
+                    accuracy: null,
+                },
+                {
+                    name: 'favestopseedchallenge',
+                    accuracy: null,
+                },
+                {
+                    name: 'favestopseedchallengex2',
+                    accuracy: null,
+                },
+                {
+                    name: 'faveswinner',
+                    accuracy: null,
+                },
+                {
+                    name: 'gameshotbefore2013bigbirdportraits',
+                    accuracy: null,
+                },
+                {
+                    name: 'gamesweep',
+                    accuracy: null,
+                },
+                {
+                    name: 'gamewinner',
+                    accuracy: null,
+                },
+                {
+                    name: 'georgia',
+                    accuracy: null,
+                },
+                {
+                    name: 'goldstaraward',
+                    accuracy: null,
+                },
+                {
+                    name: 'goldstarawardcontest78',
+                    accuracy: null,
+                },
+                {
+                    name: 'greathornedowl',
+                    accuracy: null,
+                },
+                {
+                    name: 'motherbirds',
+                    accuracy: null,
+                },
+                {
+                    name: 'natureoutpost',
+                    accuracy: null,
+                },
+                {
+                    name: 'natureselegantshots',
+                    accuracy: null,
+                },
+                {
+                    name: 'owl',
+                    accuracy: null,
+                },
+                {
+                    name: 'readygamex2',
+                    accuracy: null,
+                },
+                {
+                    name: 'return',
+                    accuracy: null,
+                },
+                {
+                    name: 's5',
+                    accuracy: null,
+                },
+                {
+                    name: 'specanimal',
+                    accuracy: null,
+                },
+                {
+                    name: 'sweep',
+                    accuracy: null,
+                },
+                {
+                    name: 'vickisnature',
+                    accuracy: null,
+                },
+            ],
+            attribution: '"August Great Horned Owl" by Vicki\'s Nature is licensed under CC BY-NC-ND 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-nd/2.0/.',
+            fields_matched: [],
+            mature: false,
+            height: 1024,
+            width: 1024,
+            thumbnail: 'http://localhost:49153/v1/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750/thumb/',
+            detail_url: 'http://localhost:49153/v1/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750/',
+            related_url: 'http://localhost:49153/v1/images/2bc7dde0-5aad-4cf7-b91d-7f0e3bd06750/related/',
+            unstable__sensitivity: [],
+        },
+    },
+}
\ No newline at end of file