Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 2024-06-26 21:13:20 +05:30 committed by Tim Abbott
parent e5e5ba6cea
commit e0ec522f70
7 changed files with 140 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/shared/icons/calendar-clock.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 B

BIN
web/shared/icons/calendar-days.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
web/shared/icons/calendar.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
web/shared/icons/file-check.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 663 B

3
web/src/compose_send_menu_popover.js
View File

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

74
web/styles/compose.css
View File

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

140
web/templates/popovers/send_later_popover.hbs
View File

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