From 9575aba9ca645880bd674fd5315e91d3ad6b5c0f Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Mon, 24 Apr 2023 18:40:48 +0000
Subject: [PATCH] [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>
---
 .../static/src/web/activity/activity_button.js    | 15 +++++++++++++++
 .../static/src/web/activity/activity_button.xml   |  2 +-
 .../project_task_state_selection.xml              |  2 +-
 .../state_selection/state_selection_field.xml     |  2 +-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/addons/mail/static/src/web/activity/activity_button.js b/addons/mail/static/src/web/activity/activity_button.js
index 4b43f3ac32e..852577c3ab6 100644
--- a/addons/mail/static/src/web/activity/activity_button.js
+++ b/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();
diff --git a/addons/mail/static/src/web/activity/activity_button.xml b/addons/mail/static/src/web/activity/activity_button.xml
index 3397b59620e..c4e24ef33e8 100644
--- a/addons/mail/static/src/web/activity/activity_button.xml
+++ b/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>
diff --git a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml
index 01fa04f737a..e901287eba5 100644
--- a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml
+++ b/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>
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
index 96d35131481..086c6d384d0 100644
--- a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
+++ b/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>