From 633ae45f1d95ccbb4e2c77b6e65dfea39491feef Mon Sep 17 00:00:00 2001
From: Pratik Chanda <pratikchanda2000@gmail.com>
Date: Fri, 21 Jun 2024 02:54:13 +0530
Subject: [PATCH] navbar: Make login button focusable.

This commit allows login button in navbar draw focus to
them.

Fixes part of zulip#28037.
---
 web/styles/zulip.css     | 3 ++-
 web/templates/navbar.hbs | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index e75cdf6994..6029a52fe9 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -462,7 +462,8 @@ body.has-overlay-scrollbar {
                 --color-navbar-spectator-medium-attention-brand-button-background
             );
 
-            &:hover {
+            &:hover,
+            &:focus {
                 color: var(
                     --color-navbar-spectator-medium-attention-brand-button-text
                 );
diff --git a/web/templates/navbar.hbs b/web/templates/navbar.hbs
index cd54ab43b8..43c489c6d8 100644
--- a/web/templates/navbar.hbs
+++ b/web/templates/navbar.hbs
@@ -37,7 +37,7 @@
         </div>
         <div class="column-right">
             <div class="spectator_login_buttons only-visible-for-spectators">
-                <a class="login_button">
+                <a class="login_button" tabindex="0">
                     {{t 'Log in' }}
                 </a>
             </div>
@@ -62,7 +62,7 @@
                 </a>
             </div>
             <div class="spectator_narrow_login_button only-visible-for-spectators" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
-                <a class="header-button login_button">
+                <a class="header-button login_button" tabindex="0">
                     <i class="zulip-icon zulip-icon-log-in"></i>
                 </a>
             </div>