Bug 29066 - Remove text in OPAC search form and use Font Awesome icons
Summary: Remove text in OPAC search form and use Font Awesome icons
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Fridolin Somers
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-09-20 22:32 UTC by Fridolin Somers
Modified: 2022-12-12 21:24 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.05.00


Attachments
Bug 29066: Remove text in OPAC search form and use Font Awesome icons (5.36 KB, patch)
2021-09-20 22:55 UTC, Fridolin Somers
Details | Diff | Splinter Review
Screenshot mylibraryfirst (17.30 KB, image/png)
2021-09-23 06:27 UTC, Fridolin Somers
Details
Screenshot librarypulldown (19.30 KB, image/png)
2021-09-23 06:27 UTC, Fridolin Somers
Details
Bug 29066: Remove text in OPAC search form and use Font Awesome icons (5.42 KB, patch)
2021-12-28 15:46 UTC, Samu Heiskanen
Details | Diff | Splinter Review
Bug 29066: (follow-up) add aria-label (1.26 KB, patch)
2022-01-15 06:54 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 29066: Remove text in OPAC search form and use Font Awesome icons (5.42 KB, patch)
2022-02-01 00:39 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 29066: (follow-up) add aria-label and aria-hidden on icons (2.14 KB, patch)
2022-02-01 00:39 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 29066: Remove text in OPAC search form and use Font Awesome icons (5.47 KB, patch)
2022-02-02 14:58 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 29066: (follow-up) add aria-label and aria-hidden on icons (2.19 KB, patch)
2022-02-02 14:58 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 29066: (follow-up) add aria-label and aria-hidden on icons (2.25 KB, patch)
2022-03-28 22:30 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 29066: Remove text in OPAC search form and use Font Awesome icons (5.53 KB, patch)
2022-03-28 22:31 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 29066: (follow-up) add aria-label and aria-hidden on icons (2.25 KB, patch)
2022-03-28 22:31 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 29066: Remove text in OPAC search form and use Font Awesome icons (5.59 KB, patch)
2022-04-01 12:26 UTC, Kyle M Hall
Details | Diff | Splinter Review
Bug 29066: (follow-up) add aria-label and aria-hidden on icons (2.30 KB, patch)
2022-04-01 12:27 UTC, Kyle M Hall
Details | Diff | Splinter Review
Bug 29066: (follow-up) Use tooltip when SearchMyLibraryFirst in effect (5.88 KB, patch)
2022-04-04 17:25 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Fridolin Somers 2021-09-20 22:32:32 UTC
In modern front-end websites, first think you see in header region is an large input text with a search icon.
No need to say it is a search form.
We still tell it in 'title' attribut for accessibility.
Comment 1 Fridolin Somers 2021-09-20 22:55:01 UTC
Created attachment 125084 [details] [review]
Bug 29066: Remove text in OPAC search form and use Font Awesome icons

In modern front-end websites, first think you see in header region is an large input text with a search icon.
No need to say it is a search form.
We still tell it in 'title' attribut for accessibility.

This patch removes 'Search' text.
If 'my library first' feature is enabled, shows a text in title of a
question mark icon.
In submit button, replaces 'Go' with a seach icon and add title
'Search'.

Test plan :
1)
1.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Add'
  SearchMyLibraryFirst to 'Don't limit'
1.2) Go to OPAC main page
1.3) You don't see 'Search' anymore
1.4) You see in submit button an icon
1.5) Move mouse over submit button to see tooltip text 'Search'
2)
2.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Don't add'
  SearchMyLibraryFirst to 'Limit'
2.2) Go to OPAC main page
2.3) Log in
2.4) You don't see text 'Search (in <library name>) only'
2.5) You see a question mark icon
2.6) Move mouse over submit button to see tooltip text 'Search (in <library name>) only'
Comment 2 Fridolin Somers 2021-09-20 22:57:10 UTC
Don't hesitate to ask for changes that are needed for accessibility.
Comment 3 Fridolin Somers 2021-09-23 06:27:31 UTC
Created attachment 125180 [details]
Screenshot mylibraryfirst
Comment 4 Fridolin Somers 2021-09-23 06:27:56 UTC
Created attachment 125181 [details]
Screenshot librarypulldown
Comment 5 Samu Heiskanen 2021-12-28 15:46:44 UTC Comment hidden (obsolete)
Comment 6 Lucas Gass 2022-01-13 18:42:18 UTC
I see the button does include a title attribute of 'Search' which is good but does that cover all accessibility cases? Should this not also include an aria-label for screen readers and mobile devices?
Comment 7 Fridolin Somers 2022-01-15 06:50:20 UTC
(In reply to Lucas Gass from comment #6)
> I see the button does include a title attribute of 'Search' which is good
> but does that cover all accessibility cases? Should this not also include an
> aria-label for screen readers and mobile devices?

Ah sure. I didn't knew about this.
I see we use a lot aria-label="Breadcrumb"
Comment 8 Fridolin Somers 2022-01-15 06:54:25 UTC Comment hidden (obsolete)
Comment 9 Lucas Gass 2022-01-18 23:19:31 UTC
I think the follow-up is correct, the aria-label belongs on the button. Now I think the the icon needs the aria-hidden="true" attribute. 

In fact the QA tool thinks so too:

 FAIL	koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
   FAIL	  forbidden patterns
		forbidden pattern: Font Awesome icons need the aria-hidden attribute for accessibility purpose (see bug 25166)  (line 169)
		forbidden pattern: Font Awesome icons need the aria-hidden attribute for accessibility purpose (see bug 25166)  (line 282)
Comment 10 Fridolin Somers 2022-02-01 00:39:31 UTC Comment hidden (obsolete)
Comment 11 Fridolin Somers 2022-02-01 00:39:51 UTC Comment hidden (obsolete)
Comment 12 Fridolin Somers 2022-02-01 00:40:36 UTC
(In reply to Lucas Gass from comment #9)
> I think the follow-up is correct, the aria-label belongs on the button. Now
> I think the the icon needs the aria-hidden="true" attribute. 
> 
> In fact the QA tool thinks so too:
> 
>  FAIL	koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
>    FAIL	  forbidden patterns
> 		forbidden pattern: Font Awesome icons need the aria-hidden attribute for
> accessibility purpose (see bug 25166)  (line 169)
> 		forbidden pattern: Font Awesome icons need the aria-hidden attribute for
> accessibility purpose (see bug 25166)  (line 282)

Good catch, I added to follow-up
Comment 13 Lucas Gass 2022-02-01 18:25:49 UTC
Sorry to say, I cannot get this patchset to apply cleanly to master now. :(
Comment 14 Fridolin Somers 2022-02-02 05:58:52 UTC
Ah I forgot to obsolete a patch after commit message change.
Comment 15 Lucas Gass 2022-02-02 14:58:36 UTC
Created attachment 130114 [details] [review]
Bug 29066: Remove text in OPAC search form and use Font Awesome icons

In modern front-end websites, first think you see in header region is an large input text with a search icon.
No need to say it is a search form.
We still tell it in 'title' attribut for accessibility.

This patch removes 'Search' text.
If 'my library first' feature is enabled, shows a text in title of a
question mark icon.
In submit button, replaces 'Go' with a seach icon and add title
'Search'.

Test plan :
1)
1.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Add'
  SearchMyLibraryFirst to 'Don't limit'
1.2) Go to OPAC main page
1.3) You don't see 'Search' anymore
1.4) You see in submit button an icon
1.5) Move mouse over submit button to see tooltip text 'Search'
2)
2.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Don't add'
  SearchMyLibraryFirst to 'Limit'
2.2) Go to OPAC main page
2.3) Log in
2.4) You don't see text 'Search (in <library name>) only'
2.5) You see a question mark icon
2.6) Move mouse over submit button to see tooltip text 'Search (in <library name>) only'

Signed-off-by: Samu Heiskanen <samu.heiskanen@hypernova.fi>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 16 Lucas Gass 2022-02-02 14:58:39 UTC
Created attachment 130115 [details] [review]
Bug 29066: (follow-up) add aria-label and aria-hidden on icons

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 17 Jonathan Druart 2022-02-21 15:00:22 UTC
Owen, can we get your stamp on this one please?
Comment 18 Katrin Fischer 2022-03-28 22:30:31 UTC
Created attachment 132375 [details] [review]
Bug 29066: (follow-up) add aria-label and aria-hidden on icons

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 19 Katrin Fischer 2022-03-28 22:31:55 UTC
Created attachment 132376 [details] [review]
Bug 29066: Remove text in OPAC search form and use Font Awesome icons

In modern front-end websites, first think you see in header region is an large input text with a search icon.
No need to say it is a search form.
We still tell it in 'title' attribut for accessibility.

This patch removes 'Search' text.
If 'my library first' feature is enabled, shows a text in title of a
question mark icon.
In submit button, replaces 'Go' with a seach icon and add title
'Search'.

Test plan :
1)
1.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Add'
  SearchMyLibraryFirst to 'Don't limit'
1.2) Go to OPAC main page
1.3) You don't see 'Search' anymore
1.4) You see in submit button an icon
1.5) Move mouse over submit button to see tooltip text 'Search'
2)
2.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Don't add'
  SearchMyLibraryFirst to 'Limit'
2.2) Go to OPAC main page
2.3) Log in
2.4) You don't see text 'Search (in <library name>) only'
2.5) You see a question mark icon
2.6) Move mouse over submit button to see tooltip text 'Search (in <library name>) only'

Signed-off-by: Samu Heiskanen <samu.heiskanen@hypernova.fi>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 20 Katrin Fischer 2022-03-28 22:31:59 UTC
Created attachment 132377 [details] [review]
Bug 29066: (follow-up) add aria-label and aria-hidden on icons

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 21 Katrin Fischer 2022-03-28 22:33:59 UTC
I really love the change with the magnifying glass instead of "Go".

A little more hesitant about the tooltip for SearchMyLibraryFirst, but I like that it will allow to hide the information if the library wants to, where before they would have had to manipulate the string with jQuery.

Curious too to get Owen's opinion.
Comment 22 Kyle M Hall 2022-04-01 12:26:51 UTC
Created attachment 132854 [details] [review]
Bug 29066: Remove text in OPAC search form and use Font Awesome icons

In modern front-end websites, first think you see in header region is an large input text with a search icon.
No need to say it is a search form.
We still tell it in 'title' attribut for accessibility.

This patch removes 'Search' text.
If 'my library first' feature is enabled, shows a text in title of a
question mark icon.
In submit button, replaces 'Go' with a seach icon and add title
'Search'.

Test plan :
1)
1.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Add'
  SearchMyLibraryFirst to 'Don't limit'
1.2) Go to OPAC main page
1.3) You don't see 'Search' anymore
1.4) You see in submit button an icon
1.5) Move mouse over submit button to see tooltip text 'Search'
2)
2.1) Set system preferences :
  OpacAddMastheadLibraryPulldown to 'Don't add'
  SearchMyLibraryFirst to 'Limit'
2.2) Go to OPAC main page
2.3) Log in
2.4) You don't see text 'Search (in <library name>) only'
2.5) You see a question mark icon
2.6) Move mouse over submit button to see tooltip text 'Search (in <library name>) only'

Signed-off-by: Samu Heiskanen <samu.heiskanen@hypernova.fi>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 23 Kyle M Hall 2022-04-01 12:27:05 UTC
Created attachment 132855 [details] [review]
Bug 29066: (follow-up) add aria-label and aria-hidden on icons

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 24 Katrin Fischer 2022-04-01 21:36:36 UTC
Owen had showed a screenshot on IRC using the 'filter' icon, that I liked better than the question mark, but not sure if he was going to provide a follow-up.
Comment 25 Owen Leonard 2022-04-04 17:25:42 UTC
Created attachment 132947 [details] [review]
Bug 29066: (follow-up) Use tooltip when SearchMyLibraryFirst in effect

This patch proposes to add a Bootstrap tooltip to the OPAC masthead's
search field to indicate to the user when SearchMyLibraryFirst is in
effect. I think this lets the form layout stay clean-looking and is more
informative to the user because they don't have to look for the HTML
title tag tooltip.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Global system preferences.
- Set the OpacAddMastheadLibraryPulldown preference to "Don't add."
- Set the SearchMyLibraryFirst preference to "Limit."
- Go to the OPAC and confirm that the main search field in the masthead
  has a filter icon in the background, indicating that searches will be
  limited.
- Hover your mouse over the search field and a tooltip should pop up,
  "Searching in <library> only"
- The message should also be triggered when you click inside the form
  field.
- Change the OpacAddMastheadLibraryPulldown and SearchMyLibraryFirst
  preferences again and the form should return to its normal behavior.
Comment 26 Owen Leonard 2022-04-04 17:27:51 UTC
I'm not trying to derail the progress of this patch, but I thought this follow-up would be helpful.
Comment 27 Fridolin Somers 2022-04-13 09:06:19 UTC
(In reply to Owen Leonard from comment #26)
> I'm not trying to derail the progress of this patch, but I thought this
> follow-up would be helpful.

Just perfect :D
Comment 28 Fridolin Somers 2022-04-13 13:57:03 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄