Set aria-selected and aria-expanded state attributes

Thomas Bruederli

2014-05-12 a2f8fa236143b44f90e53c19806cfd0efa014857

 skins/larry/templates/mail.html

@@ -17,8 +17,11 @@

<div id="mainscreen">

<h1 class="voice"><roundcube:label name="mail" /></h1>

<!-- toolbar -->
<div id="messagetoolbar" class="toolbar">
<h2 id="aria-label-toolbar" class="voice">Application toolbar</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" />
</div>
@@ -27,14 +30,35 @@

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

<!-- search box -->
<div id="quicksearchbar" class="searchbox">
<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>
<roundcube:object name="searchform" id="quicksearchbox" />
<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
<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" />

<div id="searchmenu" class="popupmenu" data-editable="true">
   <h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
   <ul class="toolbarmenu" id="searchmenu-menu" role="menu" aria-labelledby="aria-label-searchmenu">
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
      <li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
      <li role="separator" class="separator"><label><roundcube:label name="searchscope" /></label></li>
      <li role="menuitem"><label><input type="radio" name="s_scope" value="base" id="s_scope_base" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="currentfolder" /></span></label></li>
      <li role="menuitem"><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li>
      <li role="menuitem"><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li>
   </ul>
</div>

</div>

</div>
@@ -43,12 +67,13 @@
<div id="mailview-left">

<!-- folders list -->
<div id="mailboxcontainer" class="uibox listbox">
<div id="mailboxcontainer" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
<h2 id="aria-label-folderlist" class="voice">Email folder selection</h2>
<div id="folderlist-content" class="scroller withfooter">
<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />
</div>
<div id="folderlist-footer" class="boxfooter">
   <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" />
   <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.toggle_popup('mailboxmenu',event);return false" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false"aria-owns="mailboxmenu-menu" />
   <roundcube:if condition="env:quota" />
      <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
   <roundcube:endif />
@@ -57,7 +82,7 @@

</div>

<div id="mailview-right">
<div id="mailview-right" role="main">

<roundcube:if condition="config:preview_pane == true" />
<div id="mailview-top" class="uibox">
@@ -67,28 +92,26 @@

<!-- messagelist -->
<div id="messagelistcontainer" class="boxlistcontent">
<h2 id="aria-label-messagelist" class="voice">Email Messages Listing</h2>
<roundcube:object name="messages"
   id="messagelist"
   class="records-table messagelist sortheader fixedheader"
   optionsmenuIcon="true" />
   optionsmenuIcon="true"
   summary="Email Messages Listing"
   aria-labelledby="aria-label-messagelist" />
</div>

<!-- list footer -->
<div id="messagelistfooter">
   <div id="listcontrols">
      <roundcube:if condition="env:threads" />
         <a href="#list" class="iconbutton listmode" id="maillistmode" title="<roundcube:label name='list' />">List</a>
         <a href="#threads" class="iconbutton threadmode" id="mailthreadmode" title="<roundcube:label name='threads' />">Threads</a>
      <roundcube:else />
         <a href="#list" class="iconbutton listmode selected" title="<roundcube:label name='list' />" onclick="return false">List</a>
         <a href="#threads" class="iconbutton threadmode disabled" title="<roundcube:label name='threads' />" onclick="return false">Threads</a>
      <roundcube:endif />
      <roundcube:button href="#list" command="set-listmode" prop="list" class="iconbutton listmode disabled" classAct="iconbutton listmode" id="maillistmode" title="list" content="List" />
      <roundcube:button href="#threads" command="set-listmode" prop="threads" class="iconbutton threadmode disabled" classAct="iconbutton threadmode" id="mailthreadmode" title="threads" content="Threads" />
   </div>
   
   <div id="listselectors">
   <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.show_popup('listselectmenu');return false"><span class="handle"><roundcube:label name="select" /></span></a>
   <a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.toggle_popup('listselectmenu', event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="listselectmenu-menu"><span class="handle"><roundcube:label name="select" /></span></a>
   <roundcube:if condition="env:threads" />
      &nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.show_popup('threadselectmenu');return false"><span class="handle"><roundcube:label name="threads" /></span></a>
      &nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.toggle_popup('threadselectmenu', event);return false" aria-haspopup="true" aria-expanded="false"aria-owns="threadselectmenu-menu"><span class="handle"><roundcube:label name="threads" /></span></a>
   <roundcube:endif />
   </div>

@@ -104,15 +127,16 @@

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

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

</div><!-- end mailview-top -->

<div id="mailview-bottom" class="uibox">

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

</div><!-- end mailview-bottom -->
@@ -123,55 +147,47 @@

</div><!-- end mainscreen -->

<div id="searchmenu" class="popupmenu">
   <ul class="toolbarmenu">
      <li><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="subject" /></span></label></li>
      <li><label><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="from" /></span></label></li>
      <li><label><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="to" /></span></label></li>
      <li><label><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="cc" /></span></label></li>
      <li><label><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="bcc" /></span></label></li>
      <li><label><input type="checkbox" name="s_mods[]" value="body" id="s_mod_body" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="body" /></span></label></li>
      <li><label><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="msgtext" /></span></label></li>
<div id="dragmessagemenu" class="popupmenu" aria-hidden="true">
   <ul class="toolbarmenu" role="menu">
      <li role="menuitem"><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
      <li role="menuitem"><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
   </ul>
</div>

<div id="dragmessagemenu" class="popupmenu">
   <ul class="toolbarmenu">
      <li><roundcube:button command="move" onclick="return rcmail.drag_menu_action('move')" label="move" classAct="active" /></li>
      <li><roundcube:button command="copy" onclick="return rcmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
   </ul>
</div>

<div id="mailboxmenu" class="popupmenu">
   <ul class="toolbarmenu" id="mailboxoptionsmenu">
      <li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li>
      <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
      <li><roundcube:button name="messageimport" type="link" class="active" label="importmessages" onclick="UI.show_uploadform()" /></li>
      <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
<div id="mailboxmenu" class="popupmenu" aria-hidden="true">
   <h3 id="aria-label-mailboxmenu" class="voice">Folder actions menu</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>
      <li role="menuitem"><roundcube:button command="import-messages" name="messageimport" type="link" classAct="active" label="importmessages" onclick="if(rcmail.command_enabled('import-messages'))UI.show_uploadform();return false" /></li>
      <li role="menuitem"><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
      <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
   </ul>
</div>

<div id="listselectmenu" class="popupmenu dropdown">
   <ul class="toolbarmenu iconized">
      <li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
      <li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
      <li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
      <li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
      <li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
      <li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
<div id="listselectmenu" class="popupmenu dropdown" aria-hidden="true">
   <h3 id="aria-label-listselectmenu" class="voice">List selection menu</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>
      <li role="menuitem"><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
      <li role="menuitem"><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
      <li role="menuitem"><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
      <li role="menuitem"><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
   </ul>
</div>

<div id="threadselectmenu" class="popupmenu dropdown">
   <ul class="toolbarmenu">
      <li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
      <li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
      <li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
<div id="threadselectmenu" class="popupmenu dropdown" aria-hidden="true">
   <h3 id="aria-label-threadselectmenu" class="voice">Threads listing menu</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>
      <li role="menuitem"><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
   </ul>
</div>

<div id="listoptions" class="propform popupdialog">
<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>
<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
   <fieldset class="floating">
      <legend><roundcube:label name="listcolumns" /></legend>
@@ -220,11 +236,12 @@
   <br style="clear:both" />
   <div class="formbuttons">
      <roundcube:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" />
      <roundcube:button command="menu-open" id="listmenucancel" type="input" class="button" label="cancel" />
      <roundcube:button command="menu-close" prop="messagelistmenu" id="listmenucancel" type="input" class="button" label="cancel" />
   </div>
</div>

<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />">
<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>
   <roundcube:object name="messageimportform" id="uploadform" buttons="no" />
   <div class="formbuttons">
      <roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" />