github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 16:10:48 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Slightly improve header accessibility.

Browse Source 
Partially addresses: https://meta.discourse.org/t/links-without-text-make-blind-user-accessibility-worse/13538.
This commit is contained in:
Vikhyat Korrapati 2014-04-29 15:13:18 +05:30
parent c25cd4e78d
commit 17ad49ffbc
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

11
app/assets/stylesheets/common/foundation/helpers.scss
View File

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