Merge pull request #2301 from vikhyat/accessibility

Slightly improve header accessibility

app/assets/javascripts/discourse/helpers/application_helpers.js

@@ -407,3 +407,22 @@ Handlebars.registerHelper('link-domain', function(property, options) {
     }
   }
 });
+
+/**
+  Renders a font-awesome icon with an optional i18n string as hidden text for
+  screen readers.
+
+  @method icon
+  @for Handlebars
+**/
+Handlebars.registerHelper('icon', function(icon, options) {
+  var labelKey, html;
+  if (options.hash) { labelKey = options.hash.label; }
+  html = "<i class='fa fa-" + icon + "'";
+  if (labelKey) { html += " aria-hidden='true'"; }
+  html += "></i>";
+  if (labelKey) {
+    html += "<span class='sr-only'>" + I18n.t(labelKey) + "</span>";
+  }
+  return new Handlebars.SafeString(html);
+});

app/assets/javascripts/discourse/templates/header.js.handlebars

@@ -11,7 +11,7 @@
           {{/if}}
           <h1>
             {{#if topic.isPrivateMessage}}
-              <span class="private-message-glyph"><i class='fa fa-envelope'></i></span>
+              <span class="private-message-glyph">{{icon envelope}}</span>
             {{/if}}
           {{#if topic.category.parentCategory}}
             {{boundCategoryLink topic.category.parentCategory}}
@@ -37,29 +37,32 @@
         <div class='current-username'>
           {{#if currentUser}}
             <span class='username'><a {{bind-attr href="currentUser.path"}}>{{currentUser.displayName}}</a></span>
-          {{else}}
-            <button {{action showLogin}} class='btn btn-primary btn-small'>{{i18n log_in}}</button>
           {{/if}}
         </div>
       {{/unless}}
-      <ul class='icons clearfix'>
+      {{#unless currentUser}}
-        <li class='notifications'>
+        <button {{action showLogin}} class='btn btn-primary btn-small login-button'>
+          {{icon user}} {{i18n log_in}}
+        </button>
+      {{/unless}}
+      <ul class='icons clearfix' role='navigation'>
         {{#if currentUser}}
-            <a class='icon' href="#" {{action showNotifications target="view"}} data-notifications="notifications-dropdown" id='user-notifications' title='{{i18n notifications.title}}'><i class='fa fa-comment'></i></a>
+          <li class='notifications'>
+            <a class='icon' href="#" {{action showNotifications target="view"}} data-notifications="notifications-dropdown" id='user-notifications' title='{{i18n notifications.title}}'>
+              {{icon comment label="notifications.title"}}
+            </a>
             {{#if currentUser.unread_notifications}}
               <a href='#' class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a>
             {{/if}}
             {{#if currentUser.unread_private_messages}}
               <a href='#' class='badge-notification unread-private-messages'>{{currentUser.unread_private_messages}}</a>
             {{/if}}
-          {{else}}
-            <a class='icon' href="#" {{action showLogin}} title='{{i18n notifications.title}}'><i class='fa fa-comment'></i></a>
-          {{/if}}
           </li>
+        {{/if}}
         <li>
           {{#if Discourse.loginRequired}}
-            <a id='search-button' class='icon expand' href='#' {{action showLogin}}>
+            <a id='search-button' class='icon expand' href='#' aria-hidden="true" {{action showLogin}}>
-              <i class='fa fa-search'></i>
+              {{icon search}}
             </a>
           {{else}}
             <a id='search-button'
@@ -67,7 +70,7 @@
                href='#'
                data-dropdown="search-dropdown"
                title='{{i18n search.title}}'>
-               <i class='fa fa-search'></i>
+               {{icon search label="search.title"}}
             </a>
           {{/if}}
         </li>
@@ -75,8 +78,9 @@
           {{#if Discourse.loginRequired}}
             <a class='icon'
                href="#"
+               aria-hidden="true"
                {{action showLogin}}>
-               <i class='fa fa-bars'></i>
+               {{icon bars}}
             </a>
           {{else}}
             <a class='icon'
@@ -85,15 +89,15 @@
                href="#"
                title='{{i18n site_map}}'
                id="site-map">
-               <i class='fa fa-bars'></i>
+               {{icon bars label="site_map"}}
             </a>
           {{/if}}
           {{#if currentUser.site_flagged_posts_count}}
             <a href='/admin/flags/active' title='{{i18n notifications.total_flagged}}' class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</a>
           {{/if}}
         </li>
-        <li class='current-user dropdown'>
         {{#if currentUser}}
+          <li class='current-user dropdown'>
             <a class='icon'
                data-dropdown="user-dropdown"
                data-render="renderUserDropdown"
@@ -102,10 +106,8 @@
                id="current-user">
                  {{boundAvatar currentUser imageSize="medium"}}
             </a>
-          {{else}}
-            <div class="icon not-logged-in-avatar" {{action showLogin}}><i class='fa fa-user' title='{{i18n not_logged_in_user}}'></i></div>
-          {{/if}}
           </li>
+        {{/if}}
       </ul>
 
       {{render "search"}}

app/assets/stylesheets/common/foundation/helpers.scss

@@ -29,6 +29,17 @@
   visibility: hidden;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
 // Affix
 // --------------------------------------------------
 

app/assets/stylesheets/desktop/header.scss

@@ -47,9 +47,12 @@
       display:block;
       margin-top: 10px;
     }
-    button {
-      margin-top: 9px;
   }
+  button.login-button {
+    float: left;
+    margin-top: 7px;
+    padding: 6px 10px;
+    .fa { margin-right: 3px; }
   }
   .icons {
     float: left;

app/assets/stylesheets/mobile/header.scss

@@ -51,14 +51,17 @@
       font-size: 14px;
       line-height: 40px;
     }
-    button {
-      margin-top: 8px;
   }
+  button.login-button {
+    float: left;
+    margin-top: 7px;
+    padding: 6px 10px;
+    .fa { margin-right: 3px; }
   }
   .icons {
     float: left;
     text-align: center;
-    margin: 0 0 0 15px;
+    margin: 0 0 0 5px;
     list-style: none;
     > li {
       float: left;