Bug 39475

Summary: WCAG 2.1: 1.4.10 - Content reflow - OPAC header menus
Product: Koha Reporter: Martin Renvoize (ashimema) <martin.renvoize>
Component: AccessibilityAssignee: 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: unspecifiedKeywords: 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
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)
Comment 1 Jake Deery 2025-06-02 08:35:14 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
Comment 2 David Nind 2025-06-06 20:13:34 UTC
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>
Comment 3 David Nind 2025-06-06 20:28:38 UTC
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).
Comment 4 David Nind 2025-06-06 20:56:53 UTC
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.
Comment 5 Lisette Scheer 2025-06-20 20:57:03 UTC
(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.
Comment 6 Lisette Scheer 2025-06-20 20:57:23 UTC
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>
Comment 7 Lucas Gass (lukeg) 2025-06-23 15:52:33 UTC
Nice work everyone!

Pushed to main for 25.11
Comment 8 Paul Derscheid 2025-06-24 09:31:09 UTC
Nice work everyone!

Pushed to 25.05.x for 25.05.03