Improve accessibility of sidefacets. (#1039)

- Use buttons so that facets can be expanded or collapsed using the keyboard.
- Make it possible to select a hierarchical facet value also when a screen reader is active (they tend to swallow normal keyboard events).
- Use role="heading" for the srmessage so that it can be easily found and read.
- Use additional sr text in active filter list and for selected checkbox facets to signify that the link will remove the filter.

themes/bootstrap3/js/facets.js

@@ -20,7 +20,7 @@ function buildFacetNodes(data, currentPath, allowExclude, excludeTitle, counts)
     var url = currentPath + this.href;
     // Just to be safe
     url.replace("'", "\\'");
-    html += '<span class="main' + (this.isApplied ? ' applied' : '') + '" title="' + htmlEncode(this.displayText) + '"'
+    html += '<span class="main' + (this.isApplied ? ' applied' : '') + '" role="menuitem" title="' + htmlEncode(this.displayText) + '"'
       + ' onclick="document.location.href=\'' + url + '\'; return false;">';
     if (this.operator === 'OR') {
       if (this.isApplied) {
@@ -45,7 +45,10 @@ function buildFacetNodes(data, currentPath, allowExclude, excludeTitle, counts)
       'state': {
         'opened': this.hasAppliedChildren
       },
-      'li_attr': this.isApplied ? { 'class': 'active' } : {}
+      'li_attr': this.isApplied ? { 'class': 'active' } : {},
+      'data': {
+        'url': url.replace(/&amp;/g, '&')
+      }
     });
   });
 
@@ -60,6 +63,13 @@ function initFacetTree(treeNode, inSidebar)
   }
   treeNode.data('loaded', true);
 
+  // Enable keyboard navigation also when a screen reader is active
+  treeNode.bind('select_node.jstree', function selectNode(event, data) {
+    window.location = data.node.data.url;
+    event.preventDefault();
+    return false;
+  });
+
   var facet = treeNode.data('facet');
   var operator = treeNode.data('operator');
   var currentPath = treeNode.data('path');

themes/bootstrap3/less/components/sidebar.less

@@ -7,6 +7,9 @@
     display: block;
     padding: 8px 15px;
     line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+    background-color: transparent;
 
     .badge,
     .status {

themes/bootstrap3/templates/Recommend/SideFacets.phtml

@@ -41,9 +41,9 @@
 <? if (!empty($sideFacetSet) && $results->getResultTotal() > 0): ?>
   <? foreach ($sideFacetSet as $title => $cluster): ?>
     <div class="facet-group" id="side-panel-<?=$this->escapeHtmlAttr($title) ?>">
-      <div class="title<? if(in_array($title, $collapsedFacets)): ?> collapsed<? endif ?>" data-toggle="collapse" href="#side-collapse-<?=$this->escapeHtmlAttr($title) ?>" >
+      <button class="title<? if(in_array($title, $collapsedFacets)): ?> collapsed<? endif ?>" data-toggle="collapse" href="#side-collapse-<?=$this->escapeHtmlAttr($title) ?>" >
         <?=$this->transEsc($cluster['label'])?>
-      </div>
+      </button>
       <div id="side-collapse-<?=$this->escapeHtmlAttr($title) ?>" class="collapse<? if(!in_array($title, $collapsedFacets)): ?> in<? endif ?>">
         <? if (isset($rangeFacets[$title])): ?>
           <?=$this->context($this)->renderInContext('Recommend/SideFacets/range-slider.phtml', ['title' => $title, 'facet' => $rangeFacets[$title]]); ?>

themes/bootstrap3/templates/Recommend/SideFacets/checkbox-filters.phtml

 <? foreach ($checkboxFilters as $current): ?>
   <a class="checkbox-filter<? if(!($results->getResultTotal() > 0 || $current['selected'] || $current['alwaysVisible'])): ?> hidden<? endif; ?>" href="<?=$current['selected'] ? $results->getUrlQuery()->removeFilter($current['filter']) : $results->getUrlQuery()->addFilter($current['filter']);?>">
+    <? if ($current['selected']): ?>
+      <span class="sr-only"><?=$this->transEsc('clear_tag_filter') ?></span>
+    <? endif; ?>
     <i class="fa fa-<?=$current['selected'] ? 'check-square-o' : 'square-o' ?>"></i>
     <?=$this->transEsc($current['desc']) ?>
   </a>

themes/bootstrap3/templates/Recommend/SideFacets/filter-list.phtml

@@ -17,6 +17,7 @@
         }
       ?>
       <a class="facet" href="<?=$removeLink ?>" title="<?=$this->transEsc('clear_tag_filter') ?>">
+        <span class="sr-only"><?=$this->transEsc('clear_tag_filter') ?></span>
         <span class="status"><i class="fa fa-times" aria-hidden="true"></i></span>
         <? if ($filter['operator'] == 'NOT'): ?><?=$this->transEsc('NOT') ?><? endif; ?>
         <? if ($filter['operator'] == 'OR' && $i > 0): ?><?=$this->transEsc('OR') ?><? endif; ?>

themes/bootstrap3/templates/layout/layout.phtml

@@ -134,7 +134,7 @@ JS;
     ?>
     <header class="hidden-print">
       <? if (isset($this->layout()->srmessage)): // message for benefit of screen-reader users ?>
-        <span class="sr-only"><?=$this->layout()->srmessage ?></span>
+        <span class="sr-only" role="heading" aria-level="1"><?=$this->layout()->srmessage ?></span>
       <? endif; ?>
       <a class="sr-only" href="#content"><?=$this->transEsc('Skip to content') ?></a>
       <?=$this->render('header.phtml')?>