From 7390c02057d52d3e62206667c5c26e0aedf70f26 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Fri, 16 Feb 2024 18:03:58 -0300
Subject: [PATCH] fix(fuselage): Prevent focus state on clicking in `Messages`
 (#1288)

---
 .changeset/silver-pans-own.md                       |  5 +++++
 .../fuselage/src/components/Message/mixins.scss     | 13 +++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/silver-pans-own.md

diff --git a/.changeset/silver-pans-own.md b/.changeset/silver-pans-own.md
new file mode 100644
index 0000000000..a371dfb9e3
--- /dev/null
+++ b/.changeset/silver-pans-own.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): Prevent focus state on clicking in Messages
diff --git a/packages/fuselage/src/components/Message/mixins.scss b/packages/fuselage/src/components/Message/mixins.scss
index 18ce46f4b2..3182414c4e 100644
--- a/packages/fuselage/src/components/Message/mixins.scss
+++ b/packages/fuselage/src/components/Message/mixins.scss
@@ -1,5 +1,7 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/colors.scss';
+@import '../../styles/mixins/states.scss';
+@import '../../styles/mixins/shadows.scss';
 
 @mixin container() {
   &-container {
@@ -37,11 +39,14 @@
 }
 
 @mixin focus-state {
-  border: 1px solid transparent;
+  border-width: lengths.border-width('default');
+  border-style: solid;
+  border-color: transparent;
 
-  &:focus {
-    border: 1px solid colors.stroke(highlight);
+  @include on-focus-visible {
+    border-color: colors.stroke(highlight);
     border-radius: lengths.border-radius(medium);
-    box-shadow: 0 0 0 2px colors.stroke(extra-light-highlight);
+    outline: 0;
+    @include use-button-focus-shadow(colors.stroke(extra-light-highlight));
   }
 }