From 148169546db5d6b89cdec1b224cda0923441f043 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 4 Sep 2024 09:53:12 -0500
Subject: [PATCH] buttons: Set Zulip styles on :focus-visible.

---
 web/styles/app_components.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 38d29a3267..531db718cb 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -180,6 +180,16 @@ input::placeholder {
         background-color: var(--color-background-zulip-button-hover);
     }
 
+    &:focus {
+        /* Maintain no outline for pointer focus. */
+        outline: 0;
+    }
+
+    &:focus-visible {
+        /* Set Zulip outline style with keyboard/assistive focus. */
+        outline: 2px solid var(--color-outline-focus);
+    }
+
     &:active {
         color: inherit;
         background-color: var(--color-background-zulip-button-active);