Summary: | WCAG 2.1: 1.4.10 - Content reflow - OPAC header menus | ||
---|---|---|---|
Product: | Koha | Reporter: | Martin Renvoize (ashimema) <martin.renvoize> |
Component: | Accessibility | Assignee: | Jake Deery <jake.deery> |
Status: | Pushed to stable --- | QA Contact: | Lisette Scheer <lisette> |
Severity: | normal | ||
Priority: | P5 - low | CC: | david, lisette, martin.renvoize, matt.blenkinsop, oleonard |
Version: | unspecified | Keywords: | Hackfest |
Hardware: | All | ||
OS: | All | ||
GIT URL: | Change sponsored?: | --- | |
Patch complexity: | --- | Documentation contact: | |
Documentation submission: | Text to go in the release notes: |
This fixes some 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.
|
|
Version(s) released in: |
25.11.00,25.05.01
|
Circulation function: | |
Attachments: |
Bug 39475: Fixed reflow issues in dropdown menus
Bug 39475: Fixed reflow issues in dropdown menus Screenshots - Search history + clear button (before and after) Bug 39475: Fixed reflow issues in dropdown menus |
Description
Martin Renvoize (ashimema)
2025-03-27 17:03:39 UTC
Created attachment 182897 [details] [review] 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 Created attachment 183082 [details] [review] 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> Created attachment 183083 [details]
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).
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. (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. Created attachment 183410 [details] [review] 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> Nice work everyone! Pushed to main for 25.11 Nice work everyone! Pushed to 25.05.x for 25.05.03 |