Commit d0c4a5a0 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review
Browse files

Merge "Add screen reader support to notifications (Bug #1259408)"

parents a4850127 138dd7d5
......@@ -108,17 +108,19 @@ function showHideMessage(id) {
var unread = getFirstElementByTagAndClassName(
'input', 'tocheckread', message.parentNode.parentNode
);
var unreadicon = getFirstElementByTagAndClassName(
'img', 'unreadmessage', message.parentNode.parentNode
var subject = getFirstElementByTagAndClassName(
'a', 'inbox-showmessage', message.parentNode
);
var unreadText = getFirstElementByTagAndClassName(
null, 'accessible-hidden', subject
);
if (unread) {
var pd = {'readone':id};
sendjsonrequest('index.json.php', pd, 'GET', function(data) {
swapDOM(unread, IMG({'src' : {$star}, 'alt' : {$strread}}));
if (unreadicon) {
swapDOM(unreadicon, IMG({'src' : {$readicon}, 'alt' : getNodeAttribute(unreadicon, 'alt') + ' - ' + {$strread}}));
};
updateUnreadCount(data);
removeElementClass(subject, 'unread');
removeElement(unreadText);
});
}
removeElementClass(message, 'hidden');
......
......@@ -5,17 +5,17 @@
{foreach from=$items item=i}
<tr class="{cycle values='r0,r1'}">
<td class="icon-container">
{if $i->read && $i->type == 'usermessage'}
<img src="{theme_url filename=cat('images/read' $i->type '.png')}" alt="{$i->strtype}" />
{elseif $i->type == 'usermessage'}
<img src="{theme_url filename=cat('images/' $i->type '.png')}" class="unreadmessage" />
{if $i->read}
<img src="{theme_url filename=cat('images/' $i->type '.png')}" alt="{$i->strtype}" />
{else}
<img src="{theme_url filename=cat('images/' $i->type '.png')}" alt="{$i->strtype}" />
<img src="{theme_url filename=cat('images/' $i->type '.png')}" class="unreadmessage" alt="{$i->strtype}" />
{/if}
</td>
<td>
{if $i->message}
<a href="{if $i->url}{$WWWROOT}{$i->url}{else}{$WWWROOT}account/activity/index.php{/if}" class="inbox-showmessage{if !$i->read} unread{/if}">{$i->subject}</a>
<a href="{if $i->url}{$WWWROOT}{$i->url}{else}{$WWWROOT}account/activity/index.php{/if}" class="inbox-showmessage{if !$i->read} unread{/if}">
{if !$i->read}<span class="accessible-hidden">{str tag=unread section=activity}: </span>{/if}{$i->subject}
</a>
<div class="inbox-message hidden messagebody-{$i->type}" id="inbox-message-{$i->id}">{$i->message|safe}
{if $i->url}<br><a href="{$WWWROOT}{$i->url}">{if $i->urltext}{$i->urltext} &raquo;{else}{str tag="more..."}{/if}</a>{/if}
</div>
......@@ -43,16 +43,14 @@ addLoadEvent(function() {
connect(element, 'onclick', function(e) {
e.stop();
var message = getFirstElementByTagAndClassName('div', 'inbox-message', element.parentNode);
var unreadicon = getFirstElementByTagAndClassName('img', 'unreadmessage', message.parentNode.parentNode);
var unreadText = getFirstElementByTagAndClassName(null, 'accessible-hidden', element);
toggleElementClass('hidden', message);
if (hasElementClass(element, 'unread')) {
var id = getNodeAttribute(message, 'id').replace(/inbox-message-(\d+)$/, '$1');
var pd = {'readone':id};
sendjsonrequest(config.wwwroot + 'account/activity/index.json.php', pd, 'GET', function(data) {
removeElementClass(element, 'unread');
if (unreadicon) {
swapDOM(unreadicon, IMG({'src' : {/literal}'{$readicon}'{literal}, 'alt' : getNodeAttribute(unreadicon, 'alt') + ' - ' + {/literal}'{str tag='read' section='activity'}'{literal} }));
};
removeElement(unreadText);
updateUnreadCount(data);
});
}
......
......@@ -13,6 +13,7 @@ defined('INTERNAL') || die();
$string['typemaharamessage'] = 'System message';
$string['typeusermessage'] = 'Message from other users';
$string['typefeedback'] = 'Feedback';
$string['typewatchlist'] = 'Watchlist';
$string['typeviewaccess'] = 'New page access';
$string['typecontactus'] = 'Contact us';
......@@ -22,6 +23,7 @@ $string['typevirusrelease'] = 'Virus flag release';
$string['typeadminmessages'] = 'Administration messages';
$string['typeinstitutionmessage'] = 'Institution message';
$string['typegroupmessage'] = 'Group message';
$string['typenewpost'] = 'Forum post';
$string['type'] = 'Activity type';
$string['attime'] = 'at';
......
......@@ -180,6 +180,13 @@ form.oneline.inline div,
margin: 0;
padding: 0;
}
/* Hides the element but leaves it accessible to screen readers */
.accessible-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
.nojs-hidden-inline,
.nojs-hidden-block,
.nojs-hidden-table,
......
{foreach from=$data item=item}
<tr class="{cycle values='r0,r1'}">
<td class="icon-container">
{if $item->read && $item->type == 'usermessage'}
<img src="{theme_url filename=cat('images/read' $item->type '.png')}" alt="{$item->strtype} - {str tag='read' section='activity'}" />
{elseif $item->type == 'usermessage'}
<img src="{theme_url filename=cat('images/' $item->type '.png')}" alt="{$item->strtype}" class="unreadmessage" />
{else}
{if $item->read}
<img src="{theme_url filename=cat('images/' $item->type '.png')}" alt="{$item->strtype}" />
{else}
<img src="{theme_url filename=cat('images/' $item->type '.png')}" alt="{$item->strtype}" class="unreadmessage" />
{/if}
</td>
<td>
{if $item->message}
<a href="" onclick="showHideMessage({$item->id}); return false;" class="inbox-showmessage">{$item->subject}</a>
<a href="" onclick="showHideMessage({$item->id}); return false;" class="inbox-showmessage{if !$item->read} unread{/if}">{if !$item->read}<span class="accessible-hidden">{str tag=unread section=activity}: </span>{/if}{$item->subject}</a>
<div id="message-{$item->id}" class="hidden inbox-message">{$item->message|safe}
{if $item->url}<br><a href="{$WWWROOT}{$item->url}">{if $item->urltext}{$item->urltext} &raquo;{else}{str tag="more..."}{/if}</a>{/if}
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment