Merge branch 'ph/fixSidebarCollapsedTooltipTitles' into 'master'

Fixes issuable collapsed sidebar tooltips

See merge request gitlab-org/gitlab!78693

app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

@@ -307,7 +307,12 @@ export default {
     @close="handleClose"
   >
     <template #collapsed>
-      <div v-if="isClassicSidebar" v-gl-tooltip class="sidebar-collapsed-icon">
+      <div
+        v-if="isClassicSidebar"
+        v-gl-tooltip.left.viewport
+        :title="attributeTypeTitle"
+        class="sidebar-collapsed-icon"
+      >
         <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="attributeTypeIcon" />
         <span class="collapse-truncated-title">
           {{ attributeTitle }}

app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue

@@ -177,19 +177,14 @@ export default {
     />
     <gl-button
       v-if="isClassicSidebar"
+      v-gl-tooltip.left.viewport
+      :title="tootltipTitle"
       category="tertiary"
       type="reset"
       class="sidebar-collapsed-icon sidebar-collapsed-container gl-rounded-0! gl-shadow-none!"
       @click.stop.prevent="toggleTodo"
     >
-      <gl-icon
-        v-gl-tooltip.left.viewport
-        :title="tootltipTitle"
-        :size="16"
-        :class="{ 'todo-undone': hasTodo }"
-        :name="collapsedButtonIcon"
-        :aria-label="collapsedButtonIcon"
-      />
+      <gl-icon :class="{ 'todo-undone': hasTodo }" :name="collapsedButtonIcon" />
     </gl-button>
   </div>
 </template>

spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js

-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -103,7 +103,7 @@ describe('Sidebar Todo Widget', () => {
     });
 
     it('sets default tooltip title', () => {
-      expect(wrapper.find(GlIcon).attributes('title')).toBe('Add a to do');
+      expect(wrapper.find(GlButton).attributes('title')).toBe('Add a to do');
     });
 
     it('when user has a to do', async () => {
@@ -113,7 +113,7 @@ describe('Sidebar Todo Widget', () => {
 
       await waitForPromises();
       expect(wrapper.find(GlIcon).props('name')).toBe('todo-done');
-      expect(wrapper.find(GlIcon).attributes('title')).toBe('Mark as done');
+      expect(wrapper.find(GlButton).attributes('title')).toBe('Mark as done');
     });
 
     it('emits `todoUpdated` event on click on icon', async () => {