codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-30 19:08:10 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use helper to insert sr-only text for icons.

Browse source
This commit is contained in:
Vikhyat Korrapati 2014-05-07 19:02:49 +05:30
parent 2f33c288a6
commit ed8aeccb0c
2 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/javascripts/discourse/helpers/application_helpers.js
View file

@ -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);
});

18
app/assets/javascripts/discourse/templates/header.js.handlebars
View file

@ -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}}