Use localized labels for voice-only headings and link texts

Thomas Bruederli

2014-05-12 170e45e03587f983354d20f18184d465216deb0c

Use localized labels for voice-only headings and link texts

 program/localization/en_US/labels.inc

@@ -157,6 +157,10 @@
$labels['back']             = 'Back';
$labels['options']          = 'Options';

$labels['first'] = 'First';
$labels['last'] = 'Last';
$labels['previous'] = 'Previous';
$labels['next'] = 'Next';
$labels['select'] = 'Select';
$labels['all'] = 'All';
$labels['none'] = 'None';
@@ -565,4 +569,28 @@
$labels['korean'] = 'Korean';
$labels['chinese'] = 'Chinese';

// accessibility (voice-only) headings and descriptions
$labels['arialabeltopnav'] = 'Window control';
$labels['arialabeltasknav'] = 'Application tasks';
$labels['arialabeltoolbar'] = 'Application toolbar';
$labels['arialabelmessagessearchfilter'] = 'Email listing filter';
$labels['arialabelsearchform'] = 'Email message search form';
$labels['arialabelquicksearchbox'] = 'Email search input';
$labels['arialabelfolderlist'] = 'Email folder selection';
$labels['arialabelmessagelist'] = 'Email Messages Listing';
$labels['arialabelmailpreviewframe'] = 'Message preview';
$labels['arialabelmailboxmenu'] = 'Folder actions menu';
$labels['arialabellistselectmenu'] = 'List selection menu';
$labels['arialabelthreadselectmenu'] = 'Threads listing menu';
$labels['arialabelmessagelistoptions'] = 'Message list display and sorting options';
$labels['arialabelmailimportdialog'] = 'Message import dialog';
$labels['arialabelmessagenav'] = 'Message navigation';
$labels['arialabelmessagebody'] = 'Message Body';
$labels['arialabelcontactquicksearch'] = 'Contacts search form';
$labels['arialabelcontactsearchbox'] = 'Contact search input';
$labels['arialabelmessageheaders'] = 'Message headers';
$labels['arialabelcomposeoptions'] = 'Composition options';
$labels['arialabelresponsesmenu'] = 'Canned responses menu';
$labels['arialabelattachmentuploadform'] = 'Attachment upload form';

?>

 skins/larry/includes/header.html

@@ -1,6 +1,6 @@
<div id="header">
<div id="topline" role="banner" aria-labelledby="aria-label-topnav">
    <h2 id="aria-label-topnav" class="voice">Window Control</h2>
    <h2 id="aria-label-topnav" class="voice"><roundcube:label name="arialabeltopnav" /></h2>
    <div class="topleft">
        <roundcube:container name="topline-left" id="topline-left" />
        <roundcube:button name="about" type="link" label="about" class="about-link" onclick="UI.show_about(this);return false" condition="!env:extwin" />
@@ -22,14 +22,14 @@

<roundcube:if condition="!env:extwin &amp;&amp; !env:framed" />
<div id="topnav">
    <h2 id="aria-label-tasknav" class="voice">Application Tasks</h2>
    <h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
    <div id="taskbar" class="topright" role="navigation" aria-labelledby="aria-label-tasknav">
        <roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" />
        <roundcube:button command="addressbook" label="addressbook" class="button-addressbook" classSel="button-addressbook button-selected" innerClass="button-inner" />
        <roundcube:container name="taskbar" id="taskbar" />
        <roundcube:button command="settings" label="settings" class="button-settings" classSel="button-settings button-selected" innerClass="button-inner" />
        <roundcube:button command="logout" label="logout" class="button-logout" classSel="button-logout" innerClass="button-inner" />
        <span class="minmodetoggle"></span>
        <span class="minmodetoggle" role="presentation"></span>
    </div>
    <roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" alt="Logo" onclick="if(window.rcmail)rcmail.command('switch-task','mail')" />
</div>

 skins/larry/templates/compose.html

@@ -16,7 +16,7 @@
<h1 class="voice"><roundcube:object name="pagetitle" /></h1>

<!-- toolbar -->
<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
    <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" label="cancel" condition="!env:extwin" tabindex="2" />
    <roundcube:button command="close" type="link" class="button close disabled" classAct="button close" label="cancel" condition="env:extwin" tabindex="2" />
@@ -44,9 +44,9 @@
<div id="compose-contacts" class="uibox listbox" role="region" aria-labelledby="aria-label-composecontacts">
<h2 id="aria-label-composecontacts" class="boxtitle"><roundcube:label name="contacts" /></h2>
    <div id="composequicksearch" role="search" aria-labelledby="aria-label-composequicksearch">
        <h3 id="aria-label-composequicksearch" class="voice">Contacts search form</h3>
        <h3 id="aria-label-composequicksearch" class="voice"><roundcube:label name="arialabelcontactquicksearch" /></h3>
        <div class="searchbox">
            <label for="contactsearchbox" class="voice">Contact search input</label>
            <label for="contactsearchbox" class="voice"><roundcube:label name="arialabelcontactsearchbox" /></label>
            <roundcube:object name="searchform" id="contactsearchbox" />
            <a id="searchmenulink" class="iconbutton searchoptions"> </a>
            <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
@@ -60,10 +60,10 @@
    <roundcube:button command="add-recipient" prop="to" type="link" title="to" class="listbutton addto disabled" classAct="listbutton addto" innerClass="inner" content="To+" /><roundcube:button command="add-recipient" prop="cc" type="link" title="cc" class="listbutton addcc disabled" classAct="listbutton addcc" innerClass="inner" content="Cc+" /><roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc" class="listbutton addbcc disabled" classAct="listbutton addbcc" innerClass="inner" content="Bcc+" />
</div>
<div class="boxpagenav">
    <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" content="|&amp;lt;" />
    <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" content="&amp;lt;" />
    <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" content="&amp;gt;" />
    <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" content="&amp;gt;|" />
    <roundcube:button command="firstpage" type="link" class="icon firstpage disabled" classAct="icon firstpage" title="firstpage" label="first" />
    <roundcube:button command="previouspage" type="link" class="icon prevpage disabled" classAct="icon prevpage" title="previouspage" label="previous" />
    <roundcube:button command="nextpage" type="link" class="icon nextpage disabled" classAct="icon nextpage" title="nextpage" label="next" />
    <roundcube:button command="lastpage" type="link" class="icon lastpage disabled" classAct="icon lastpage" title="lastpage" label="last" />
</div>
</div>

@@ -75,7 +75,7 @@

<!-- message headers -->
<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
<h2 id="aria-label-composeheaders" class="voice">Message headers</h2>
<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>

<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='options' />"><span class="iconlink"></span></a>

@@ -135,7 +135,7 @@

<!-- (collapsable) message options -->
<div id="composeoptions" role="region" aria-labelledby="aria-label-composeoptions">
    <h2 id="aria-label-composeoptions" class="voice">Composition options</h2>
    <h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="arialabelcomposeoptions" /></h2>
    <roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
    <span class="composeoption">
        <label><roundcube:label name="editortype" />
@@ -167,7 +167,7 @@
<!-- message compose body -->
<div id="composeview-bottom">
    <div id="composebodycontainer">
        <label for="composebody" class="voice">Message Body</label>
        <label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
        <roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" />
    </div>
    <div id="compose-attachments" class="rightcol" role="region">
@@ -196,7 +196,7 @@
</div><!-- end mainscreen -->

<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />" aria-hidden="true">
    <h2 id="aria-label-uploaddialog" class="voice">Attachment upload form</h2>
    <h2 id="aria-label-uploaddialog" class="voice"><roundcube:label name="arialabelattachmentuploadform" /></h2>
    <roundcube:object name="composeAttachmentForm" id="uploadform" buttons="no" />
    <div class="formbuttons">
        <roundcube:button command="send-attachment" type="input" class="button mainaction" label="upload" />
@@ -207,7 +207,8 @@
<div id="spellmenu" class="popupmenu" aria-hidden="true"></div>

<div id="responsesmenu" class="popupmenu" aria-hidden="true">
    <ul class="toolbarmenu" id="textresponsesmenu" role="menu">
    <h3 id="aria-label-responsesmenu" class="voice"><roundcube:label name="arialabelresponsesmenu" /></h3>
    <ul class="toolbarmenu" id="textresponsesmenu" role="menu" aria-labelledby="aria-label-responsesmenu">
        <li role="separator" class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li>
        <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
        <li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>

 skins/larry/templates/mail.html

@@ -20,7 +20,7 @@
<h1 class="voice"><roundcube:label name="mail" /></h1>

<!-- toolbar -->
<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="messagetoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
    <roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="refresh" title="checkmail" />
    <roundcube:include file="/includes/mailtoolbar.html" />
@@ -30,14 +30,14 @@

<!-- search filter -->
<div id="searchfilter">
    <label for="messagessearchfilter" class="voice">Email listing filter</label>
    <label for="messagessearchfilter" class="voice"><roundcube:label name="arialabelmessagessearchfilter" /></label>
    <roundcube:object name="searchfilter" class="searchfilter decorated" id="messagessearchfilter" aria-controls="messagelist" />
</div>

<!-- search box -->
<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform">
<h2 id="aria-label-searchform" class="voice">Email message search form</h2>
<label for="quicksearchbox" class="voice">Email search input</label>
<h2 id="aria-label-searchform" class="voice"><roundcube:label name="arialabelsearchform" /></h2>
<label for="quicksearchbox" class="voice"><roundcube:label name="arialabelquicksearchbox" /></label>
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button command="menu-open" prop="searchmenu" id="searchmenulink" class="iconbutton searchoptions" title="searchmod" label="options" aria-haspopup="true" aria-expanded="false"aria-owns="searchmenu-menu" />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content="Reset" />
@@ -68,7 +68,7 @@

<!-- folders list -->
<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
<div id="folderlist-content" class="scroller withfooter">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
@@ -92,7 +92,7 @@

<!-- messagelist -->
<div id="messagelistcontainer" class="boxlistcontent">
<h2 id="aria-label-messagelist" class="voice">Email Messages Listing</h2>
<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
<roundcube:object name="messages"
    id="messagelist"
    class="records-table messagelist sortheader fixedheader"
@@ -118,16 +118,16 @@
    <div id="countcontrols" class="pagenav dark">
        <roundcube:object name="messageCountDisplay" class="countdisplay" />
        <span class="pagenavbuttons">
        <roundcube:button command="firstpage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstpage" content="|&amp;lt;" />
        <roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" content="&amp;lt;" />
        <roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" content="&amp;gt;" />
        <roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" content="&amp;gt;|" />
        <roundcube:button command="firstpage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstpage" label="first" />
        <roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" label="previous" />
        <roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" label="next" />
        <roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" label="last" />
        </span>
    </div>

    <roundcube:container name="listcontrols" id="listcontrols" />

    <a href="#preview" id="mailpreviewtoggle" class="iconbutton" title="<roundcube:label name='previewpane' />" role="button" tabindex="0"></a>
    <a href="#preview" id="mailpreviewtoggle" class="iconbutton" title="<roundcube:label name='previewpane' />" role="button" tabindex="0"><roundcube:label name="previewpane" /></a>
</div>

</div><!-- end mailview-top -->
@@ -135,7 +135,7 @@
<div id="mailview-bottom" class="uibox">

<div id="mailpreviewframe" class="iframebox" role="complementary" aria-labelledby="aria-label-mailpreviewframe">
<h2 id="aria-label-mailpreviewframe" class="voice">Message preview</h2>
<h2 id="aria-label-mailpreviewframe" class="voice"><roundcube:label name="arialabelmailpreviewframe" /></h2>
<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="Message preview" />
</div>

@@ -155,7 +155,7 @@
</div>

<div id="mailboxmenu" class="popupmenu" aria-hidden="true">
    <h3 id="aria-label-mailboxmenu" class="voice">Folder actions menu</h3>
    <h3 id="aria-label-mailboxmenu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3>
    <ul id="mailboxmenu-menu" class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
        <li role="menuitem"><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
        <li role="menuitem"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
@@ -166,7 +166,7 @@
</div>

<div id="listselectmenu" class="popupmenu dropdown" aria-hidden="true">
    <h3 id="aria-label-listselectmenu" class="voice">List selection menu</h3>
    <h3 id="aria-label-listselectmenu" class="voice"><roundcube:label name="arialabellistselectmenu" /></h3>
    <ul id="listselectmenu-menu" class="toolbarmenu iconized" role="menu" aria-labelledby="aria-label-listselectmenu">
        <li role="menuitem"><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
        <li role="menuitem"><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
@@ -178,7 +178,7 @@
</div>

<div id="threadselectmenu" class="popupmenu dropdown" aria-hidden="true">
    <h3 id="aria-label-threadselectmenu" class="voice">Threads listing menu</h3>
    <h3 id="aria-label-threadselectmenu" class="voice"><roundcube:label name="arialabelthreadselectmenu" /></h3>
    <ul id="threadselectmenu-menu" class="toolbarmenu" role="menu" aria-labelledby="aria-label-threadselectmenu">
        <li role="menuitem"><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
        <li role="menuitem"><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
@@ -187,7 +187,7 @@
</div>

<div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions" aria-hidden="true">
<h2 id="aria-label-listoptions" class="voice">Message list display and sorting options</h2>
<h2 id="aria-label-listoptions" class="voice"><roundcube:label name="arialabelmessagelistoptions" /></h2>
<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
    <fieldset class="floating">
        <legend><roundcube:label name="listcolumns" /></legend>
@@ -241,7 +241,7 @@
</div>

<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />" aria-hidden="true">
    <h2 id="aria-label-uploaddialog" class="voice">Message import dialog</h2>
    <h2 id="aria-label-uploaddialog" class="voice"><roundcube:label name="arialabelmailimportdialog" /></h2>
    <roundcube:object name="messageimportform" id="uploadform" buttons="no" />
    <div class="formbuttons">
        <roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" />

 skins/larry/templates/message.html

@@ -13,7 +13,7 @@
<h1 class="voice"><roundcube:object name="messageHeaders" valueOf="subject" /></h1>

<!-- toolbar -->
<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
<roundcube:if condition="!env:extwin" />
    <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
@@ -29,7 +29,7 @@

<!-- folders list -->
<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
<div class="scroller">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
@@ -49,10 +49,10 @@

<!-- record navigation -->
<div id="countcontrols" class="pagenav" role="navigation" aria-labelledby="aria-label-countcontrols">
    <h2 id="aria-label-countcontrols" class="voice">Message navigation</h2>
    <h2 id="aria-label-countcontrols" class="voice"><roundcube:label name="arialabelmessagenav" /></h2>
    <roundcube:object name="messageCountDisplay" class="countdisplay" />
    <roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" content="&amp;lt;" />
    <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" />
    <roundcube:button command="previousmessage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previousmessage" label="previous" />
    <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" label="next" />
</div>

<roundcube:if condition="env:optional_format=='text'" />
@@ -84,7 +84,7 @@
<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
</div>
<div class="leftcol" role="region" aria-labelledby="aria-label-messagebody">
<h2 id="aria-label-messagebody" class="voice">Message Body</h2>
<h2 id="aria-label-messagebody" class="voice"><roundcube:label name="arialabelmessagebody" /></h2>
<roundcube:object name="messageObjects" id="message-objects" />
<roundcube:object name="messageBody" id="messagebody" headertableclass="message-partheaders headers-table" />
</div>

 skins/larry/templates/messageerror.html

@@ -19,7 +19,7 @@
<h1 class="voice"><roundcube:label name="messageopenerror" /></h1>

<!-- toolbar -->
<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
    <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
</div>
@@ -30,7 +30,7 @@

<!-- folders list -->
<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
<h2 id="aria-label-folderlist" class="voice"><roundcube:label name="arialabelfolderlist" /></h2>
<div class="scroller">
    <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>

 skins/larry/templates/messagepart.html

@@ -12,7 +12,7 @@

<h1 class="voice"><roundcube:label name="attachment" />: <roundcube:var name="env:filename" /></h1>

<h2 id="aria-label-toolbar" class="voice">Application toolbar</h2>
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<div id="messagetoolbar" class="toolbar fullwidth" role="toolbar" aria-labelledby="aria-label-toolbar">
    <roundcube:button command="download" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" />
    <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" />