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}} {{/if}}
<h1> <h1>
{{#if topic.isPrivateMessage}} {{#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}}
{{#if topic.category.parentCategory}} {{#if topic.category.parentCategory}}
{{boundCategoryLink topic.category.parentCategory}} {{boundCategoryLink topic.category.parentCategory}}
@ -42,16 +42,14 @@
{{/unless}} {{/unless}}
{{#unless currentUser}} {{#unless currentUser}}
<button {{action showLogin}} class='btn btn-primary btn-small login-button'> <button {{action showLogin}} class='btn btn-primary btn-small login-button'>
<i class="fa fa-user"></i> {{icon user}} {{i18n log_in}}
{{i18n log_in}}
</button> </button>
{{/unless}} {{/unless}}
<ul class='icons clearfix' role='navigation'> <ul class='icons clearfix' role='navigation'>
{{#if currentUser}} {{#if currentUser}}
<li class='notifications'> <li class='notifications'>
<a class='icon' href="#" {{action showNotifications target="view"}} data-notifications="notifications-dropdown" id='user-notifications' title='{{i18n notifications.title}}'> <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> {{icon comment label="notifications.title"}}
<span class='sr-only'>{{i18n notifications.title}}</span>
</a> </a>
{{#if currentUser.unread_notifications}} {{#if currentUser.unread_notifications}}
<a href='#' class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a> <a href='#' class='badge-notification unread-notifications'>{{currentUser.unread_notifications}}</a>
@ -64,7 +62,7 @@
<li> <li>
{{#if Discourse.loginRequired}} {{#if Discourse.loginRequired}}
<a id='search-button' class='icon expand' href='#' aria-hidden="true" {{action showLogin}}> <a id='search-button' class='icon expand' href='#' aria-hidden="true" {{action showLogin}}>
<i class='fa fa-search'></i> {{icon search}}
</a> </a>
{{else}} {{else}}
<a id='search-button' <a id='search-button'
@ -72,8 +70,7 @@
href='#' href='#'
data-dropdown="search-dropdown" data-dropdown="search-dropdown"
title='{{i18n search.title}}'> title='{{i18n search.title}}'>
<i class='fa fa-search'></i> {{icon search label="search.title"}}
<span class="sr-only">{{i18n search.title}}</span>
</a> </a>
{{/if}} {{/if}}
</li> </li>
@ -83,7 +80,7 @@
href="#" href="#"
aria-hidden="true" aria-hidden="true"
{{action showLogin}}> {{action showLogin}}>
<i class='fa fa-bars'></i> {{icon bars}}
</a> </a>
{{else}} {{else}}
<a class='icon' <a class='icon'
@ -92,8 +89,7 @@
href="#" href="#"
title='{{i18n site_map}}' title='{{i18n site_map}}'
id="site-map"> id="site-map">
<i class='fa fa-bars'></i> {{icon bars label="site_map"}}
<span class="sr-only">{{i18n site_map}}</span>
</a> </a>
{{/if}} {{/if}}
{{#if currentUser.site_flagged_posts_count}} {{#if currentUser.site_flagged_posts_count}}