[IMP] mail, *: add hover title to the activity button

*: project, web

This commit adds the title and aria-label attributes to the activity
button. This makes the hover display the summary or an explaination
about the button, especially when there is no text displayed next to
the button (in Kanban view).

In the state selection field, a title has been added when hovering
the state in kanban, allowing to see the current value. The project
task state selection has also been adapted to have that title attribute
set on the toggler.

task-3207639

closes odoo/odoo#120871

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/mail/static/src/web/activity/activity_button.js

@@ -2,6 +2,8 @@
 
 import { ActivityListPopover } from "@mail/web/activity/activity_list_popover";
 
+import { _t } from "@web/core/l10n/translation";
+
 import { usePopover } from "@web/core/popover/popover_hook";
 
 import { Component, useRef } from "@odoo/owl";
@@ -51,6 +53,19 @@ export class ActivityButton extends Component {
         return classes.join(" ");
     }
 
+    get title() {
+        if (this.props.record.data.activity_exception_decoration) {
+            return _t("Warning");
+        }
+        if (this.props.record.data.activity_summary) {
+            return this.props.record.data.activity_summary;
+        }
+        if (this.props.record.data.activity_type_id) {
+            return this.props.record.data.activity_type_id[1 /* display_name */];
+        }
+        return _t("Show activities");
+    }
+
     onClick() {
         if (this.popover.isOpen) {
             this.popover.close();

addons/mail/static/src/web/activity/activity_button.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.ActivityButton" owl="1">
-        <a class="o-mail-ActivityButton" role="button" t-on-click.prevent.stop="onClick" t-ref="button">
+        <a class="o-mail-ActivityButton" role="button" t-on-click.prevent.stop="onClick" t-ref="button" t-att-aria-label="title" t-att-title="title">
             <i class="fa fa-fw fa-lg" t-att-class="buttonClass" role="img"/>
         </a>
     </t>

addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml

@@ -41,7 +41,7 @@
 
         <!-- Normal dropdown mode toggle button (displayed on the card/record by default) -->
         <xpath expr="//t[@t-set-slot='toggler']/div" position="replace">
-            <div t-if="isView(['kanban', 'list']) or this.env.isSmall" class="d-flex align-items-center" t-att-class="{'o_task_state_list_view': isView(['list'])}">
+            <div t-if="isView(['kanban', 'list']) or this.env.isSmall" class="d-flex align-items-center" t-att-class="{'o_task_state_list_view': isView(['list'])}" t-att-title="label">
                 <i t-if="currentValue == '04_waiting_normal'" t-attf-class="{{ stateIcon(currentValue) }} {{ statusColor(currentValue) }}" style="color: #4A4F59;"/>
                 <i t-else="" t-attf-class="{{ stateIcon(currentValue) }} {{ statusColor(currentValue) }} {{ ['1_done', '1_canceled'].includes(currentValue) and isView(['kanban']) ? 'opacity-50' : '' }}"/>
             </div>

addons/web/static/src/views/fields/state_selection/state_selection_field.xml

@@ -11,7 +11,7 @@
         <t t-else="">
             <Dropdown togglerClass="'btn btn-link d-flex p-0'">
                 <t t-set-slot="toggler">
-                    <div class="d-flex align-items-center">
+                    <div class="d-flex align-items-center" t-att-title="props.showLabel ? null : label">
                         <span t-attf-class="o_status {{ statusColor(currentValue) }} "/>
                         <span t-if="props.showLabel" class="o_status_label ms-1" t-esc="label"/>
                     </div>