From: Jane Sandberg Date: Thu, 23 Mar 2023 02:14:28 +0000 (-0700) Subject: lp1187993: Replace dojo autocomplete with accessible autocomplete X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=39cd247e46571e8893b917a8b18550570fb14c9f;p=working%2FEvergreen.git 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 --- 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. :( %]