Merge branch 'hotfix/3402_facets_accessibility_rerelease'

DOAJ · Oct 12, 2023 · f0338b6 · f0338b6
2 parents 3d1f180 + 24ceb51
commit f0338b6
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 11 deletions.
diff --git a/cms/sass/components/_accordion.scss b/cms/sass/components/_accordion.scss
@@ -0,0 +1,3 @@
+.accordion:focus-within {
+  border: $grapefruit solid;
+}
diff --git a/cms/sass/components/_buttons.scss b/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;
+}
diff --git a/cms/sass/components/_filters.scss b/cms/sass/components/_filters.scss
@@ -4,6 +4,24 @@
   margin-bottom: $spacing-04;
   border: 0;
   @include typescale-06;
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: unset;
+    opacity: 0;
+    width: 0.8em;
+    height: 0.8em;
+
+    &:focus  + label {
+      outline: dashed 2px lightgrey;
+      outline-offset: 1px;
+    }
+
+    &:focus:not(:focus-visible){
+      outline: none;
+    }
+  }
+
 }
 
 .filters__heading {
@@ -50,6 +68,8 @@
   max-height: $spacing-07;
   height: auto;
   overflow-y: auto;
+  padding-top: $spacing-01;
+
   @include unstyled-list;
 
   li {

diff --git a/cms/sass/main.scss b/cms/sass/main.scss
@@ -28,6 +28,7 @@
   "layout/sidenav",
 
   "components/alert",
+  "components/accordion",
   "components/back-to-top",
   "components/buttons",
   "components/card",

diff --git a/doajtest/testbook/public_site/public_search.yml b/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
+
diff --git a/portality/settings.py b/portality/settings.py
@@ -9,7 +9,7 @@
 # Application Version information
 # ~~->API:Feature~~
 
-DOAJ_VERSION = "6.4.2"
+DOAJ_VERSION = "6.4.3"
 API_VERSION = "3.0.1"
 
 ######################################

diff --git a/portality/static/js/doaj.fieldrender.edges.js b/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);

diff --git a/setup.py b/setup.py
@@ -5,7 +5,7 @@
 
 setup(
     name='doaj',
-    version='6.4.2',
+    version='6.4.3',
     packages=find_packages(),
     install_requires=[
         "awscli==1.20.50",