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/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>