Bug 34323: Enhance header search icon for more options
authorOwen Leonard <oleonard@myacpl.org>
Thu, 20 Jul 2023 13:03:22 +0000 (13:03 +0000)
committerTomas Cohen Arazi <tomascohen@theke.io>
Fri, 1 Sep 2023 14:23:34 +0000 (11:23 -0300)
commit99929a7d8979a26f97975cb82d06ab163a97a771
tree2923395460e559cd0bb7c79ccd1ad53aeef9c46f
parente433a92d51d68d997f8dad5bc8a180c3e87e9da2
Bug 34323: Enhance header search icon for more options

This patch modifies header search forms which have a "more options"
icon, adding a title attribute to the control and "aria-hidden" to the
Font Awesome icons.

I've added a bit of CSS and JS to change the appearance of the icon when
it is clicked to expand the panel of options.

To test, apply the patch and rebuild the staff interface CSS.

- Test pages which have a "more options" icon in the search header:
  - Home -> Catalog search tab, with IntranetCatalogSearchPulldown
    enabled.
  - Acquisitions -> Orders search tab
  - Authorities -> All search tabs
  - Administration -> Budgets
  - Patrons -> Patron search tab
  - Serials -> Subscription search tab
- On all these pages, hovering your mouse over the icon in the search
  form should trigger a "More options" title.
- Clicking the icon should expand the panel, and the icon should be
  now have a highlighted style.
- Clicking the icon to collapse the panel should return the icon to its
  original state.

Signed-off-by: Sam Lau <samalau@gmail.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
koha-tmpl/intranet-tmpl/prog/js/staff-global.js