From eba55e82176b6cc0b81c4e545150c9ebea0b0fe1 Mon Sep 17 00:00:00 2001 From: Steve Eardley Date: Tue, 12 Sep 2023 10:35:09 +0100 Subject: [PATCH 1/5] Revert "Revert "Merge branch 'release/2023-08-10_3400_3402_facets_accessibility'"" This reverts commit 7347a80d --- cms/sass/base/_general.scss | 15 ++++++++++++- cms/sass/components/_accordion.scss | 3 +++ cms/sass/components/_buttons.scss | 7 ++++++ cms/sass/components/_filters.scss | 2 ++ cms/sass/main.scss | 1 + .../testbook/public_site/public_search.yml | 22 +++++++++++++++++++ portality/static/js/doaj.fieldrender.edges.js | 18 +++++++-------- 7 files changed, 58 insertions(+), 10 deletions(-) create mode 100644 cms/sass/components/_accordion.scss diff --git a/cms/sass/base/_general.scss b/cms/sass/base/_general.scss index 29d2445e24..dc4454d977 100644 --- a/cms/sass/base/_general.scss +++ b/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; diff --git a/cms/sass/components/_accordion.scss b/cms/sass/components/_accordion.scss new file mode 100644 index 0000000000..e066ee02f6 --- /dev/null +++ b/cms/sass/components/_accordion.scss @@ -0,0 +1,3 @@ +.accordion:focus-within { + border: $grapefruit solid; +} \ No newline at end of file diff --git a/cms/sass/components/_buttons.scss b/cms/sass/components/_buttons.scss index 1e71d3aceb..061c75c454 100644 --- 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 index e82883841b..026403d67d 100644 --- a/cms/sass/components/_filters.scss +++ b/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 { diff --git a/cms/sass/main.scss b/cms/sass/main.scss index cdd22133b8..9b30911f48 100644 --- 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 index 1bce101f8c..6b47834e85 100644 --- 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/static/js/doaj.fieldrender.edges.js b/portality/static/js/doaj.fieldrender.edges.js index 169ce93133..49faf4b543 100644 --- a/portality/static/js/doaj.fieldrender.edges.js +++ b/portality/static/js/doaj.fieldrender.edges.js @@ -645,13 +645,13 @@ $.extend(true, doaj, { toggle = ''; } var placeholder = 'Search ' + this.component.nodeCount + ' subjects'; - var frag = '

' + this.title + toggle + '

\ - '; // substitute in the component parts frag = frag.replace(/{{FILTERS}}/g, treeFrag); @@ -1832,10 +1832,10 @@ $.extend(true, doaj, { if (this.togglable) { toggle = ''; } - var frag = '

' + this.component.display + toggle + '

\ - '; // substitute in the component parts frag = frag.replace(/{{FILTERS}}/g, filterFrag + results); @@ -2083,10 +2083,10 @@ $.extend(true, doaj, { if (this.togglable) { toggle = ''; } - var frag = '

' + this.component.display + toggle + '

\ - '; // substitute in the component parts frag = frag.replace(/{{FILTERS}}/g, filterFrag + results); From 391d227e915dc32bfc0b4c1f85688f0fd4c7b118 Mon Sep 17 00:00:00 2001 From: Aga Date: Thu, 21 Sep 2023 13:44:54 +0100 Subject: [PATCH 2/5] remove css changes from the general scss --- cms/sass/base/_general.scss | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/cms/sass/base/_general.scss b/cms/sass/base/_general.scss index dc4454d977..29d2445e24 100644 --- a/cms/sass/base/_general.scss +++ b/cms/sass/base/_general.scss @@ -261,20 +261,7 @@ select { input[type="checkbox"], input[type="radio"] { - 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; - } - + display: none; + label { margin: 0 0 $spacing-03 0; From c9fd4adec747707bb858b19d600a7c04592734af Mon Sep 17 00:00:00 2001 From: Aga Date: Thu, 21 Sep 2023 13:45:30 +0100 Subject: [PATCH 3/5] remove added padding from the filters --- cms/sass/components/_filters.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/cms/sass/components/_filters.scss b/cms/sass/components/_filters.scss index 026403d67d..ab7e56c8c5 100644 --- a/cms/sass/components/_filters.scss +++ b/cms/sass/components/_filters.scss @@ -50,8 +50,7 @@ max-height: $spacing-07; height: auto; overflow-y: auto; - //add minimal padding to ensure visible outline - padding-top: $spacing-01; + @include unstyled-list; li { From bb6689c9c43468f6b14868405dba46dc003ed95f Mon Sep 17 00:00:00 2001 From: Aga Date: Thu, 21 Sep 2023 14:02:28 +0100 Subject: [PATCH 4/5] apply changes only to search filters --- cms/sass/components/_filters.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/cms/sass/components/_filters.scss b/cms/sass/components/_filters.scss index ab7e56c8c5..fddb1e6e07 100644 --- 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,7 @@ max-height: $spacing-07; height: auto; overflow-y: auto; + padding-top: $spacing-01; @include unstyled-list; From 24ceb5129f2e84ed204787a452d12f3cb5f3b780 Mon Sep 17 00:00:00 2001 From: Steven Eardley Date: Thu, 12 Oct 2023 17:54:19 +0100 Subject: [PATCH 5/5] version bump for js changes --- portality/settings.py | 2 +- setup.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/portality/settings.py b/portality/settings.py index df889cbd14..7d03085692 100644 --- 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/setup.py b/setup.py index 8d951cb4eb..2d4797ac3a 100644 --- 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",