More aria-* improvements to toggle buttons and autocompletion lists

Thomas Bruederli

2014-05-27 d0d7f43ef53d71322a8793ec10f7179f30615127

More aria-* improvements to toggle buttons and autocompletion lists

 program/js/app.js

@@ -4522,11 +4522,11 @@
  this.ksearch_select = function(node)
  {
    if (this.ksearch_pane && node) {
      this.ksearch_pane.find('li.selected').removeClass('selected');
      this.ksearch_pane.find('li.selected').removeClass('selected').removeAttr('aria-selected');
    }

    if (node) {
      $(node).addClass('selected');
      $(node).addClass('selected').removeAttr('aria-selected', 'true');
      this.ksearch_selected = node._rcm_id;
      $(this.ksearch_input).attr('aria-activedecendant', 'rcmkSearchItem' + this.ksearch_selected);
    }
@@ -4659,7 +4659,7 @@
      return;

    // display search results
    var i, len, ul, li, text, type, init,
    var i, id, len, ul, text, type, init,
      value = this.ksearch_value,
      maxlen = this.env.autocomplete_max ? this.env.autocomplete_max : 15;

@@ -4697,12 +4697,13 @@
      for (i=0; i < len && maxlen > 0; i++) {
        text = typeof results[i] === 'object' ? results[i].name : results[i];
        type = typeof results[i] === 'object' ? results[i].type : '';
        li = document.createElement('LI');
        li._rcm_id = i + this.env.contacts.length;
        li.id = 'rcmkSearchItem' + li._rcm_id;
        li.innerHTML = this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>');
        if (type) li.className = type;
        ul.appendChild(li);
        id = i + this.env.contacts.length;
        $('<li>').attr('id', 'rcmkSearchItem' + id)
          .attr('role', 'option')
          .html(this.quote_html(text.replace(new RegExp('('+RegExp.escape(value)+')', 'ig'), '##$1%%')).replace(/##([^%]+)%%/g, '<b>$1</b>'))
          .addClass(type || '')
          .appendTo(ul)
          .get(0)._rcm_id = id;
        maxlen -= 1;
      }
    }

 program/localization/en_US/labels.inc

@@ -259,6 +259,7 @@
$labels['uploadprogress'] = '$percent ($current from $total)';
$labels['close']  = 'Close';
$labels['messageoptions']  = 'Message options...';
$labels['togglecomposeoptions'] = 'Toggle composition options';

$labels['low']     = 'Low';
$labels['lowest']  = 'Lowest';

 skins/larry/templates/compose.html

@@ -77,7 +77,7 @@
<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
<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>
<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle" title="<roundcube:label name='togglecomposeoptions' />" aria-exapnded="false"><span class="iconlink"></span></a>

<table class="headers-table compose-headers">
<tbody>
@@ -130,7 +130,7 @@
</table>

<div id="composebuttons" class="formbuttons">
    <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" condition="!env:extwin" />
    <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" label="openinextwin" condition="!env:extwin" />
</div>

<!-- (collapsable) message options -->
@@ -170,8 +170,8 @@
        <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">
        <h2 id="aria-label-composeoptions" class="voice"><roundcube:label name="attachments" /></h2>
    <div id="compose-attachments" class="rightcol" role="region" aria-labelledby="aria-label-composeattachments">
        <h2 id="aria-label-composeattachments" class="voice"><roundcube:label name="attachments" /></h2>
        <div style="text-align:center; margin-bottom:20px">
            <roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform(event);return false" tabindex="1" />
        </div>

 skins/larry/templates/messagepreview.html

@@ -23,17 +23,17 @@
    &nbsp;
<roundcube:endif />
<roundcube:if condition="env:mailbox != config:drafts_mbox">
    <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" content="&lt;-" />
    <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="&lt;&lt;-" />
    <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="-&gt;" />
    <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" label="replytomessage" />
    <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" label="replytoallmessage" />
    <roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" label="forwardmessage" />
    &nbsp;
<roundcube:endif />
    <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
    <roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" label="openinextwin" />
</div>

<h3 class="subject"><span class="voice"><roundcube:label name="subject" />: </span><roundcube:object name="messageHeaders" valueOf="subject" /></h3>

<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle" aria-expanded="false"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
<div id="contactphoto"><roundcube:object name="contactphoto" /></div>

<table class="headers-table" id="preview-shortheaders"><tbody><tr>

 skins/larry/ui.js

@@ -191,10 +191,10 @@
        }

        $('#composeoptionstoggle').click(function(e){
          $('#composeoptionstoggle').toggleClass('remove');
          $('#composeoptions').toggle();
          var expanded = $('#composeoptions').toggle().is(':visible');
          $('#composeoptionstoggle').toggleClass('remove').attr('aria-expanded', expanded ? 'true' : 'false');
          layout_composeview();
          save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0');
          save_pref('composeoptions', expanded ? '1' : '0');
          if (!rcube_event.is_keyboard(e))
            this.blur();
          return false;
@@ -218,7 +218,7 @@
      }
      else if (rcmail.env.action == 'list' || !rcmail.env.action) {
        var previewframe = $('#mailpreviewframe').is(':visible');
        $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
        $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false').click(function(e){ toggle_preview_pane(e); return false });
        $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
        $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });

@@ -593,7 +593,7 @@
      topstyles, bottomstyles, uid;

    frame.toggle();
    button.removeClass().addClass(visible ? 'enabled' : 'closed');
    button.removeClass().toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false');

    if (visible) {
      $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
@@ -643,9 +643,9 @@

    // add toggle button to full headers table
    if (full.is(':visible'))
      button.attr('href', '#hide').removeClass('add').addClass('remove')
      button.attr('href', '#hide').removeClass('add').addClass('remove').attr('aria-expanded', 'true');
    else
      button.attr('href', '#details').removeClass('remove').addClass('add')
      button.attr('href', '#details').removeClass('remove').addClass('add').attr('aria-expanded', 'false');

    save_pref('previewheaders', full.is(':visible') ? '1' : '0');
  }