From 17ad49ffbc4f843aa912b274ce1cdcd2c4671bad Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Tue, 29 Apr 2014 15:13:18 +0530
Subject: [PATCH 1/3] Slightly improve header accessibility.

Partially addresses: https://meta.discourse.org/t/links-without-text-make-blind-user-accessibility-worse/13538.
---
 .../discourse/templates/header.js.handlebars   | 18 ++++++++++++------
 .../stylesheets/common/foundation/helpers.scss | 11 +++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/header.js.handlebars b/app/assets/javascripts/discourse/templates/header.js.handlebars
index f8330462eda..0e283fe4f1b 100644
--- a/app/assets/javascripts/discourse/templates/header.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/header.js.handlebars
@@ -42,10 +42,13 @@
           {{/if}}
         </div>
       {{/unless}}
-      <ul class='icons clearfix'>
+      <ul class='icons clearfix' role='navigation'>
         <li class='notifications'>
           {{#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>
+            <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>
+              <span class='sr-only'>{{i18n notifications.title}}</span>
+            </a>
             {{#if currentUser.unread_notifications}}
               <a href='#' class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a>
             {{/if}}
@@ -53,12 +56,12 @@
               <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>
+            <a class='icon' href="#" {{action showLogin}} title='{{i18n notifications.title}}' aria-hidden="true"><i class='fa fa-comment'></i></a>
           {{/if}}
         </li>
         <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>
             </a>
           {{else}}
@@ -68,6 +71,7 @@
                data-dropdown="search-dropdown"
                title='{{i18n search.title}}'>
                <i class='fa fa-search'></i>
+               <span class="sr-only">{{i18n search.title}}</span>
             </a>
           {{/if}}
         </li>
@@ -75,6 +79,7 @@
           {{#if Discourse.loginRequired}}
             <a class='icon'
                href="#"
+               aria-hidden="true"
                {{action showLogin}}>
                <i class='fa fa-bars'></i>
             </a>
@@ -86,6 +91,7 @@
                title='{{i18n site_map}}'
                id="site-map">
                <i class='fa fa-bars'></i>
+               <span class="sr-only">{{i18n site_map}}</span>
             </a>
           {{/if}}
           {{#if currentUser.site_flagged_posts_count}}
@@ -100,10 +106,10 @@
                href="#"
                title='{{i18n user.avatar.title}}'
                id="current-user">
-                 {{boundAvatar currentUser imageSize="medium" }}
+                 {{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>
+            <div class="icon not-logged-in-avatar" aria-hidden="true" {{action showLogin}}><i class='fa fa-user' title='{{i18n not_logged_in_user}}'></i></div>
           {{/if}}
         </li>
       </ul>
diff --git a/app/assets/stylesheets/common/foundation/helpers.scss b/app/assets/stylesheets/common/foundation/helpers.scss
index 87ba87ed827..282255d71e0 100644
--- a/app/assets/stylesheets/common/foundation/helpers.scss
+++ b/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
 // --------------------------------------------------
 

From 2f33c288a673b1d06bd98f6b1d2c809be47d643c Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Wed, 7 May 2014 18:42:51 +0530
Subject: [PATCH 2/3] Remove extra anon glyphs, move sign in button.

See: https://meta.discourse.org/t/add-sign-in-to-anonymous-header/15335
---
 .../discourse/templates/header.js.handlebars  | 28 +++++++++----------
 app/assets/stylesheets/desktop/header.scss    |  9 ++++--
 app/assets/stylesheets/mobile/header.scss     | 11 +++++---
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/header.js.handlebars b/app/assets/javascripts/discourse/templates/header.js.handlebars
index 0e283fe4f1b..d1306aa8245 100644
--- a/app/assets/javascripts/discourse/templates/header.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/header.js.handlebars
@@ -37,14 +37,18 @@
         <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}}
+      {{#unless currentUser}}
+        <button {{action showLogin}} class='btn btn-primary btn-small login-button'>
+          <i class="fa fa-user"></i>
+          {{i18n log_in}}
+        </button>
+      {{/unless}}
       <ul class='icons clearfix' role='navigation'>
-        <li class='notifications'>
-          {{#if currentUser}}
+        {{#if currentUser}}
+          <li class='notifications'>
             <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>
               <span class='sr-only'>{{i18n notifications.title}}</span>
@@ -55,10 +59,8 @@
             {{#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}}' aria-hidden="true"><i class='fa fa-comment'></i></a>
-          {{/if}}
-        </li>
+          </li>
+        {{/if}}
         <li>
           {{#if Discourse.loginRequired}}
             <a id='search-button' class='icon expand' href='#' aria-hidden="true" {{action showLogin}}>
@@ -98,8 +100,8 @@
             <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}}
+        {{#if currentUser}}
+          <li class='current-user dropdown'>
             <a class='icon'
                data-dropdown="user-dropdown"
                data-render="renderUserDropdown"
@@ -108,10 +110,8 @@
                id="current-user">
                  {{boundAvatar currentUser imageSize="medium"}}
             </a>
-          {{else}}
-            <div class="icon not-logged-in-avatar" aria-hidden="true" {{action showLogin}}><i class='fa fa-user' title='{{i18n not_logged_in_user}}'></i></div>
-          {{/if}}
-        </li>
+          </li>
+        {{/if}}
       </ul>
 
       {{render "search"}}
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index e842726cd08..9947dab4f29 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/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;
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index f111dfadbc8..c102af15e58 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/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;

From ed8aeccb0c643a4c8f3b715dab04cd23f4a98133 Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Wed, 7 May 2014 19:02:49 +0530
Subject: [PATCH 3/3] Use helper to insert sr-only text for icons.

---
 .../discourse/helpers/application_helpers.js  | 19 +++++++++++++++++++
 .../discourse/templates/header.js.handlebars  | 18 +++++++-----------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/discourse/helpers/application_helpers.js b/app/assets/javascripts/discourse/helpers/application_helpers.js
index 328472f5ffe..269f1c8daf2 100644
--- a/app/assets/javascripts/discourse/helpers/application_helpers.js
+++ b/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);
+});
diff --git a/app/assets/javascripts/discourse/templates/header.js.handlebars b/app/assets/javascripts/discourse/templates/header.js.handlebars
index d1306aa8245..03a8b76a107 100644
--- a/app/assets/javascripts/discourse/templates/header.js.handlebars
+++ b/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}}
@@ -42,16 +42,14 @@
       {{/unless}}
       {{#unless currentUser}}
         <button {{action showLogin}} class='btn btn-primary btn-small login-button'>
-          <i class="fa fa-user"></i>
-          {{i18n log_in}}
+          {{icon user}} {{i18n log_in}}
         </button>
       {{/unless}}
       <ul class='icons clearfix' role='navigation'>
         {{#if currentUser}}
           <li class='notifications'>
             <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>
-              <span class='sr-only'>{{i18n notifications.title}}</span>
+              {{icon comment label="notifications.title"}}
             </a>
             {{#if currentUser.unread_notifications}}
               <a href='#' class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a>
@@ -64,7 +62,7 @@
         <li>
           {{#if Discourse.loginRequired}}
             <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'
@@ -72,8 +70,7 @@
                href='#'
                data-dropdown="search-dropdown"
                title='{{i18n search.title}}'>
-               <i class='fa fa-search'></i>
-               <span class="sr-only">{{i18n search.title}}</span>
+               {{icon search label="search.title"}}
             </a>
           {{/if}}
         </li>
@@ -83,7 +80,7 @@
                href="#"
                aria-hidden="true"
                {{action showLogin}}>
-               <i class='fa fa-bars'></i>
+               {{icon bars}}
             </a>
           {{else}}
             <a class='icon'
@@ -92,8 +89,7 @@
                href="#"
                title='{{i18n site_map}}'
                id="site-map">
-               <i class='fa fa-bars'></i>
-               <span class="sr-only">{{i18n site_map}}</span>
+               {{icon bars label="site_map"}}
             </a>
           {{/if}}
           {{#if currentUser.site_flagged_posts_count}}