fix(fuselage): Prevent focus state on clicking in Messages (#1288)

RocketChat · Feb 16, 2024 · 7390c02 · 7390c02
1 parent 2863143
commit 7390c02
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/silver-pans-own.md 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
@@ -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));
   }
 }