Issue #4.54

_sort.markdown

Sort Buttons

Fix for sort buttons on search page issue #4.54

index.html

<div id="title" aria-describedby="ibsfvfd" data-sort="none" class="avia-button" role="button" tabindex="0">Sort by title</div>
// offscreen label for button's aria-describedby attr
<span class="offscreen" id="ibsfvfd" aria-hidden="true"></span>


// put live regions at bottom of DOM
<div id="liveregions_polite" class="offscreen" role="log" aria-live="polite" aria-atomic="false" aria-relevant="additions"></div>
<div id="liveregions_assertive" class="offscreen" role="log" aria-live="assertive" aria-atomic="false" aria-relevant="additions"></div>

script.js

var sortList = function() {
  var $this = $(this);
  var $desc = $('#' + $this.attr('aria-describedby'));
  var sort = $this.data('sort');
  var $liveRegion = $('#liveregions_assertive');
  
  switch(sort) {
    case 'none':
      $desc.text('job list sorted ascending');
      $liveRegion.append('sorting list ascending');
      $this.data('sort', 'asc');
      break;
    case 'asc':
      $desc.text('job list sorted descending');
      $liveRegion.append('sorting list descending');
      $this.data('sort', 'dsc');
      break;
    case 'dsc':
      $desc.text('');
      $liveRegion.append('list is now unsorted');
      $this.data('sort', 'none');
      break;
  };
  
  setTimeout(function() {
    $this.focus();
  }, 200);
}

$('#title')
  .on('click', sortList)
  .on('keydown', function (e) {
    var which = e.which;
    if (which === 13 || which === 32) {
        e.preventDefault();
        e.target.click();
      }
    });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.offscreen {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    width: 1px;
    height: 1px;
}