Commit 0235284d authored by Robert Lyon's avatar Robert Lyon
Browse files

Better accessibility for User search filter by initials (Bug #1266920)



- Added the aria-labelledby attribute (read by orca)
- Added the aria-label attribute (not read by orca but seeing if it
will be read by Jaws)
- Added an accessible hidden span to alert screenreader what is to
follow

Change-Id: I21e48b9cce3998e3435b157e144a6ece9c47974b
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent d694da1a
...@@ -413,8 +413,10 @@ $string['Site'] = 'Site'; ...@@ -413,8 +413,10 @@ $string['Site'] = 'Site';
$string['emailaddress'] = 'Email address'; $string['emailaddress'] = 'Email address';
$string['emailaddressdescription'] = ' '; $string['emailaddressdescription'] = ' ';
$string['firstname'] = 'First name'; $string['firstname'] = 'First name';
$string['firstnameall'] = 'All first names';
$string['firstnamedescription'] = ' '; $string['firstnamedescription'] = ' ';
$string['lastname'] = 'Last name'; $string['lastname'] = 'Last name';
$string['lastnameall'] = 'All last names';
$string['lastnamedescription'] = ' '; $string['lastnamedescription'] = ' ';
$string['studentid'] = 'ID number'; $string['studentid'] = 'ID number';
$string['displayname'] = 'Display name'; $string['displayname'] = 'Display name';
......
{include file="header.tpl"} {include file="header.tpl"}
<p>{str tag="usersearchinstructions" section="admin"}</p> <p>{str tag="usersearchinstructions" section="admin"}</p>
<span class="accessible-hidden" tabindex="0">{str tag="filterresultsby"}</span>
<div id="initials"> <div id="initials">
<div id="firstnamelist"> <div id="firstnamelist">
<strong>{str tag="firstname"}:</strong> <strong id="firstname">{str tag="firstname"}:</strong>
<span class="first-initial{if !$search->f} selected{/if} all"> <span class="first-initial{if !$search->f} selected{/if} all">
<a href="{$WWWROOT}admin/users/search.php?query={$search->query}{if $search->l}&amp;l={$search->l}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{str tag="All"}</a> <a aria-labelledby="firstname" aria-label="{str tag="firstnameall"}" href="{$WWWROOT}admin/users/search.php?query={$search->query}{if $search->l}&amp;l={$search->l}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{str tag="All"}</a>
</span> </span>
{foreach from=$alphabet item=a} {foreach from=$alphabet item=a}
<span class="first-initial{if $a == $search->f} selected{/if}"> <span class="first-initial{if $a == $search->f} selected{/if}">
<a href="{$WWWROOT}admin/users/search.php?query={$search->query}&amp;f={$a}{if $search->l}&amp;l={$search->l}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{$a}</a> <a aria-labelledby="firstname" aria-label="{str tag="firstname"}" href="{$WWWROOT}admin/users/search.php?query={$search->query}&amp;f={$a}{if $search->l}&amp;l={$search->l}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{$a}</a>
</span> </span>
{/foreach} {/foreach}
</div> </div>
<div id="lastnamelist"> <div id="lastnamelist">
<strong>{str tag="lastname"}:</strong> <strong id="lastname">{str tag="lastname"}:</strong>
<span class="last-initial{if !$search->l} selected{/if} all"> <span class="last-initial{if !$search->l} selected{/if} all">
<a href="{$WWWROOT}admin/users/search.php?query={$search->query}{if $search->f}&amp;f={$search->f}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{str tag="All"}</a> <a aria-labelledby="lastname" aria-label="{str tag="lastnameall"}" href="{$WWWROOT}admin/users/search.php?query={$search->query}{if $search->f}&amp;f={$search->f}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{str tag="All"}</a>
</span> </span>
{foreach from=$alphabet item=a} {foreach from=$alphabet item=a}
<span class="last-initial{if $a == $search->l} selected{/if}"> <span class="last-initial{if $a == $search->l} selected{/if}">
<a href="{$WWWROOT}admin/users/search.php?query={$search->query}&amp;l={$a}{if $search->f}&amp;f={$search->f}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{$a}</a> <a aria-labelledby="lastname" aria-label="{str tag="lastname"}" href="{$WWWROOT}admin/users/search.php?query={$search->query}&amp;l={$a}{if $search->f}&amp;f={$search->f}{/if}{if $search->sortby}&amp;sortby={$search->sortby}{/if}{if $search->sortdir}&amp;sortdir={$search->sortdir}{/if}{if $limit}&amp;limit={$limit}{/if}">{$a}</a>
</span> </span>
{/foreach} {/foreach}
</div> </div>
......
Supports Markdown
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