From b852b5fef01e766759144f5905090c490af2ac33 Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Wed, 19 Jun 2024 23:04:00 +0530
Subject: [PATCH] compose: Show focus ring on buttons only when using keyboard
 navigation.

For the compose control buttons, the compose close button, and the send
later vdots button, we show the focus ring only on `focus-visible` and
not on `focus`.

Fixes part of: #27117.
---
 web/styles/compose.css | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index 0235ef214b..da2a773e38 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -438,6 +438,14 @@
         background: var(--color-compose-embedded-button-background-hover);
         color: var(--color-compose-send-control-button-interactive);
     }
+
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline-color: var(--color-outline-focus);
+    }
 }
 
 .main-view-banner {
@@ -1054,6 +1062,14 @@ textarea.new_message_textarea,
             opacity: 1;
             background-color: hsl(0deg 0% 0% / 10%);
         }
+
+        &:focus:not(:focus-visible) {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline-color: var(--color-outline-focus);
+        }
     }
 
     .compose_control_button_container.disabled-on-hover:hover {
@@ -1295,12 +1311,12 @@ textarea.new_message_textarea,
         transform: scale(0.96);
     }
 
-    &:focus {
-        outline: 0;
+    &:focus:not(:focus-visible) {
+        outline: none;
     }
 
     &:focus-visible {
-        outline: 2px solid var(--color-outline-focus);
+        outline-color: var(--color-outline-focus);
     }
 
     &:hover {