[Bug 39475] New: WCAG 2.1:1.4.10 - Content Reflow
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Bug ID: 39475 Summary: WCAG 2.1:1.4.10 - Content Reflow Change sponsored?: --- Product: Koha Version: unspecified Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Accessibility Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@openfifth.co.uk QA Contact: testopia@bugs.koha-community.org CC: martin.renvoize@openfifth.co.uk, matt.blenkinsop@openfifth.co.uk, oleonard@myacpl.org https://www.w3.org/WAI/WCAG21/Understanding/reflow.html At high zoom levels or on mobile devices the OPAC header menus do not adequately reflow. Issue • On mobile and at high-levels of zoom some content does not reflow well. At its worst, content is totally obscured and becomes inaccessible serious, the ‘Advanced search’ link • In some places, the impact is less serious and the content is just difficult to read, rather than being inaccessible e.g. the ‘List’ menu when expanded Solution • Review how the content is presented on mobile and at high zoom levels • If possible, add media queries that cause the page to reflow properly to avoid content overlapping when viewed on certain devices and at certain browser zoom levels • Test all content at 400% zoom to check for any bad effects. No content must be lost at that zoom level (but bear in mind that some low vision users use zoom levels even higher than that) -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|enhancement |normal -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |Hackfest -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |CONFIRMED -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Summary|WCAG 2.1:1.4.10 - Content |WCAG 2.1: 1.4.10 - Content |Reflow |Reflow -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Summary|WCAG 2.1: 1.4.10 - Content |WCAG 2.1: 1.4.10 - Content |Reflow |reflow - OPAC Header Menu's -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |jake.deery@openfifth.co.uk |ity.org | -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 --- Comment #1 from Jake Deery <jake.deery@openfifth.co.uk> --- Created attachment 182897 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=182897&action=edit Bug 39475: Fixed reflow issues in dropdown menus This patch aims to fix reflow issues present in dropdown menus, by specifying text-wrap behaviour, and by reducing line-height values in some places to make dropdown items more distinguishable from each other. To test: a) log in to the opac b) create a list with an excessively long name (I chose 'a list about New New New New New New New New New New New New New New New New York') c) open the lists menu in the navbar, zoom in to 400% -) notice how the title of the list rolls off the page -) exit the dropdown menu d) open the user menu in the navbar, zoom in to 400% -) notice how the clear searches button has broken across two lines -) zoom back to 100% APPLY PATCH e) repeat step c -) notice how the title of the list now wraps at the designated width -) zoom back to 100% -) notice how the text is still wrapping, and the dropdown menu is no excessively wide f) repeat step d -) notice how the clear searches button now sits on its own line -) zoom back to 100% -) notice how the clear searches button returns to its usual location g) check other dropdowns for clear bugs -) places i could find were on opac-results and opac-details SIGN OFF -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Jake Deery <jake.deery@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|CONFIRMED |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #182897|0 |1 is obsolete| | --- Comment #2 from David Nind <david@davidnind.com> --- Created attachment 183082 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183082&action=edit Bug 39475: Fixed reflow issues in dropdown menus This patch aims to fix reflow issues present in dropdown menus, by specifying text-wrap behaviour, and by reducing line-height values in some places to make dropdown items more distinguishable from each other. To test: a) log in to the opac b) create a list with an excessively long name (I chose 'a list about New New New New New New New New New New New New New New New New York') c) open the lists menu in the navbar, zoom in to 400% -) notice how the title of the list rolls off the page -) exit the dropdown menu d) open the user menu in the navbar, zoom in to 400% -) notice how the clear searches button has broken across two lines -) zoom back to 100% APPLY PATCH e) repeat step c -) notice how the title of the list now wraps at the designated width -) zoom back to 100% -) notice how the text is still wrapping, and the dropdown menu is no excessively wide f) repeat step d -) notice how the clear searches button now sits on its own line -) zoom back to 100% -) notice how the clear searches button returns to its usual location g) check other dropdowns for clear bugs -) places i could find were on opac-results and opac-details SIGN OFF Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com --- Comment #3 from David Nind <david@davidnind.com> --- Created attachment 183083 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183083&action=edit Screenshots - Search history + clear button (before and after) Testing notes (using KTD): 1. After applying the patch, rebuild the CSS (yarn build) and restart everything (restart_all). 2. I didn't quite get the issue for step d, with the search history and clear button. However, the patch makes the box it is in narrower and puts the clear button on its own line when the screen size is increased past a certain point. See the before and after screenshots (from Firefox at 400%, also tested on Chromium). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Text to go in the| |This fixes some release notes| |accessibility reflow issues | |in dropdown menus for the | |OPAC when larger text sizes | |are used (for example, | |400%). It specifies the | |text-wrap behaviour, and by | |reducing line-height values | |in some places it makes | |dropdown items more | |distinguishable from each | |other. This includes: | |- | |Lists: a list with a very | |long name now wraps, | |instead of staying on one | |line that goes off the | |screen. | |- User menu (when | |logged in): the 'Clear' | |button next to 'Search | |history' now moves down to | |its own line. Summary|WCAG 2.1: 1.4.10 - Content |WCAG 2.1: 1.4.10 - Content |reflow - OPAC Header Menu's |reflow - OPAC header menus --- Comment #4 from David Nind <david@davidnind.com> --- One thing I did notice was the cart. If the text size is 400%, and you view the cart, the sticky header for the table "takes over" the pop-up window and the table content is hidden behind the table header (+More details, Send, Download, etc.). Possibly another bug. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lisette@bywatersolutions.co | |m --- Comment #5 from Lisette Scheer <lisette@bywatersolutions.com> --- (In reply to David Nind from comment #4)
One thing I did notice was the cart. If the text size is 400%, and you view the cart, the sticky header for the table "takes over" the pop-up window and the table content is hidden behind the table header (+More details, Send, Download, etc.).
Possibly another bug.
This also happens on the opac-search.pl results screen when zoomed in to 400% and if zoomed on mobile it will take up a lot of the search results. I think that's a different bug though and it also happens on main. I also couldn't recreate an issue with the clear search button before the patch applied, but it does look slightly less cluttered when zoomed in to 400% so I don't think it's a blocker. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #183082|0 |1 is obsolete| | --- Comment #6 from Lisette Scheer <lisette@bywatersolutions.com> --- Created attachment 183410 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=183410&action=edit Bug 39475: Fixed reflow issues in dropdown menus This patch aims to fix reflow issues present in dropdown menus, by specifying text-wrap behaviour, and by reducing line-height values in some places to make dropdown items more distinguishable from each other. To test: a) log in to the opac b) create a list with an excessively long name (I chose 'a list about New New New New New New New New New New New New New New New New York') c) open the lists menu in the navbar, zoom in to 400% -) notice how the title of the list rolls off the page -) exit the dropdown menu d) open the user menu in the navbar, zoom in to 400% -) notice how the clear searches button has broken across two lines -) zoom back to 100% APPLY PATCH e) repeat step c -) notice how the title of the list now wraps at the designated width -) zoom back to 100% -) notice how the text is still wrapping, and the dropdown menu is no excessively wide f) repeat step d -) notice how the clear searches button now sits on its own line -) zoom back to 100% -) notice how the clear searches button returns to its usual location g) check other dropdowns for clear bugs -) places i could find were on opac-results and opac-details SIGN OFF Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |lisette@bywatersolutions.co |y.org |m -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |25.11.00 released in| | Status|Passed QA |Pushed to main -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 --- Comment #7 from Lucas Gass (lukeg) <lucas@bywatersolutions.com> --- Nice work everyone! Pushed to main for 25.11 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)|25.11.00 |25.11.00,25.05.01 released in| | Status|Pushed to main |Pushed to stable -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 --- Comment #8 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Nice work everyone! Pushed to 25.05.x for 25.05.03 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39475 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |fridolin.somers@biblibre.co | |m Status|Pushed to stable |Needs documenting --- Comment #9 from Fridolin Somers <fridolin.somers@biblibre.com> --- I prefer not push to 24.11.x for UI stability -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org