js: Add tabindex attribute for anchor tag to allow focus.

This adds tabindex='0' in anchor tags for allowing the message menu popover box to be focusable using hotkey 'i' through keyboard. This is a necessary follow up to 729c090, which removed the href attribute from anchor tags to which click-handlers were attached, which resulted in making them non-focusable as jQuery doesn't allow anchor tags to be focusable without tab-index or href attribute. Fixes zulip#21125.
meetecho · Feb 14, 2022 · 44bd6ca · 44bd6ca
1 parent 36b208a
commit 44bd6ca
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 28 deletions.
diff --git a/static/templates/actions_popover_content.hbs b/static/templates/actions_popover_content.hbs
@@ -2,7 +2,7 @@
 <ul class="nav nav-list actions_popover">
     {{#if should_display_hide_option}}
     <li>
-        <a class="rehide_muted_user_message" data-message-id="{{message_id}}">
+        <a class="rehide_muted_user_message" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-eye-slash" aria-hidden="true"></i>
             {{t "Hide muted message again" }}
         </a>
@@ -11,7 +11,7 @@
 
     {{#if should_display_edit_and_view_source}}
     <li>
-        <a class="popover_edit_message" data-message-id="{{message_id}}">
+        <a class="popover_edit_message" data-message-id="{{message_id}}" tabindex="0">
             <i class="{{#if use_edit_icon}}fa fa-pencil{{else}}fa fa-file-code-o{{/if}}" aria-hidden="true"></i> {{editability_menu_item}}
             <span class="hotkey-hint">(e)</span>
         </a>
@@ -20,7 +20,7 @@
 
     {{#if should_display_quote_and_reply}}
     <li>
-        <a class="respond_button" data-message-id="{{message_id}}">
+        <a class="respond_button" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-reply" aria-hidden="true"></i> {{t "Quote and reply or forward" }}
             <span class="hotkey-hint">(>)</span>
         </a>
@@ -29,15 +29,15 @@
 
     {{#if should_display_reminder_option}}
     <li>
-        <a class='reminder_button' data-message-id="{{message_id}}">
+        <a class='reminder_button' data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-bell" aria-hidden="true"></i> {{t "Remind me about this" }}
         </a>
     </li>
     {{/if}}
 
     {{#if should_display_collapse}}
     <li>
-        <a class="popover_toggle_collapse" data-message-id="{{message_id}}">
+        <a class="popover_toggle_collapse" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-minus" aria-hidden="true"></i>
             {{t "Collapse" }} <span class="hotkey-hint">(–)</span>
         </a>
@@ -46,7 +46,7 @@
 
     {{#if should_display_uncollapse}}
     <li>
-        <a class="popover_toggle_collapse" data-message-id="{{message_id}}">
+        <a class="popover_toggle_collapse" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-plus" aria-hidden="true"></i>
             {{t "Un-collapse" }} <span class="hotkey-hint">(–)</span>
         </a>
@@ -55,23 +55,23 @@
 
     {{#if should_display_edit_history_option}}
     <li>
-        <a class="view_edit_history" data-message-id="{{message_id}}">
+        <a class="view_edit_history" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-clock-o" aria-hidden="true"></i>
             {{t "View edit history" }}
         </a>
     </li>
     {{/if}}
     {{#if should_display_delete_option}}
     <li>
-        <a class="delete_message" data-message-id="{{message_id}}">
+        <a class="delete_message" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-times" aria-hidden="true"></i>
             {{t "Delete message" }}
         </a>
     </li>
     {{/if}}
     {{#if can_mute_topic}}
     <li>
-        <a class="popover_mute_topic" data-msg-stream-id="{{stream_id}}" data-msg-topic="{{topic}}">
+        <a class="popover_mute_topic" data-msg-stream-id="{{stream_id}}" data-msg-topic="{{topic}}" tabindex="0">
             <i class="fa fa-bell-slash" aria-hidden="true"></i>
             {{#tr}}Mute the topic <b>{topic}</b>{{/tr}} <span class="hotkey-hint">(M)</span>
         </a>
@@ -80,7 +80,7 @@
 
     {{#if can_unmute_topic}}
     <li>
-        <a class="popover_unmute_topic" data-msg-stream-id="{{stream_id}}" data-msg-topic="{{topic}}">
+        <a class="popover_unmute_topic" data-msg-stream-id="{{stream_id}}" data-msg-topic="{{topic}}" tabindex="0">
             <i class="fa fa-bell" aria-hidden="true"></i>
             {{#tr}}Unmute the topic <b>{topic}</b>{{/tr}}
         </a>
@@ -89,15 +89,15 @@
 
     {{#if should_display_add_reaction_option}}
     <li>
-        <a class="reaction_button" data-message-id="{{message_id}}">
+        <a class="reaction_button" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-smile-o" aria-hidden="true"></i>
             {{#tr}}Add emoji reaction{{/tr}}
         </a>
     </li>
     {{/if}}
 
     <li>
-        <a class="copy_link" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_uri }}">
+        <a class="copy_link" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_uri }}" tabindex="0">
             <i class="fa fa-link" aria-hidden="true"></i> {{t "Copy link to message" }}
         </a>
     </li>

diff --git a/static/templates/gear_menu.hbs b/static/templates/gear_menu.hbs
@@ -1,6 +1,6 @@
 <ul class="nav" role="navigation">
     <li class="dropdown actual-dropdown-menu" id="gear-menu">
-        <a id="settings-dropdown" role="button" class="dropdown-toggle" data-target="nada" data-toggle="dropdown" title="{{t 'Menu' }} (g)">
+        <a id="settings-dropdown" tabindex="0" role="button" class="dropdown-toggle" data-target="nada" data-toggle="dropdown" title="{{t 'Menu' }} (g)">
             <i class="fa fa-cog settings-dropdown-cog" aria-hidden="true"></i>
         </a>
         <ul class="dropdown-menu" role="menu" aria-labelledby="settings-dropdown">

diff --git a/static/templates/left_sidebar.hbs b/static/templates/left_sidebar.hbs
@@ -83,7 +83,7 @@
                 </div>
             </div>
             <div id="topics_header">
-                <a class="show-all-streams"> <i class="fa fa-chevron-left" aria-hidden="true"></i>{{t 'Back to streams' }}</a>
+                <a class="show-all-streams" tabindex="0"> <i class="fa fa-chevron-left" aria-hidden="true"></i>{{t 'Back to streams' }}</a>
             </div>
             <div id="stream-filters-container" class="scrolling_list" data-simplebar>
                 <ul id="stream_filters" class="filters"></ul>

diff --git a/static/templates/more_topics.hbs b/static/templates/more_topics.hbs
@@ -1,6 +1,6 @@
 <li class="topic-list-item show-more-topics bottom_left_row {{#unless more_topics_unreads}}zero-topic-unreads{{/unless}}">
     <span class='topic-box'>
-        <a class="topic-name">{{t "more topics" }}</a>
+        <a class="topic-name" tabindex="0">{{t "more topics" }}</a>
         <span class="unread_count {{#unless more_topics_unreads}}zero_count{{/unless}}">
             {{more_topics_unreads}}
         </span>

diff --git a/static/templates/navbar.hbs b/static/templates/navbar.hbs
@@ -8,7 +8,7 @@
         <div class="column-middle" id="navbar-middle">
             <div class="column-middle-inner">
                 <div id="streamlist-toggle" {{#if embedded}}class="hide-streamlist-toggle-visibility"{{/if}} title="{{t 'Stream list' }} (q)">
-                    <a id="streamlist-toggle-button" role="button"><i class="fa fa-reorder" aria-hidden="true"></i>
+                    <a id="streamlist-toggle-button" role="button" tabindex="0"><i class="fa fa-reorder" aria-hidden="true"></i>
                         <span id="streamlist-toggle-unreadcount">0</span>
                     </a>
                 </div>
@@ -46,7 +46,7 @@
         </div>
         <div class="column-right">
             <div id="userlist-toggle" title="{{t 'User list' }} (w)">
-                <a id="userlist-toggle-button" role="button"><i class="fa fa-group" aria-hidden="true"></i>
+                <a id="userlist-toggle-button" role="button" tabindex="0"><i class="fa fa-group" aria-hidden="true"></i>
                     <span id="userlist-toggle-unreadcount">0</span>
                 </a>
             </div>

diff --git a/static/templates/remind_me_popover_content.hbs b/static/templates/remind_me_popover_content.hbs
@@ -1,37 +1,37 @@
 {{! Contents of the "remind me about this actions" popup }}
 <ul class="nav nav-list remind_me_popover">
     <li>
-        <a class="remind in_20m" data-message-id="{{message.id}}">
+        <a class="remind in_20m" data-message-id="{{message.id}}" tabindex="0">
             {{t "in 20 minutes" }}
         </a>
     </li>
 
     <li>
-        <a class="remind in_1h" data-message-id="{{message.id}}">
+        <a class="remind in_1h" data-message-id="{{message.id}}" tabindex="0">
             {{t "in 1 hour" }}
         </a>
     </li>
 
     <li>
-        <a class="remind in_3h" data-message-id="{{message.id}}">
+        <a class="remind in_3h" data-message-id="{{message.id}}" tabindex="0">
             {{t "in 3 hours" }}
         </a>
     </li>
 
     <li>
-        <a class="remind tomo" data-message-id="{{message.id}}">
+        <a class="remind tomo" data-message-id="{{message.id}}" tabindex="0">
             {{t "Tomorrow" }}
         </a>
     </li>
 
     <li>
-        <a class="remind nxtw" data-message-id="{{message.id}}">
+        <a class="remind nxtw" data-message-id="{{message.id}}" tabindex="0">
             {{t "Next week" }}
         </a>
     </li>
 
     <li>
-        <a class='remind custom' data-message-id="{{message.id}}">
+        <a class='remind custom' data-message-id="{{message.id}}" tabindex="0">
             {{t "Select date and time" }}
         </a>
     </li>

diff --git a/static/templates/settings/admin_invites_list.hbs b/static/templates/settings/admin_invites_list.hbs
@@ -14,7 +14,7 @@
     {{#if is_admin}}
     <td>
         <span class="referred_by">
-            <a data-user-id="{{invited_by_user_id}}" class="view_user_profile">{{referrer_name}}</a>
+            <a data-user-id="{{invited_by_user_id}}" class="view_user_profile" tabindex="0">{{referrer_name}}</a>
         </span>
     </td>
     {{/if}}

diff --git a/static/templates/settings/admin_user_list.hbs b/static/templates/settings/admin_user_list.hbs
@@ -26,7 +26,7 @@
             {{#if no_owner }}
             {{bot_owner_full_name}}
             {{else}}
-            <a data-user-id="{{bot_owner_id}}" class="view_user_profile">{{bot_owner_full_name}}</a>
+            <a data-user-id="{{bot_owner_id}}" class="view_user_profile" tabindex="0">{{bot_owner_full_name}}</a>
             {{/if}}
         </span>
     </td>

diff --git a/static/templates/stream_settings/new_stream_users.hbs b/static/templates/stream_settings/new_stream_users.hbs
@@ -23,8 +23,8 @@
 
 
 <div>
-    <a draggable="false" class="subs_set_all_users">{{t "Check all" }}</a> |
-    <a draggable="false" class="subs_unset_all_users">{{t "Uncheck all" }}</a>
+    <a draggable="false" class="subs_set_all_users" tabindex="0">{{t "Check all" }}</a> |
+    <a draggable="false" class="subs_unset_all_users" tabindex="0">{{t "Uncheck all" }}</a>
 </div>
 
 <div id="user-checkboxes-simplebar-wrapper" data-simplebar>

diff --git a/static/templates/topic_sidebar_actions.hbs b/static/templates/topic_sidebar_actions.hbs
@@ -26,7 +26,7 @@
 
     {{#if has_starred_messages}}
     <li class="hidden-for-spectators">
-        <a class="sidebar-popover-unstar-all-in-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+        <a tabindex="0" class="sidebar-popover-unstar-all-in-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
             <i class="fa fa-star-o" aria-hidden="true"></i>
             {{#tr}}Unstar all messages in topic{{/tr}}
         </a>