Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page.
Created attachment 130896 [details] [review] Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top
Created attachment 130897 [details] [review] Bug 30136: [DO NO PUSH] CSS styling for OPAC This patch is for easy testing of the CSS to apply on button. If feature is validated this must be written in opac SCSS file. Maybe this sould only appear on large screens.
Created attachment 130898 [details] Screenshot with patch
Created attachment 130902 [details] [review] Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
Created attachment 130903 [details] [review] Bug 30136: [DO NO PUSH] CSS styling for OPAC This patch is for easy testing of the CSS to apply on button. If feature is validated this must be written in opac SCSS file. Maybe this sould only appear on large screens. Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
Worked very well. I tested it on opac-search.pl, opac-detail.pl and various patrons pages.
Hi Frido, can you please check? FAIL koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc FAIL forbidden patterns forbidden pattern: Font Awesome icons need the aria-hidden attribute for accessibility purpose (see bug 25166) (line 220)
Created attachment 133219 [details] [review] Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
Created attachment 133220 [details] [review] Bug 30136: [DO NO PUSH] CSS styling for OPAC This patch is for easy testing of the CSS to apply on button. If feature is validated this must be written in opac SCSS file. Maybe this sould only appear on large screens. Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov>
(In reply to Katrin Fischer from comment #7) > Hi Frido, can you please check? > > FAIL koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc > FAIL forbidden patterns > forbidden pattern: Font Awesome icons need the aria-hidden attribute for > accessibility purpose (see bug 25166) (line 220) Ah oupsy. Fixed
I wonder if we still need to improve accessibility here. In my understanding aria-hidden="true" is usually used when we have text in addition to the FA icon and want the screen readers to ignore the icon. In this case, we have the FA icon _only_. There is no alt text or similar, nothing is shown when hovering over the icon. I feel like we should have kind of a textual fallback here. Does that make sense? Would really love to get some additional feedback - adding Owen and Wainui in hope of some insight! Functionality wise this works ok!
Created attachment 133737 [details] [review] Bug 30136: (follow-up) CSS and accessibility update This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS to test. The patch also moves the JavaScript for the button from opac-bottom.inc into global.js and adds accessibility labels to the generated markup.
By the way, Font Awesome provides accessibility suggestions for the version we are using here: https://fontawesome.com/v4/accessibility/
Sorry Frido, I'd be happy to try again when it's fixed. error: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc). error: could not build fake ancestor Patch failed at 0001 Bug 30136: (follow-up) CSS and accessibility update
Ah it comes from patch "[DO NO PUSH] CSS styling for OPAC", I set it as obsolete.
Thanks Frido ! I tested on both personal devbox and sandbox and the display of the button is completely different from the one described and shown on screenshot. The behaviour is also slightly different as the one described as the button is stuck on the bottom of the page so I don't see it before I reach the end of the page. Is that expected ? See sandbox : https://opac-bz30136.sandboxes.biblibre.eu/cgi-bin/koha/opac-search.pl?idx=&q=a&weight_search=1
(In reply to Séverine Queune from comment #16) > Thanks Frido ! > I tested on both personal devbox and sandbox and the display of the button > is completely different from the one described and shown on screenshot. > The behaviour is also slightly different as the one described as the button > is stuck on the bottom of the page so I don't see it before I reach the end > of the page. > Is that expected ? > > See sandbox : > https://opac-bz30136.sandboxes.biblibre.eu/cgi-bin/koha/opac-search. > pl?idx=&q=a&weight_search=1 I dont reproduce this on you sandbox, button appear as soon as I start scrolling down. Maybe clear the cache with Ctrl+F5
Created attachment 134011 [details] [review] Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>
Created attachment 134012 [details] [review] Bug 30136: (follow-up) CSS and accessibility update This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS to test. The patch also moves the JavaScript for the button from opac-bottom.inc into global.js and adds accessibility labels to the generated markup. Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>
(In reply to Fridolin Somers from comment #17) > (In reply to Séverine Queune from comment #16) > > Thanks Frido ! > > I tested on both personal devbox and sandbox and the display of the button > > is completely different from the one described and shown on screenshot. > > The behaviour is also slightly different as the one described as the button > > is stuck on the bottom of the page so I don't see it before I reach the end > > of the page. > > Is that expected ? > > > > See sandbox : > > https://opac-bz30136.sandboxes.biblibre.eu/cgi-bin/koha/opac-search. > > pl?idx=&q=a&weight_search=1 > > I dont reproduce this on you sandbox, button appear as soon as I start > scrolling down. > Maybe clear the cache with Ctrl+F5 Completely my fault, I always forgot to empty my cache and cookies when I test new CSS... Thanks Frido for this great feature !
Created attachment 134063 [details] [review] Bug 30136: Add back to top button to OPAC Like in many websites, when scrolling down the page make a button appear to go back to top. This can be very useful specially in search results page. This patch adds to OPAC using Javascript a button with id "backtotop". Button appears when 300 pixels from top are hidden. This value may be adapted. Test plan 1) Go to OPAC 2) Perform a search with many results 3) Scroll down => Back to top button appears 4) Manually scroll back to top => Button disappears 5) Scroll down and click on Back to top button => You get to top Signed-off-by: Barbara Johnson <barbara.johnson@bedfordtx.gov> Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Created attachment 134064 [details] [review] Bug 30136: (follow-up) CSS and accessibility update This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS to test. The patch also moves the JavaScript for the button from opac-bottom.inc into global.js and adds accessibility labels to the generated markup. Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Pushed to master for 22.05, thanks to everybody involved [U+1F984]