|
Description
Fridolin Somers
2021-09-20 22:32:32 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' Don't hesitate to ask for changes that are needed for accessibility. Created attachment 125180 [details]
Screenshot mylibraryfirst
Created attachment 125181 [details]
Screenshot librarypulldown
Created attachment 128927 [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> 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? (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" Created attachment 129519 [details] [review] Bug 29066: (follow-up) add aria-label 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) Created attachment 130031 [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> Created attachment 130032 [details] [review] Bug 29066: (follow-up) add aria-label and aria-hidden on icons (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 Sorry to say, I cannot get this patchset to apply cleanly to master now. :( Ah I forgot to obsolete a patch after commit message change. 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> 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> Owen, can we get your stamp on this one please? 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> 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> 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> 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. 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> 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> 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. 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. I'm not trying to derail the progress of this patch, but I thought this follow-up would be helpful. (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 Pushed to master for 22.05, thanks to everybody involved [U+1F984] |