From 0f1cccc1ccc901dafca5d5ec121f03582d0fefc0 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 22 Jul 2025 15:07:42 +0530
Subject: [PATCH] inbox: Don't show focus outlines without inbox relevant
 keypress.

Untill user uses a keypress that inbox handles, we don't show
focus outlines.
---
 templates/zerver/app/index.html |   2 +-
 web/src/inbox_ui.ts             |   2 +
 web/styles/inbox.css            | 145 +++++++++++++++++++++-----------
 3 files changed, 98 insertions(+), 51 deletions(-)

diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index a649ddbcdb..5287868693 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -244,7 +244,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1943053 -->
                         </button>
                     </div>
                 </div>
-                <div id="inbox-view">
+                <div id="inbox-view" class="no-visible-focus-outlines">
                     <div class="inbox-container">
                         <div id="inbox-pane"></div>
                     </div>
diff --git a/web/src/inbox_ui.ts b/web/src/inbox_ui.ts
index 2d2bafb697..99cbbfeb1f 100644
--- a/web/src/inbox_ui.ts
+++ b/web/src/inbox_ui.ts
@@ -1620,6 +1620,8 @@ function page_down_navigation(): void {
 }
 
 export function change_focused_element(input_key: string): boolean {
+    // Start showing visible focus outlines.
+    $("#inbox-view").removeClass("no-visible-focus-outlines");
     if (input_key === "tab" || input_key === "shift_tab") {
         // Tabbing should be handled by browser but to keep the focus element same
         // when we rerender or user uses other hotkeys, we need to track
diff --git a/web/styles/inbox.css b/web/styles/inbox.css
index 1267acd7c4..81b16ddb31 100644
--- a/web/styles/inbox.css
+++ b/web/styles/inbox.css
@@ -119,18 +119,7 @@
                     outline: 0;
                 }
 
-                &:focus-visible {
-                    .inbox-focus-border {
-                        border-color: var(--color-outline-focus);
-                    }
-
-                    .collapsible-button > .zulip-icon {
-                        opacity: 1;
-                    }
-                }
-
-                &:hover,
-                &:focus-visible {
+                &:hover {
                     .collapsible-button {
                         visibility: visible;
                     }
@@ -200,16 +189,6 @@
                     background: var(--color-background-inbox-row-hover);
                 }
 
-                &:focus-visible {
-                    .inbox-focus-border {
-                        border: 2px solid var(--color-outline-focus);
-                        border-radius: 3px;
-                    }
-
-                    outline: 0;
-                    padding: 0;
-                }
-
                 .inbox-left-part {
                     grid-template:
                         auto / min-content minmax(0, 1fr)
@@ -241,10 +220,6 @@
                     align-items: center;
                     border-radius: 3px;
                     margin-left: 3px;
-
-                    &:focus-visible {
-                        outline: 2px solid var(--color-outline-focus);
-                    }
                 }
             }
 
@@ -265,10 +240,6 @@
                    count from affecting overall row
                    size as test scales up. */
                 align-self: stretch;
-
-                &:focus-visible {
-                    outline: 2px solid var(--color-outline-focus);
-                }
             }
 
             .unread_mention_info {
@@ -364,10 +335,6 @@
 
         .inbox-row,
         .inbox-header {
-            /* Don't show the icons unless user is visibly focused
-               on the element or one of the elements within it. */
-            &:focus-within:not(:focus),
-            &:focus-visible,
             &:hover {
                 .inbox-row-visibility-policy-inherit,
                 .inbox-action-button {
@@ -394,10 +361,6 @@
                 display: none;
             }
 
-            &:focus-visible {
-                box-shadow: 0 0 0 2px var(--color-outline-focus);
-            }
-
             & i {
                 padding: 0.3125em; /* 5px at 16px em */
                 opacity: 0.3;
@@ -448,7 +411,6 @@
             font-size: 1em;
         }
 
-        &:focus-visible,
         &:hover {
             .inbox-header-name-text,
             .collapsible-button .zulip-icon,
@@ -457,13 +419,6 @@
                 opacity: 1;
             }
         }
-
-        &:focus-visible {
-            background: light-dark(
-                transparent,
-                var(--color-background-hover-popover-menu)
-            );
-        }
     }
 
     .hidden_by_filters {
@@ -523,10 +478,6 @@
     &:focus {
         outline: none;
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--color-outline-focus);
-    }
 }
 
 #recent-view-filter_widget .dropdown_widget_value,
@@ -675,3 +626,97 @@
     /* 5px at 16px / 1em */
     padding: 1px 0.3125em 1px 0;
 }
+
+#inbox-view.no-visible-focus-outlines
+    .inbox-container
+    #inbox-pane
+    [tabindex="0"] {
+    /* Remove default focus outline from elements. */
+    &:focus-visible {
+        outline: 0;
+    }
+}
+
+#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane {
+    /* Only show focus outlines when user uses keyboard. */
+    #inbox-filter_widget {
+        &:focus-visible {
+            outline: 2px solid var(--color-outline-focus);
+        }
+    }
+
+    .inbox-header {
+        &:focus-visible {
+            .inbox-focus-border {
+                border-color: var(--color-outline-focus);
+            }
+
+            .collapsible-button > .zulip-icon {
+                opacity: 1;
+            }
+
+            .collapsible-button {
+                visibility: visible;
+            }
+        }
+    }
+
+    .inbox-row {
+        &:focus-visible {
+            .inbox-focus-border {
+                border: 2px solid var(--color-outline-focus);
+                border-radius: 3px;
+            }
+
+            outline: 0;
+            padding: 0;
+        }
+    }
+
+    .visibility-policy-indicator {
+        &:focus-visible {
+            outline: 2px solid var(--color-outline-focus);
+        }
+    }
+
+    .inbox-action-button {
+        &:focus-visible {
+            box-shadow: 0 0 0 2px var(--color-outline-focus);
+        }
+    }
+
+    .unread-count-focus-outline {
+        &:focus-visible {
+            outline: 2px solid var(--color-outline-focus);
+        }
+    }
+
+    .inbox-row,
+    .inbox-header {
+        /* Don't show the icons unless user is visibly focused
+            on the element or one of the elements within it. */
+        &:focus-within:not(:focus),
+        &:focus-visible {
+            .inbox-row-visibility-policy-inherit,
+            .inbox-action-button {
+                opacity: 1;
+            }
+        }
+    }
+
+    .inbox-folder {
+        &:focus-visible {
+            .inbox-header-name-text,
+            .collapsible-button .zulip-icon,
+            .unread_mention_info,
+            .unread_count {
+                opacity: 1;
+            }
+
+            background: light-dark(
+                transparent,
+                var(--color-background-hover-popover-menu)
+            );
+        }
+    }
+}