Commit 138dd7d5 authored by Jono Mingard's avatar Jono Mingard Committed by Gerrit Code Review
Browse files

Add screen reader support to notifications (Bug #1259408)



Changed icons in Inbox blocktype and Inbox page to have consistent,
descriptive alt text.
Added CSS for hidden elements that are still read out by screen
readers and used this to add hidden "Unread" text to unread
notifications in Inbox blocktype.

Change-Id: I1bfb3826474d6bb06544872c600bc5f966acac67
Signed-off-by: default avatarJono Mingard <reason.koan@gmail.com>
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent fb012377
......@@ -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