From 8bd1d8788089a22f5d28fdfb54681e32e175642e Mon Sep 17 00:00:00 2001
From: "Didier (did)" <did@odoo.com>
Date: Thu, 7 Sep 2023 13:12:57 +0200
Subject: [PATCH] [IMP] mail: allow scroll using keyboard key in chat window

Before this PR, it was not possible to scroll a chat window using page down/page
up, home or end keys.
This is because the thread component that is scrollable cannot became an activeElement.
This PR fix this by adding a tabindex="-1" on the scrollable element.

Task-3468978

closes odoo/odoo#134657

Signed-off-by: Matthieu Stockbauer (tsm) <tsm@odoo.com>
---
 addons/mail/static/src/core/common/thread.scss | 3 +++
 addons/mail/static/src/core/common/thread.xml  | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/addons/mail/static/src/core/common/thread.scss b/addons/mail/static/src/core/common/thread.scss
index 4699ff2b58e..ca51f24e391 100644
--- a/addons/mail/static/src/core/common/thread.scss
+++ b/addons/mail/static/src/core/common/thread.scss
@@ -1,3 +1,6 @@
+.o-mail-Thread:focus-visible {
+    outline: 0;
+}
 .o-mail-Thread-newMessage {
     transition: opacity 0.5s;
 
diff --git a/addons/mail/static/src/core/common/thread.xml b/addons/mail/static/src/core/common/thread.xml
index 37e5fa37755..fa8b4718859 100644
--- a/addons/mail/static/src/core/common/thread.xml
+++ b/addons/mail/static/src/core/common/thread.xml
@@ -3,7 +3,7 @@
 
 <t t-name="mail.Thread">
     <t t-if="env.inChatter" t-call="mail.Thread.jumpPresent"/> <!-- chatter has its own scrollable, this ensures proper sticky showing -->
-    <div class="o-mail-Thread position-relative flex-grow-1 d-flex flex-column" t-att-class="{ 'overflow-auto': props.hasScrollAdjust, 'pb-4': !state.showJumpPresent }" t-ref="messages">
+    <div class="o-mail-Thread position-relative flex-grow-1 d-flex flex-column" t-att-class="{ 'overflow-auto': props.hasScrollAdjust, 'pb-4': !state.showJumpPresent }" t-ref="messages" tabindex="-1">
         <t t-if="!props.thread.isEmpty or props.thread.loadOlder or props.thread.hasLoadingFailed" name="content">
             <div class="d-flex flex-column position-relative flex-grow-1" t-att-class="{'justify-content-end': !env.inChatter and props.thread.type !== 'mailbox'}">
                 <span class="position-absolute w-100 invisible" t-att-class="props.order === 'asc' ? 'bottom-0' : 'top-0'" t-ref="present-treshold" t-att-style="`height: Min(${PRESENT_THRESHOLD}px, 100%)`"/>