chore: title & heading for annotations tab (#2450)

europeana · Oct 10, 2024 · ab6d605 · ab6d605
1 parent c392eeb
commit ab6d605
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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' });