Use different verb for link text versus image text, but use custom al…

…t text for both
UNC-Libraries · Dec 6, 2024 · 2ed0483 · 2ed0483
1 parent 404c154
commit 2ed0483
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 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
@@ -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
@@ -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');
     });