From 2ed048351832f8606f546259527e1bf008b556d9 Mon Sep 17 00:00:00 2001
From: Ben Pennell <bbpennel@email.unc.edu>
Date: Fri, 6 Dec 2024 09:07:29 -0500
Subject: [PATCH] Use different verb for link text versus image text, but use
 custom alt text for both

---
 .../src/components/full_record/thumbnail.vue  | 19 ++++++++++++-------
 .../tests/unit/thumbnail.spec.js              |  6 +++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/static/js/vue-cdr-access/src/components/full_record/thumbnail.vue b/static/js/vue-cdr-access/src/components/full_record/thumbnail.vue
index 2b59d20172..d0e6d936fd 100644
--- a/static/js/vue-cdr-access/src/components/full_record/thumbnail.vue
+++ b/static/js/vue-cdr-access/src/components/full_record/thumbnail.vue
@@ -1,7 +1,7 @@
 <template>
-    <router-link :to="linkToPath" :title="tooltip" :aria-label="ariaText" class="thumbnail" :class="imgClasses">
+    <router-link :to="linkToPath" :title="tooltip" :aria-label="linkAltText" class="thumbnail" :class="imgClasses">
         <div v-if="src !== ''" :style="{ 'background-image': 'url(' + objectData.thumbnail_url + ')'}"
-             :aria-label="altText"
+             :aria-label="imageAltText"
              role="img"
              class="thumbnail-viewer"
              :class="{restricted: markedForDeletion(objectData) || isRestricted(objectData)}"></div>
@@ -53,15 +53,20 @@ export default {
             if (!text) {
                 text = this.objectData.title;
             }
-            return `Thumbnail for ${text}`;
+            return text;
+
         },
 
-        objectData() {
-            return this.permissionData(this.thumbnailData);
+        imageAltText() {
+            return `Thumbnail for ${this.altText}`;
         },
 
-        ariaText() {
-            return `Visit ${this.objectData.title}`
+        linkAltText() {
+            return `Visit ${this.altText}`;
+        },
+
+        objectData() {
+            return this.permissionData(this.thumbnailData);
         },
 
         badgeIcon() {
diff --git a/static/js/vue-cdr-access/tests/unit/thumbnail.spec.js b/static/js/vue-cdr-access/tests/unit/thumbnail.spec.js
index eb9395275d..4a5ea91ac6 100644
--- a/static/js/vue-cdr-access/tests/unit/thumbnail.spec.js
+++ b/static/js/vue-cdr-access/tests/unit/thumbnail.spec.js
@@ -132,7 +132,9 @@ describe('thumbnail.vue', () => {
         expect(wrapper.find('.thumbnail .thumbnail-viewer').exists()).toBe(true);
         expect(wrapper.find('i.placeholder').exists()).toBe(false);
         expect(wrapper.find('a').attributes('class'))
-            .toEqual('thumbnail thumbnail-size-large has_tooltip')
+            .toEqual('thumbnail thumbnail-size-large has_tooltip');
+        let linkText = wrapper.find('a').attributes('aria-label');
+        expect(linkText).toBe('Visit testCollection');
         let altText = wrapper.find('.thumbnail .thumbnail-viewer').attributes('aria-label');
         expect(altText).toBe('Thumbnail for testCollection');
     });
@@ -142,6 +144,8 @@ describe('thumbnail.vue', () => {
         updatedRecordData.briefObject.altText = 'Custom alt text';
         await wrapper.setProps({ thumbnailData: updatedRecordData });
         expect(wrapper.find('.thumbnail .thumbnail-viewer').exists()).toBe(true);
+        let linkText = wrapper.find('a').attributes('aria-label');
+        expect(linkText).toBe('Visit Custom alt text');
         let altText = wrapper.find('.thumbnail .thumbnail-viewer').attributes('aria-label');
         expect(altText).toBe('Thumbnail for Custom alt text');
     });