Bug 25242 - Accessibility: The 'Holdings' table partially obscures navigation links at 200% zoom
Summary: Accessibility: The 'Holdings' table partially obscures navigation links at 20...
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Martin Renvoize
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 25241 26263
  Show dependency treegraph
 
Reported: 2020-04-22 06:36 UTC by Martin Renvoize
Modified: 2021-06-14 21:29 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.11.00, 20.05.05, 19.11.12


Attachments
Bug 25242: Improve column wrapping and overflow for tables (1.34 KB, patch)
2020-08-06 12:32 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping and overflow for tables (1.39 KB, patch)
2020-08-06 15:25 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping and overflow for tables (1.45 KB, patch)
2020-08-16 09:20 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping and overflow for tables (1.45 KB, patch)
2020-08-18 09:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25242: (QA follow-up) Colwidth on results table (2.73 KB, patch)
2020-08-18 09:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25242: (QA follow-up) Remove deprecated break-word (1.01 KB, patch)
2020-08-19 07:37 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping for holdingst (1.41 KB, patch)
2020-09-01 16:16 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping for holdingst (1.48 KB, patch)
2020-09-04 12:22 UTC, Timothy Alexis Vass
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping for holdingst (1.53 KB, patch)
2020-09-04 14:05 UTC, Alexis Ripetti
Details | Diff | Splinter Review
Bug 25242: Improve column wrapping for holdingst (1.59 KB, patch)
2020-09-12 20:54 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize 2020-04-22 06:36:09 UTC
The ‘Holdings’ table partially overlaps the adjacent list of links when the page is magnified up to 200%.

1/ Search for an item
2/ Navigate to the full detail view of an item
3/ Select the 'Holdings' tab
4/ Zoom to 200%
5/ Note that the table overlaps the right content.
Comment 1 Martin Renvoize 2020-08-06 12:32:21 UTC
Created attachment 107884 [details] [review]
Bug 25242: Improve column wrapping and overflow for tables

This patch attempts to improve the column wrapping and prevent
datatabels from overlapping with other content on high zoom levels/low
width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to various tables in the OPAC (Holds table is a good one)
and 'play' with various window sizes and zoom levels.
3/ The table should not overlap with right navigation content
4/ Signoff
Comment 3 Owen Leonard 2020-08-06 15:25:44 UTC
Created attachment 107897 [details] [review]
Bug 25242: Improve column wrapping and overflow for tables

This patch attempts to improve the column wrapping and prevent
datatabels from overlapping with other content on high zoom levels/low
width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to various tables in the OPAC (Holds table is a good one)
and 'play' with various window sizes and zoom levels.
3/ The table should not overlap with right navigation content
4/ Signoff

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 4 Katrin Fischer 2020-08-16 09:20:36 UTC
Created attachment 108348 [details] [review]
Bug 25242: Improve column wrapping and overflow for tables

This patch attempts to improve the column wrapping and prevent
datatabels from overlapping with other content on high zoom levels/low
width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to various tables in the OPAC (Holds table is a good one)
and 'play' with various window sizes and zoom levels.
3/ The table should not overlap with right navigation content
4/ Signoff

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 5 Martin Renvoize 2020-08-18 09:39:50 UTC
Created attachment 108438 [details] [review]
Bug 25242: Improve column wrapping and overflow for tables

This patch attempts to improve the column wrapping and prevent
datatabels from overlapping with other content on high zoom levels/low
width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to various tables in the OPAC (Holds table is a good one)
and 'play' with various window sizes and zoom levels.
3/ The table should not overlap with right navigation content
4/ Signoff

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 6 Martin Renvoize 2020-08-18 09:39:53 UTC
Created attachment 108439 [details] [review]
Bug 25242: (QA follow-up) Colwidth on results table

Prior to this patch, the column width on the opac-results table were not
fixed or calculated by a datatable; As such when we introduced the
'table-layout: fixed' property all columns were given equal share of the
table, which resulted in most cases in a three way split between a
checkbox, an empty cell and the actual content.

This patch sets the width for the selectcol to '1ch' for the single
character checkbox and updates the second columns class to 'numcol' as
it is not used for selection but rather result numbering and sets a
fixed width of '4ch' allowing for results upto 3 digits (plus the
period) to display correctly without wrapping.

Test plan
1/ Apply the patches and run the yarn build process to update the .css
2/ Perform a search and varify that the results table looks reasonable
3/ Disable OPACHiddenItems and perform a search again.
4/ Confirm the table looks reasonable still
5/ Signoff
Comment 7 Martin Renvoize 2020-08-18 09:43:07 UTC
Oops, this one slipped through QA without the results table being checked properly.. This table is NOT a datatable like the others and thus didn't have authwidth being calculated.

The followup corrects the display of this table.. I have tried to catch all other tables during my own testing, and am happy to provide further followups if we spot anything post push.
Comment 8 Jonathan Druart 2020-08-18 14:57:54 UTC
On https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

word-break: break-word; is marked as deprecated

Do we really need it?
Comment 9 Martin Renvoize 2020-08-18 15:03:18 UTC
Sounds like perhaps we no longer do.. break-all appears ot be the modern equivilent on all browsers.
Comment 10 Martin Renvoize 2020-08-19 07:37:18 UTC
Created attachment 108574 [details] [review]
Bug 25242: (QA follow-up) Remove deprecated break-word

It appears break-word is now deprecated in Firefox and instead all
browsers now support break-all as the definitive.
Comment 11 Jonathan Druart 2020-08-20 10:34:28 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 12 Katrin Fischer 2020-08-21 21:23:17 UTC
I feel like this has too many side effects, some have been filed, but I am seeing more. For example the course reserves tables no longer "squashes" nicely on smaller screens - the columns contents run into each other.
Comment 13 Katrin Fischer 2020-08-21 21:23:35 UTC
I suggest to revert and start fresh.
Comment 14 Martin Renvoize 2020-08-22 06:28:53 UTC
We could target just this table, but personally I'd rather work through fixing issues and keep with OPAC wide accessibility and responsive design fix provided here.

We have the time left in the cycle, I'm happy to commit to providing fixes if you bring my attention to them.  I did mention in the test plan to check various tables rather that just focus on the one I was targeting fixing.  Problem is, we have lots of tables that display differently with varying settings. We clearly missed some combinations.
Comment 15 Katrin Fischer 2020-08-22 09:35:31 UTC
I suspect that this setting is too radical: 

+    table-layout: fixed;

fixed 	Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells

So that's why I said we should maybe reconsider and start over, trying to fix the initial issue differently than trying to work on all other tables - I think that could be easier after all. See also Owen's comment on bug 26263.
Comment 16 Jonathan Druart 2020-09-01 14:04:43 UTC
Patches have been reverted from master.

  commit 4009bb04ad857ef042bba9a4d690dd21d84ac3dd
  Revert "Bug 25242: Improve column wrapping and overflow for tables"
Comment 17 Martin Renvoize 2020-09-01 16:16:03 UTC
Created attachment 109444 [details] [review]
Bug 25242: Improve column wrapping for holdingst

This patch attempts to improve the column wrapping for the holdingst
datatable and sets the tabel to fixed width to prevent overlapping
with other content on high zoom levels/low width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to an item with holdings visible in the OPAC
3/ 'Play' with various window sizes and zoom levels.
4/ The table should not overlap with right navigation content
5/ Signoff

NOTE: This is an alternative patch to those pushed and reverted that
attempted to provide a global fix to overlap issues. This patch
specifically targets just the holdings table in the opac detail view.
Comment 18 Martin Renvoize 2020-09-01 16:39:55 UTC
Here we go again.. Needs Signoff
Comment 19 Timothy Alexis Vass 2020-09-04 12:22:17 UTC
Created attachment 109654 [details] [review]
Bug 25242: Improve column wrapping for holdingst

This patch attempts to improve the column wrapping for the holdingst
datatable and sets the tabel to fixed width to prevent overlapping
with other content on high zoom levels/low width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to an item with holdings visible in the OPAC
3/ 'Play' with various window sizes and zoom levels.
4/ The table should not overlap with right navigation content
5/ Signoff

NOTE: This is an alternative patch to those pushed and reverted that
attempted to provide a global fix to overlap issues. This patch
specifically targets just the holdings table in the opac detail view.

Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Comment 20 Alexis Ripetti 2020-09-04 14:05:30 UTC
Created attachment 109663 [details] [review]
Bug 25242: Improve column wrapping for holdingst

This patch attempts to improve the column wrapping for the holdingst
datatable and sets the tabel to fixed width to prevent overlapping
with other content on high zoom levels/low width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to an item with holdings visible in the OPAC
3/ 'Play' with various window sizes and zoom levels.
4/ The table should not overlap with right navigation content
5/ Signoff

NOTE: This is an alternative patch to those pushed and reverted that
attempted to provide a global fix to overlap issues. This patch
specifically targets just the holdings table in the opac detail view.

Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Signed-off-by: Alexis Ripetti <alexis.ripetti@inLibro.com>
Comment 21 Katrin Fischer 2020-09-12 20:54:39 UTC
Created attachment 109994 [details] [review]
Bug 25242: Improve column wrapping for holdingst

This patch attempts to improve the column wrapping for the holdingst
datatable and sets the tabel to fixed width to prevent overlapping
with other content on high zoom levels/low width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to an item with holdings visible in the OPAC
3/ 'Play' with various window sizes and zoom levels.
4/ The table should not overlap with right navigation content
5/ Signoff

NOTE: This is an alternative patch to those pushed and reverted that
attempted to provide a global fix to overlap issues. This patch
specifically targets just the holdings table in the opac detail view.

Signed-off-by: Timothy Alexis Vass <timothy_alexis.vass@ub.lu.se>
Signed-off-by: Alexis Ripetti <alexis.ripetti@inLibro.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 22 Jonathan Druart 2020-10-01 09:44:35 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 23 Lucas Gass 2020-10-20 17:52:36 UTC
accessibility enhancement, choosing to backport

backported to 20.05.x for 20.05.05
Comment 24 Aleisha Amohia 2020-11-05 00:39:57 UTC
backported to 19.11.x for 19.11.12
Comment 25 Victor Grousset/tuxayo 2020-11-08 16:57:59 UTC
Doesn't seem to affect 19.05.x not backporting.