From 39cd247e46571e8893b917a8b18550570fb14c9f Mon Sep 17 00:00:00 2001 From: Jane Sandberg Date: Wed, 22 Mar 2023 19:14:28 -0700 Subject: [PATCH] lp1187993: Replace dojo autocomplete with accessible autocomplete This autocomplete uses vanilla javascript to implement the Combobox With List Autocomplete pattern from the Aria Authoring Practices. This commit uses ES modules, denoted by the .mjs extension. It makes use of some bootstrap styles. It should be compatible with both bootsrap 4 and 5. It theoretically works on the non-bootstrap TPAC as well, but will likely need some design work to be satisfying in that interface. Otherwise, this autocomplete JS uses the same APIs as the previous interface did. Also included is a small test suite and an eslint configuration. Signed-off-by: Jane Sandberg --- .../src/templates-bootstrap/opac/css/style.css.tt2 | 20 +- Open-ILS/src/templates-bootstrap/opac/parts/js.tt2 | 19 +- .../templates-bootstrap/opac/parts/searchbar.tt2 | 12 +- Open-ILS/src/templates/opac/parts/js.tt2 | 20 +- Open-ILS/src/templates/opac/parts/searchbar.tt2 | 10 +- Open-ILS/web/js/dojo/openils/AutoSuggestStore.js | 370 --- Open-ILS/web/js/dojo/openils/widget/AutoSuggest.js | 164 -- Open-ILS/web/js/ui/default/opac/.eslintrc.json | 18 + Open-ILS/web/js/ui/default/opac/autosuggest.mjs | 285 ++ Open-ILS/web/js/ui/default/opac/debouncer.mjs | 11 + Open-ILS/web/opac/deps/package-lock.json | 3017 +++++++++++++++++++- Open-ILS/web/opac/deps/package.json | 11 +- Open-ILS/web/opac/tests/.eslintrc.json | 18 + Open-ILS/web/opac/tests/autosuggest.spec.mjs | 242 ++ Open-ILS/web/opac/tests/debouncer.spec.mjs | 16 + docs/TechRef/AutoSuggest/README | 8 +- docs/modules/admin/pages/auto_suggest_search.adoc | 2 + .../installation/pages/server_installation.adoc | 8 + 18 files changed, 3603 insertions(+), 648 deletions(-) delete mode 100644 Open-ILS/web/js/dojo/openils/AutoSuggestStore.js delete mode 100644 Open-ILS/web/js/dojo/openils/widget/AutoSuggest.js create mode 100644 Open-ILS/web/js/ui/default/opac/.eslintrc.json create mode 100644 Open-ILS/web/js/ui/default/opac/autosuggest.mjs create mode 100644 Open-ILS/web/js/ui/default/opac/debouncer.mjs create mode 100644 Open-ILS/web/opac/tests/.eslintrc.json create mode 100644 Open-ILS/web/opac/tests/autosuggest.spec.mjs create mode 100644 Open-ILS/web/opac/tests/debouncer.spec.mjs diff --git a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 index 1a9e146acd..8e3eba8dc7 100755 --- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 @@ -2688,23 +2688,11 @@ table.bookbag-specific { .result-bookbag-description { font-size: [% css_fonts.size_bigger %]; font-style: italic; } .result-bookbag-item-note { font-style: italic; } .lowhits-bookbag-name { font-weight: bold; } +.search_box_wrapper .list-group { z-index: 2; } .oils_AS { font-weight: bold; color: [% css_colors.text_match %]; } -.oils_AS_match_term { - [% IF rtl == 't' -%] - text-align: right; - [% ELSE -%] - text-align: left; - [% END -%] - color: [% css_colors.text %]; -} -.oils_AS_match_field { - font-size: [% css_fonts.size_smallest %]; padding: 0.65em 0; - [% IF rtl == 't' -%] - text-align: left; - [% ELSE -%] - text-align: right; - [% END -%] - color: [% css_colors.accent_medium %]; +.active .oils_AS { + color: #FFF; + text-decoration: underline; } table.result_holdings_table { margin-top: 1em; diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/js.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/js.tt2 index 74e5ff868f..9fbf617e34 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/js.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/js.tt2 @@ -125,22 +125,9 @@ [% IF use_autosuggest.enabled == "t" AND basic_search != "f"; %] - [% END; # use_autosuggest %] diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2 index bc8db2244a..d8efa96d3f 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2 @@ -44,18 +44,14 @@ END;
- [%- # autosuggest breaks accessibility, as the aria-label - # attribute is removed when the Dijit is created. :( %]