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

message feed: Make message controls more accessible. 

We already have single-key shortcuts for all message controls but Zulip
should be usable from the keyboard without having to learn a bunch of
Zulip-specific keyboard shortcuts.
This commit is contained in:
Gittenburg 2020-07-28 05:44:57 +02:00 committed by Tim Abbott
parent a554eda8f9
commit 4cd23103db
4 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/js/hotkey.js
View File

@ -340,6 +340,11 @@ exports.process_enter_key = function (e) {
return false;
}
if ($(e.target).attr("role") === "button") {
e.target.click();
return false;
}
if ($("#preview_message_area").is(":visible")) {
compose.enter_with_preview_open();
return true;

3
static/styles/zulip.scss
View File

@ -763,7 +763,8 @@ td.pointer {
vertical-align: top;
border: none;
&:hover .message_controls {
&:hover .message_controls,
&:focus-within .message_controls {
.empty-star {
opacity: 0.4;
}

4
static/templates/edit_content_button.hbs
View File

@ -1,5 +1,5 @@
{{#if is_editable}}
<i class="fa fa-pencil edit_content_button" aria-hidden="true" title="{{t "Edit" }} (e)"></i>
<i class="fa fa-pencil edit_content_button" role="button" tabindex="0" aria-label="{{t "Edit" }} (e)" title="{{t "Edit" }} (e)"></i>
{{else}}
<i class="fa fa-file-code-o edit_content_button" aria-hidden="true" title="{{t "View source" }} (e)" data-message-id="{{msg_id}}"></i>
<i class="fa fa-file-code-o edit_content_button" role="button" tabindex="0" aria-label="{{t "View source" }} (e)" title="{{t "View source" }} (e)" data-message-id="{{msg_id}}"></i>
{{/if}}

4
static/templates/message_controls.hbs
View File

@ -19,12 +19,12 @@
<div class="message_failed {{#unless msg.failed_request}}notvisible{{/unless}}">
<i class="fa fa-refresh refresh-failed-message" data-toggle="tooltip" title="{{t 'Retry' }}" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
<i class="fa fa-times-circle remove-failed-message" aria-hidden="true" data-toggle="tooltip" title="{{t 'Cancel' }}"></i>
<i class="fa fa-times-circle remove-failed-message" data-toggle="tooltip" title="{{t 'Cancel' }}" aria-label="{{t 'Cancel' }}" role="button" tabindex="0"></i>
</div>
{{#unless msg/locally_echoed}}
<div class="star_container {{#if msg/starred}}{{else}}empty-star{{/if}}">
<i class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}" title="{{#tr this.msg}}__starred_status__ this message{{/tr}} (*)"></i>
<i role="button" tabindex="0" class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}" title="{{#tr this.msg}}__starred_status__ this message{{/tr}} (*)"></i>
</div>
{{/unless}}