mirror of https://github.com/zulip/zulip.git
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.
This commit is contained in:
Sayam Samal
Tim Abbott
parent
e5e5ba6cea
commit
e0ec522f70
Binary file not shown.
|
After Width: | Height: | Size: 858 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 663 B |
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
&:checked
|
||||
+ .enter_sends_choice_text_container
|
||||
.popover-menu-hotkey-hint {
|
||||
color: hsl(217deg 100% 60%);
|
||||
border: 1px solid hsl(217deg 100% 60% / 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding: 0 0 4px;
|
||||
border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
|
||||
}
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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}}
|
||||
<z-shortcut></z-shortcut> to send
|
||||
{{#*inline "z-shortcut"}}<kbd>Enter</kbd>{{/inline}}
|
||||
Press <z-shortcut></z-shortcut> to send
|
||||
{{#*inline "z-shortcut"}}{{popover_hotkey_hints "Enter"}}{{/inline}}
|
||||
{{/tr}}
|
||||
</span>
|
||||
<span class="enter_sends_minor">
|
||||
<span class="enter_sends_minor enter_sends_choice_text">
|
||||
{{#tr}}
|
||||
<z-shortcut></z-shortcut> to add a new line
|
||||
{{#*inline "z-shortcut"}}<kbd>Ctrl</kbd>+<kbd>Enter</kbd>{{/inline}}
|
||||
Press <z-shortcut></z-shortcut> to add a new line
|
||||
{{#*inline "z-shortcut"}}{{popover_hotkey_hints "Ctrl" "Enter"}}{{/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>
|
||||
<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}}
|
||||
<z-shortcut></z-shortcut> to send
|
||||
{{#*inline "z-shortcut"}}<kbd>Ctrl</kbd>+<kbd>Enter</kbd>{{/inline}}
|
||||
Press <z-shortcut></z-shortcut> to send
|
||||
{{#*inline "z-shortcut"}}{{popover_hotkey_hints "Ctrl" "Enter"}}{{/inline}}
|
||||
{{/tr}}
|
||||
</span>
|
||||
<span class="enter_sends_minor">
|
||||
<span class="enter_sends_minor enter_sends_choice_text">
|
||||
{{#tr}}
|
||||
<z-shortcut></z-shortcut> to add a new line
|
||||
{{#*inline "z-shortcut"}}<kbd>Enter</kbd>{{/inline}}
|
||||
Press <z-shortcut></z-shortcut> to add a new line
|
||||
{{#*inline "z-shortcut"}}{{popover_hotkey_hints "Enter"}}{{/inline}}
|
||||
{{/tr}}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<hr />
|
||||
<li>
|
||||
<a class="open_send_later_modal" tabindex="0">{{t "Schedule message" }}</a>
|
||||
<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>
|
||||
<a class="send_later_selected_send_later_time" tabindex="0">{{t 'Schedule for {formatted_send_later_time}' }}</a>
|
||||
<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>
|
||||
<a href="#scheduled" class="navigate-link-on-enter" tabindex="0">{{t "View scheduled messages" }}</a>
|
||||
<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>
|
||||
<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 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}}
|
||||
<hr />
|
||||
<li>
|
||||
<a class="compose_new_message" tabindex=="0">{{t "Save draft and start a new message" }}</a>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue