accessibility: Make the recipient row more accessible.

This primarily just exposes hidden icons.

Author: ndarilek

static/templates/recipient_row.handlebars

@@ -9,7 +9,7 @@
                 title="{{#tr this}}Narrow to stream "__display_recipient__"{{/tr}}">
                 {{! invite only lock }}
                 {{#if invite_only}}
-                <i class="fa fa-lock invite-stream-icon" aria-hidden="true" title="{{t 'This is a private stream' }}"></i>
+                <i class="fa fa-lock invite-stream-icon" title="{{t 'This is a private stream' }}" aria-label="{{t 'This is a private stream' }}"></i>
                 {{/if}}
                 {{display_recipient}}
             </a>
@@ -34,24 +34,24 @@
                 {{! exterior links (e.g. to a trac ticket) }}
                 {{#each subject_links}}
                 <a href="{{this}}" target="_blank" class="no-underline">
-                    <i class="fa fa-external-link-square" aria-hidden="true"></i>
+                    <i class="fa fa-external-link-square" aria-label="{{t 'External link' }}"></i>
                 </a>
                 {{/each}}
 
                 {{! edit subject pencil icon }}
                 {{#if always_visible_topic_edit}}
-                    <i class="fa fa-pencil always_visible_topic_edit" aria-hidden="true" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}}></i>
+                    <i class="fa fa-pencil always_visible_topic_edit" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} role="button" tabindex="0" aria-label="{{t 'Edit' }}"></i>
                 {{else}}
                     {{#if on_hover_topic_edit}}
-                    <i class="fa fa-pencil on_hover_topic_edit" aria-hidden="true" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}}></i>
+                    <i class="fa fa-pencil on_hover_topic_edit" {{#unless realm_allow_message_editing}}style="display: none"{{/unless}} role="button" tabindex="0" aria-label="{{t 'Edit' }}"></i>
                     {{/if}}
                 {{/if}}
 
                 <span class="topic_edit">
                     <span class="topic_edit_form" id="{{id}}"></span>
                 </span>
 
-                <i class="fa fa-eye-slash on_hover_topic_mute" aria-hidden="true" data-stream-id="{{stream_id}}" data-topic-name="{{subject}}" title="{{t 'Mute topic' }} (M)"></i>
+                <i class="fa fa-eye-slash on_hover_topic_mute" data-stream-id="{{stream_id}}" data-topic-name="{{subject}}" title="{{t 'Mute topic' }} (M)" role="button" tabindex="0" aria-label="{{t 'Mute topic' }} (M)"></i>
                 <span class="recipient_row_date {{#if show_date}}{{else}}hide-date{{/if}}">{{{date}}}</span>
             </span>
         </div>