send_later_popover: Redesign popover and add accessibility improvements.

As part of the popover menu redesign, this redesigns the compose send
options popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.

Fixes #25117.

web/shared/icons/calendar-clock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill="#000" d="M5.333.668c.368 0 .665.298.665.665v.669h4.004v-.669a.665.665 0 1 1 1.33 0v.669h1.335A1.998 1.998 0 0 1 14.665 4v1a.665.665 0 1 1-1.33 0V4a.668.668 0 0 0-.668-.668h-1.335V4a.665.665 0 0 1-1.33 0v-.668H5.998V4a.665.665 0 1 1-1.33 0v-.668H3.333A.668.668 0 0 0 2.665 4v2.002h2.668a.665.665 0 1 1 0 1.33H2.665v6.001a.668.668 0 0 0 .668.669h2.334a.665.665 0 1 1 0 1.33H3.333a1.999 1.999 0 0 1-1.998-1.999V4a1.998 1.998 0 0 1 1.998-1.998h1.335v-.669c0-.367.298-.665.665-.665Zm5.334 6.664a3.335 3.335 0 1 0 0 6.67 3.335 3.335 0 0 0 0-6.67Zm-4.665 3.335a4.665 4.665 0 1 1 9.33 0 4.665 4.665 0 0 1-9.33 0Zm4.665-1.999c.367 0 .665.298.665.665v1.214l.75.6a.665.665 0 1 1-.83 1.039l-1-.8a.665.665 0 0 1-.25-.52V9.334c0-.367.297-.665.665-.665Z"/>
+</svg>

web/shared/icons/calendar-days.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <g fill="#000">
+    <path d="M4.668 8.665c0-.367.298-.665.665-.665h.007a.665.665 0 1 1 0 1.33h-.007a.665.665 0 0 1-.665-.665ZM8 8a.665.665 0 1 0 0 1.33h.007a.665.665 0 1 0 0-1.33H8Zm2.002.665c0-.367.297-.665.665-.665h.006a.665.665 0 0 1 0 1.33h-.006a.665.665 0 0 1-.665-.665Zm-4.669 2.002a.665.665 0 1 0 0 1.33h.007a.665.665 0 1 0 0-1.33h-.007Zm2.002.665c0-.367.298-.665.665-.665h.007a.665.665 0 1 1 0 1.33H8a.665.665 0 0 1-.665-.665Zm3.332-.665a.665.665 0 1 0 0 1.33h.006a.665.665 0 0 0 0-1.33h-.006Z"/>
+    <path d="M11.332.665v.669h1.335c1.103 0 1.998.895 1.998 1.998v9.334a1.998 1.998 0 0 1-1.998 1.998H3.333a1.998 1.998 0 0 1-1.998-1.998V3.332c0-1.103.895-1.998 1.998-1.998h1.335V.665a.665.665 0 0 1 1.33 0v.669h4.004V.665a.665.665 0 1 1 1.33 0Zm2.003 4.669V3.332c0-.369-.3-.668-.668-.668h-1.335v.668a.665.665 0 1 1-1.33 0v-.668H5.998v.668a.665.665 0 1 1-1.33 0v-.668H3.333c-.369 0-.668.3-.668.668v2.002h10.67Zm-10.67 1.33v6.002c0 .369.3.668.668.668h9.334c.369 0 .668-.3.668-.668V6.664H2.665Z"/>
+  </g>
+</svg>

web/shared/icons/calendar.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M11.332 1.33297V2.00195H12.6676C13.7713 2.00195 14.6659 2.89664 14.6659 4.00029V13.3336C14.6659 14.4373 13.7713 15.332 12.6676 15.332H3.33427C2.23062 15.332 1.33594 14.4373 1.33594 13.3336V4.00029C1.33594 2.89664 2.23062 2.00195 3.33427 2.00195H4.66797V1.33297C4.66797 0.965699 4.9657 0.667969 5.33297 0.667969C5.70024 0.667969 5.99797 0.965699 5.99797 1.33297V2.00195H10.002V1.33297C10.002 0.965699 10.2997 0.667969 10.667 0.667969C11.0342 0.667969 11.332 0.965699 11.332 1.33297ZM13.3359 6.00195V4.00029C13.3359 3.63118 13.0367 3.33195 12.6676 3.33195H11.332V3.99964C11.332 4.3669 11.0342 4.66464 10.667 4.66464C10.2997 4.66464 10.002 4.3669 10.002 3.99964V3.33195H5.99797V3.99964C5.99797 4.3669 5.70024 4.66464 5.33297 4.66464C4.9657 4.66464 4.66797 4.3669 4.66797 3.99964V3.33195H3.33427C2.96516 3.33195 2.66594 3.63118 2.66594 4.00029V6.00195H13.3359ZM2.66594 7.33195V13.3336C2.66594 13.7027 2.96516 14.002 3.33427 14.002H12.6676C13.0367 14.002 13.3359 13.7027 13.3359 13.3336V7.33195H2.66594Z" fill="black"/>
+</svg>

web/shared/icons/file-check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill="#000" d="M2.587 1.254A1.998 1.998 0 0 1 4 .668h6c.176 0 .345.07.47.195l3.334 3.333a.665.665 0 0 1 .194.47v8.667A1.998 1.998 0 0 1 12 15.332H4a1.999 1.999 0 0 1-1.998-1.999V2.667c0-.53.21-1.039.585-1.413Zm9.807 3.414L9.998 2.272V4a.668.668 0 0 0 .669.668h1.728Zm-3.726-2.67H4a.668.668 0 0 0-.668.669v10.666a.668.668 0 0 0 .668.669h8a.668.668 0 0 0 .668-.669V5.998h-2.001A1.998 1.998 0 0 1 8.668 4V1.998Zm1.802 6.198c.26.26.26.681 0 .94l-2.666 2.668a.664.664 0 0 1-.94 0L5.53 10.47a.665.665 0 1 1 .94-.94l.863.863L9.53 8.196c.26-.26.68-.26.94 0Z"/>
+</svg>

web/src/compose_send_menu_popover.js

@@ -7,7 +7,6 @@ import render_send_later_modal_options from "../templates/send_later_modal_optio
 
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
-import * as common from "./common";
 import * as compose from "./compose";
 import * as compose_state from "./compose_state";
 import * as compose_validate from "./compose_validate";
@@ -144,6 +143,7 @@ export function toggle() {
 export function initialize() {
     tippy.delegate("body", {
         ...popover_menus.default_popover_props,
+        theme: "popover-menu",
         target: "#send_later i",
         onUntrigger() {
             // This is only called when the popover is closed by clicking on `target`.
@@ -174,7 +174,6 @@ export function initialize() {
             // Make sure the compose drafts count, which is also displayed in this popover, has a current value.
             drafts.update_compose_draft_count();
             const $popper = $(instance.popper);
-            common.adjust_mac_kbd_tags(".enter_sends_choices kbd");
             $popper.one("click", ".send_later_selected_send_later_time", () => {
                 const send_at_timestamp = scheduled_messages.get_selected_send_later_timestamp();
                 do_schedule_message(send_at_timestamp);

web/styles/compose.css

@@ -1001,41 +1001,80 @@ textarea.new_message_textarea {
 }
 
 .enter_sends_choices {
+    display: flex;
+    flex-direction: column;
+    color: var(--color-text-popover-menu);
+
     .enter_sends_choice {
         display: flex;
         gap: 8px;
-        padding-top: 4px;
+        padding: 4px 10px;
+        align-items: flex-start;
 
-        & input[type="radio"] {
-            position: relative;
-            top: 5px;
+        &:hover {
+            background: var(--color-background-hover-popover-menu);
+            outline: none;
+        }
+
+        &:active {
+            background: var(--color-background-active-popover-menu);
+        }
+
+        & .enter_sends_choice_radio {
             width: auto;
             cursor: pointer;
             margin: 4px 0 0;
+            accent-color: hsl(217deg 100% 60%);
 
             &:focus {
                 outline: 1px dotted hsl(0deg 0% 20%);
                 outline: 5px auto -webkit-focus-ring-color;
                 outline-offset: -2px;
             }
-        }
 
-        &:first-child {
-            padding: 0 0 4px;
-            border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
+            &:checked
+                + .enter_sends_choice_text_container
+                .popover-menu-hotkey-hint {
+                color: hsl(217deg 100% 60%);
+                border: 1px solid hsl(217deg 100% 60% / 50%);
+            }
         }
     }
 
+    .enter_sends_choice_text_container {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        gap: 3px;
+        white-space: nowrap;
+    }
+
     .enter_sends_choice_text {
         display: flex;
-        flex-direction: column;
+        align-items: center;
+        gap: 3px;
     }
 
-    .enter_sends_minor,
-    .enter_sends_minor kbd {
-        opacity: 0.9;
-        font-size: 11px;
-        color: hsl(0deg 0% 50%);
+    .popover-menu-hotkey-hints {
+        margin: 0;
+        padding: 0;
+
+        .popover-menu-hotkey-hint {
+            padding: 2px 5px;
+        }
+    }
+
+    .enter_sends_major {
+        font-size: 15px;
+    }
+
+    .enter_sends_minor {
+        font-size: 12px;
+
+        .popover-menu-hotkey-hint {
+            font-size: 12px;
+            padding: 1px 4px;
+        }
     }
 }
 
@@ -1046,6 +1085,13 @@ textarea.new_message_textarea {
     @media (width < $sm_min) {
         display: block;
     }
+
+    .unread_count {
+        margin: 1px 0 0 6px;
+        border: 0.5px solid var(--color-border-unread-counter);
+        background-color: unset;
+        color: inherit;
+    }
 }
 
 #compose-recipient {

web/templates/popovers/send_later_popover.hbs

@@ -1,62 +1,80 @@
-<ul id="send_later_popover" class="nav nav-list">
-    <li>
-        <div class="enter_sends_choices grey-box">
-            <label class="enter_sends_choice">
-                <input type="radio" name="enter_sends_choice" value="true"{{#if enter_sends_true }} checked{{/if}} />
-                <div class="enter_sends_choice_text">
-                    <span>
-                        {{#tr}}
-                            <z-shortcut></z-shortcut> to send
-                            {{#*inline "z-shortcut"}}<kbd>Enter</kbd>{{/inline}}
-                        {{/tr}}
-                    </span>
-                    <span class="enter_sends_minor">
-                        {{#tr}}
-                            <z-shortcut></z-shortcut> to add a new line
-                            {{#*inline "z-shortcut"}}<kbd>Ctrl</kbd>+<kbd>Enter</kbd>{{/inline}}
-                        {{/tr}}
-                    </span>
-                </div>
-            </label>
-            <label class="enter_sends_choice">
-                <input type="radio" name="enter_sends_choice" value="false"{{#unless enter_sends_true }} checked{{/unless}} />
-                <div class="enter_sends_choice_text">
-                    <span>
-                        {{#tr}}
-                            <z-shortcut></z-shortcut> to send
-                            {{#*inline "z-shortcut"}}<kbd>Ctrl</kbd>+<kbd>Enter</kbd>{{/inline}}
-                        {{/tr}}
-                    </span>
-                    <span class="enter_sends_minor">
-                        {{#tr}}
-                            <z-shortcut></z-shortcut> to add a new line
-                            {{#*inline "z-shortcut"}}<kbd>Enter</kbd>{{/inline}}
-                        {{/tr}}
-                    </span>
-                </div>
-            </label>
-        </div>
-    </li>
-    <hr />
-    <li>
-        <a class="open_send_later_modal" tabindex="0">{{t "Schedule message" }}</a>
-    </li>
-    {{#if formatted_send_later_time}}
-        <li>
-            <a class="send_later_selected_send_later_time" tabindex="0">{{t 'Schedule for {formatted_send_later_time}' }}</a>
+<div class="popover-menu" id="send_later_popover" data-simplebar data-simplebar-tab-index="-1">
+    <ul role="menu" class="popover-menu-list">
+        <li role="none" class="popover-menu-list-item">
+            <div role="group" class="enter_sends_choices" aria-label="{{t 'Enter to send choices' }}">
+                <label role="menuitemradio" class="enter_sends_choice" tabindex="0">
+                    <input type="radio" class="enter_sends_choice_radio" name="enter_sends_choice" value="true"{{#if enter_sends_true }} checked{{/if}} />
+                    <div class="enter_sends_choice_text_container">
+                        <span class="enter_sends_major enter_sends_choice_text">
+                            {{#tr}}
+                                Press <z-shortcut></z-shortcut> to send
+                                {{#*inline "z-shortcut"}}{{popover_hotkey_hints "Enter"}}{{/inline}}
+                            {{/tr}}
+                        </span>
+                        <span class="enter_sends_minor enter_sends_choice_text">
+                            {{#tr}}
+                                Press <z-shortcut></z-shortcut> to add a new line
+                                {{#*inline "z-shortcut"}}{{popover_hotkey_hints "Ctrl" "Enter"}}{{/inline}}
+                            {{/tr}}
+                        </span>
+                    </div>
+                </label>
+                <label role="menuitemradio" class="enter_sends_choice" tabindex="0">
+                    <input type="radio" class="enter_sends_choice_radio" name="enter_sends_choice" value="false"{{#unless enter_sends_true }} checked{{/unless}} />
+                    <div class="enter_sends_choice_text_container">
+                        <span class="enter_sends_major enter_sends_choice_text">
+                            {{#tr}}
+                                Press <z-shortcut></z-shortcut> to send
+                                {{#*inline "z-shortcut"}}{{popover_hotkey_hints "Ctrl" "Enter"}}{{/inline}}
+                            {{/tr}}
+                        </span>
+                        <span class="enter_sends_minor enter_sends_choice_text">
+                            {{#tr}}
+                                Press <z-shortcut></z-shortcut> to add a new line
+                                {{#*inline "z-shortcut"}}{{popover_hotkey_hints "Enter"}}{{/inline}}
+                            {{/tr}}
+                        </span>
+                    </div>
+                </label>
+            </div>
         </li>
-    {{/if}}
-    <li>
-        <a href="#scheduled" class="navigate-link-on-enter" tabindex="0">{{t "View scheduled messages" }}</a>
-    </li>
-    <hr class="drafts-item-in-popover" />
-    <li class="drafts-item-in-popover">
-        <a href="#drafts">{{t "Drafts" }} <span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span></a>
-    </li>
-    {{#if show_compose_new_message}}
-    <hr />
-    <li>
-        <a class="compose_new_message" tabindex=="0">{{t "Save draft and start a new message" }}</a>
-    </li>
-    {{/if}}
-</ul>
+        <li role="separator" class="popover-menu-separator"></li>
+        <li role="none" class="link-item popover-menu-list-item">
+            <a role="menuitem" class="open_send_later_modal popover-menu-link" tabindex="0">
+                <i class="popover-menu-icon zulip-icon zulip-icon-calendar" aria-hidden="true"></i>
+                <span class="popover-menu-label">{{t "Schedule message" }}</span>
+            </a>
+        </li>
+        {{#if formatted_send_later_time}}
+        <li role="none" class="link-item popover-menu-list-item">
+            <a role="menuitem" class="send_later_selected_send_later_time popover-menu-link" tabindex="0">
+                <i class="popover-menu-icon zulip-icon zulip-icon-calendar-clock" aria-hidden="true"></i>
+                <span class="popover-menu-label">{{t 'Schedule for {formatted_send_later_time}' }}</span>
+            </a>
+        </li>
+        {{/if}}
+        <li role="none" class="link-item popover-menu-list-item">
+            <a href="#scheduled" role="menuitem" class="navigate-link-on-enter popover-menu-link" tabindex="0">
+                <i class="popover-menu-icon zulip-icon zulip-icon-calendar-days" aria-hidden="true"></i>
+                <span class="popover-menu-label">{{t "View scheduled messages" }}</span>
+            </a>
+        </li>
+        <li role="separator" class="popover-menu-separator drafts-item-in-popover"></li>
+        <li role="none" class="link-item popover-menu-list-item drafts-item-in-popover">
+            <a href="#drafts" role="menuitem" class="view_contextual_drafts popover-menu-link" tabindex="0">
+                <i class="popover-menu-icon zulip-icon zulip-icon-drafts" aria-hidden="true"></i>
+                <span class="popover-menu-label">{{t "Drafts" }}</span>
+                <span class="compose-drafts-count-container"><span class="unread_count compose-drafts-count"></span></span>
+            </a>
+        </li>
+        {{#if show_compose_new_message}}
+        <li role="separator" class="popover-menu-separator"></li>
+        <li role="none" class="link-item popover-menu-list-item">
+            <a role="menuitem" class="compose_new_message popover-menu-link" tabindex="0">
+                <i class="popover-menu-icon zulip-icon zulip-icon-file-check" aria-hidden="true"></i>
+                <span class="popover-menu-label">{{t "Save draft and start a new message" }}</span>
+            </a>
+        </li>
+        {{/if}}
+    </ul>
+</div>