From ab6d60565f9e959d038cd7589dc93dbbb7f05dc0 Mon Sep 17 00:00:00 2001
From: Richard Doe <richard.doe@rwdit.net>
Date: Thu, 10 Oct 2024 11:02:30 +0100
Subject: [PATCH] chore: title & heading for annotations tab (#2450)

---
 .../src/components/item/ItemMediaSidebar.vue       | 14 +++++++++++---
 packages/portal/src/i18n/lang/en.js                |  1 +
 .../unit/components/item/ItemMediaSidebar.spec.js  | 12 +++++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/portal/src/components/item/ItemMediaSidebar.vue b/packages/portal/src/components/item/ItemMediaSidebar.vue
index 1d811514d6..dfa1d96592 100644
--- a/packages/portal/src/components/item/ItemMediaSidebar.vue
+++ b/packages/portal/src/components/item/ItemMediaSidebar.vue
@@ -10,12 +10,20 @@
       <b-tabs vertical>
         <b-tab
           v-if="annotationUri"
+          data-qa="item media sidebar annotations"
+          button-id="item-media-sidebar-annotations"
+          :title-link-attributes="{ 'aria-label': $t('media.sidebar.annotations') }"
+          @mouseleave.native="hideTooltips"
         >
+          <b-tooltip
+            target="item-media-sidebar-annotations"
+            :title="$t('media.sidebar.annotations')"
+            boundary=".iiif-viewer-sidebar"
+          />
           <template #title>
-            <!-- TODO: label for a11y -->
-            <!-- TODO: replace with new icon for annotations -->
-            <span class="icon icon-text-bold" />
+            <span class="icon icon-annotations" />
           </template>
+          <h2>{{ $t('media.sidebar.annotations') }}</h2>
           <MediaAnnotationList
             :uri="annotationUri"
             :target-id="annotationTargetId"
diff --git a/packages/portal/src/i18n/lang/en.js b/packages/portal/src/i18n/lang/en.js
index 0dfaff3ddd..c6a744e4ad 100644
--- a/packages/portal/src/i18n/lang/en.js
+++ b/packages/portal/src/i18n/lang/en.js
@@ -943,6 +943,7 @@ export default {
       "zoomOut": "Zoom out"
     },
     "sidebar": {
+      "annotations": "Annotations",
       "hide": "Hide sidebar",
       "IIIFManifest": "IIIF Manifest",
       "links": "Links",
diff --git a/packages/portal/tests/unit/components/item/ItemMediaSidebar.spec.js b/packages/portal/tests/unit/components/item/ItemMediaSidebar.spec.js
index 5715758ad9..2d43158387 100644
--- a/packages/portal/tests/unit/components/item/ItemMediaSidebar.spec.js
+++ b/packages/portal/tests/unit/components/item/ItemMediaSidebar.spec.js
@@ -10,7 +10,7 @@ const factory = (propsData = {}) => shallowMount(ItemMediaSidebar, {
   mocks: {
     $t: (key) => key
   },
-  stubs: ['b-link', 'b-tooltip']
+  stubs: ['b-link', 'b-tooltip', 'MediaAnnotationList']
 });
 
 describe('components/item/ItemMediaSidebar', () => {
@@ -23,6 +23,16 @@ describe('components/item/ItemMediaSidebar', () => {
       expect(sidebar.exists()).toBe(true);
     });
 
+    describe('when there is an annotation URI', () => {
+      it('has a tab for annotations', () => {
+        const wrapper = factory({ annotationUri: 'https://example.com/iiif/123/annotations' });
+
+        const annotationsTab = wrapper.find('[data-qa="item media sidebar annotations"]');
+
+        expect(annotationsTab.exists()).toBe(true);
+      });
+    });
+
     describe('when there is a manifest URI', () => {
       it('has a tab for links', () => {
         const wrapper = factory({ manifestUri: 'https://example.com/iiif/123/manifest' });