From bae5f016bf4e8a3ab93ccfd454539da3bdd23070 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 8 Mar 2022 06:22:44 +0000
Subject: [PATCH] compose_control_menu: Allow to enter press to open the menu.

Make `compose_control_menu_wrapper` clickable and allow tab focus
on it. Disable tab focus on `compose_control_menu` icon. Fix outline
for `compose_control_menu_wrapper`.

Extend out custom outline property to all `[role="button"]` elements.
---
 static/styles/compose.css                    | 9 +++++++++
 static/styles/dark_theme.css                 | 3 ++-
 static/styles/zulip.css                      | 3 ++-
 static/templates/compose_control_buttons.hbs | 4 ++--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/static/styles/compose.css b/static/styles/compose.css
index 09a512062d..140ee09340 100644
--- a/static/styles/compose.css
+++ b/static/styles/compose.css
@@ -561,8 +561,17 @@ input.recipient_box {
     }
 
     .compose_control_menu_wrapper {
+        opacity: 0.7;
         padding: 0;
         margin: 0;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        .compose_control_menu {
+            opacity: 1;
+        }
     }
 
     .hide-sm,
diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index 5f5866262b..ebc5abf252 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -1154,7 +1154,8 @@ body.dark-theme {
     .new-style label.checkbox input[type="checkbox"]:focus ~ span,
     i.fa:focus,
     i.zulip-icon:focus,
-    .auto-select:focus {
+    .auto-select:focus,
+    [role="button"]:focus {
         outline-color: hsl(0, 0%, 67%);
     }
 
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 467c313121..5f097cc936 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -461,7 +461,8 @@ button:focus,
 .new-style label.checkbox input[type="checkbox"]:focus ~ span,
 i.fa:focus,
 i.zulip-icon:focus,
-.auto-select:focus {
+.auto-select:focus,
+[role="button"]:focus {
     outline: 2px solid hsl(215, 47%, 50%);
     /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
 }
diff --git a/static/templates/compose_control_buttons.hbs b/static/templates/compose_control_buttons.hbs
index 8afba9a3a0..bbf4c0c011 100644
--- a/static/templates/compose_control_buttons.hbs
+++ b/static/templates/compose_control_buttons.hbs
@@ -16,7 +16,7 @@
     <a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tippy-content="{{t 'Drafts' }}">
         {{t 'Drafts' }}
     </a>
-    <div class="compose_control_menu_wrapper">
-        <a class="compose_control_button zulip-icon zulip-icon-ellipsis-v-solid hide {{#if message_id}}show-lg{{else}}show-sm{{/if}} compose_control_menu" tabindex=0 data-tippy-content="Compose actions"></a>
+    <div class="compose_control_menu_wrapper" role="button" tabindex=0>
+        <a class="compose_control_button zulip-icon zulip-icon-ellipsis-v-solid hide {{#if message_id}}show-lg{{else}}show-sm{{/if}} compose_control_menu" tabindex="-1" data-tippy-content="Compose actions"></a>
     </div>
 </div>