Merge pull request #2256 from DOAJ/feature/3400_dropdown_facets_cofig…

…ured_for_screenreaders

make expandable facets better optimised for screen readers

cms/sass/base/_general.scss

@@ -261,7 +261,20 @@ select {
 
 input[type="checkbox"],
 input[type="radio"] {
-  display: none;
+  opacity: 0;
+  width: 0.8em;
+  height: 0.8em;
+  margin-left: -0.8rem;
+
+  &:focus  + label {
+    outline: dashed 2px lightgrey;
+    outline-offset: 1px;
+  }
+
+  &:focus:not(:focus-visible){
+    outline: none;
+  }
+
 
   + label {
     margin: 0 0 $spacing-03 0;

cms/sass/components/_accordion.scss

@@ -0,0 +1,3 @@
+.accordion:focus-within {
+  border: $grapefruit solid;
+}

cms/sass/components/_buttons.scss

@@ -117,3 +117,10 @@ button[type="submit"].button--secondary {
     color: currentColor;
   }
 }
+
+button.aria-button {
+    all: inherit;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}

cms/sass/components/_filters.scss

@@ -50,6 +50,8 @@
   max-height: $spacing-07;
   height: auto;
   overflow-y: auto;
+  //add minimal padding to ensure visible outline
+  padding-top: $spacing-01;
   @include unstyled-list;
 
   li {

cms/sass/main.scss

@@ -28,6 +28,7 @@
   "layout/sidenav",
 
   "components/alert",
+  "components/accordion",
   "components/back-to-top",
   "components/buttons",
   "components/card",

doajtest/testbook/public_site/public_search.yml

@@ -166,3 +166,25 @@ tests:
     results:
     - You are taken to the full text of this article on the Web. It opens in a new
       tab
+- title: 'Test Public Search Results Display: Accessibility'
+  context:
+    role: anonymous
+  steps:
+  - step: Go to the DOAJ search page at /search/articles
+  - step: Turn on a screen reader
+    results:
+    - Extendable facets are focusable and focus is marked with an orange solid border
+    - The screenreader gives the header role ("button")
+    - The screenreader gives the state of the facet ("extended" or "folded")
+  - step: click spacebar to fold/unfold the facet
+    resuts:
+      - screenreader gives correct state of the facet ("extended" or "folded")
+  - step: click tab
+    results:
+      - focus is on the list of checkboxes
+    results:
+      - focus is clearly marked by the outline
+  - step: click spacebar to check the filter
+    results:
+      - filter is applied
+

portality/static/js/doaj.fieldrender.edges.js

@@ -645,13 +645,13 @@ $.extend(true, doaj, {
                     toggle = '<span data-feather="chevron-down" aria-hidden="true"></span>';
                 }
                 var placeholder = 'Search ' + this.component.nodeCount + ' subjects';
-                var frag = '<h3 class="label label--secondary filter__heading" type="button" id="' + toggleId + '">' + this.title + toggle + '</h3>\
-                    <div class="filter__body collapse" aria-expanded="false" style="height: 0px" id="' + resultsId + '">\
+                var frag = '<div class="accordion"><h3 class="label label--secondary filter__heading" id="' + toggleId + '"><button class="aria-button" aria-expanded="false">' + this.title + toggle + '</button></h3>\
+                    <div class="filter__body collapse" style="height: 0px" id="' + resultsId + '">\
                         <label for="' + searchId + '" class="sr-only">' + placeholder + '</label>\
                         <input type="text" name="' + searchId + '" id="' + searchId + '" class="filter__search" placeholder="' + placeholder + '">\
                         <ul class="filter__choices" id="' + filteredId + '" style="display:none"></ul>\
                         <ul class="filter__choices" id="' + mainListId + '">{{FILTERS}}</ul>\
-                    </div>';
+                    </div></div>';
 
                 // substitute in the component parts
                 frag = frag.replace(/{{FILTERS}}/g, treeFrag);
@@ -1832,10 +1832,10 @@ $.extend(true, doaj, {
                 if (this.togglable) {
                     toggle = '<span data-feather="chevron-down" aria-hidden="true"></span>';
                 }
-                var frag = '<h3 class="label label--secondary filter__heading" type="button" id="' + toggleId + '">' + this.component.display + toggle + '</h3>\
-                    <div class="filter__body collapse" aria-expanded="false" style="height: 0px" id="' + resultsId + '">\
+                var frag = '<div class="accordion"><h3 class="label label--secondary filter__heading" id="' + toggleId + '"><button class="aria-button" aria-expanded="false">' + this.component.display + toggle + '</button></h3>\
+                    <div class="filter__body collapse"  style="height: 0px" id="' + resultsId + '">\
                         <ul class="filter__choices">{{FILTERS}}</ul>\
-                    </div>';
+                    </div></div>';
 
                 // substitute in the component parts
                 frag = frag.replace(/{{FILTERS}}/g, filterFrag + results);
@@ -2083,10 +2083,10 @@ $.extend(true, doaj, {
                 if (this.togglable) {
                     toggle = '<span data-feather="chevron-down" aria-hidden="true"></span>';
                 }
-                var frag = '<h3 class="label label--secondary filter__heading" type="button" id="' + toggleId + '">' + this.component.display + toggle + '</h3>\
-                    <div class="filter__body collapse" aria-expanded="false" style="height: 0px" id="' + resultsId + '">\
+                var frag = '<div class="accordion"><h3 class="label label--secondary filter__heading" id="' + toggleId + '"><button class="aria-button" aria-expanded="false">' + this.component.display + toggle + '</button></h3>\
+                    <div class="filter__body collapse" style="height: 0px" id="' + resultsId + '">\
                         <ul class="filter__choices">{{FILTERS}}</ul>\
-                    </div>';
+                    </div></div>';
 
                 // substitute in the component parts
                 frag = frag.replace(/{{FILTERS}}/g, filterFrag + results);