Cut-off issues on mobile viewport and/or zoom to 200%

[dhweddington]

@lgeggleston

Submitted on behalf of University of Virginia (UVA) Library’s Assessment, Communications, and User Experience (ACE) team as part of internal DSpace 9 accessibility audit.

Issue 1 of 5: Reflow Issues - Text Cut Off

Describe the bug

Text in main area is cut off from view when tree is expanded on mobile view and when zoomed in to 200%.

Page

Community and Collections

WCAG Guideline

WCAG 1.4.10

To Reproduce

Locate the following area on the page: Affects the full page - in the main list and in the dropdown list.

Relevant code

Example code from one instance:
\<div class="d-flex flex-row"\>\<span class="d-flex align-middle my-auto"\>\<a role="link" tabindex="0" class="lead" href="/collections/214721e8-30be-48c7-806e-bb921215651c"\>~ GENERAL, College of Arts &amp; Sciences\</a\>\<span class="pe-2"\>&nbsp;\</span\>\<!----\>\</span\>\</div\> Style (most likely) causing the issue on mobile: element.style { padding-left: 40px; }

Expected behavior

Update responsive sizing. Please see LIBRAOC-710 - Issue #H-5 and H-6: Mobile Header and Footer Navigation Resizing; WCAG 1.4.4 and 1.4.10 CLOSED with Issue #H-5 and H-6 which has the same issue on the header/footer (continued here).

Suggested fix / example code

Reduce tree node padding and allow text wrapping. Use rem instead of px to allow for smoother scaling. Be sure to reduce padding further for mobile view. padding-left: 1.5rem (or variation, doesn't have to be 1.5) Mobile: padding-left:0.75rem !important

Issue 2 of 5: Mobile - Header Navigation Resizing

Describe the bug

Page is readable on desktop, but not on mobile when zoomed to 200%. Mainly affects header navigation and footer on this page. Content cannot adapt without loss of information or functionality at small viewports and high zoom levels.

Page

Home

WCAG Guideline

WCAG 1.4.4, 1.4.10

To Reproduce

Relevant code

[\_nghost-dspace-angular-c2264348223] #main-site-header[\_ngcontent-dspace-angular-c2264348223] { background-color: var(--ds-header-bg);} @media (min-width: 768px) { [\_nghost-dspace-angular-c2264348223] #main-site-header[\_ngcontent-dspace-angular-c2264348223] { height: var(--ds-header-height); }} [\_nghost-dspace-angular-c2264348223] #main-site-header[\_ngcontent-dspace-angular-c2264348223] { min-height: var(--ds-header-height);} *, *:before, *:after { box-sizing: border-box;} user agent stylesheet header { display: block; unicode-bidi: isolate;} [\_nghost-dspace-angular-c3946170981] { --ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color); --ds-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color); --ds-expandable-navbar-height: calc(100vh - var(--ds-header-height));} Footer Code Snippet start – please check styles: \<ds-footer \_ngcontent-dspace-angular-c3074528159=""

Expected behavior

Fix issue which is caused by flex containers using flex-nowrap and child elements that cannot shrink, preventing the header from wrapping or resizing appropriately. Several elements, including the logo, search icon, and login link, retain fixed or minimum widths that force horizontal overflow. It appears that (min-width: 768px) is the most likely culprit, but please do check throughout the site as it affects the body on other pages.

Suggested fix / example code

Please check throughout site as it affects all pages. Allow flex items to shrink (flex-shrink:1; min-width:0), allow wrapping instead of forced single lines (flex-wrap instead of flex-nowrap), allow images to scale (max-width: 100%; height: auto), remove or override unshrinkable constraints (avoid flex-shrink:0; white-space: nowrap; min-width: /any fixed px value / ) and avoid allowing overflow-wrap:anywhere.

Issue 3 of 5: Mobile - Footer Navigation Resizing

Describe the bug

Page is readable on desktop, but not on mobile when zoomed to 200%. Mainly affects header navigation and footer on this page. Content cannot adapt without loss of information or functionality at small viewports and high zoom levels.

Page

Home

WCAG Guideline

WCAG 1.4.4, 1.4.10

To Reproduce

Relevant code

\<div \_ngcontent-dspace-angular-c3381916120="" class="bottom-footer p-1 d-flex flex-column flex-md-row justify-content-center align-items-center text-white"\>\<div \_ngcontent-dspace-angular-c3381916120="" class="content-container align-self-center"\>\<p \_ngcontent-dspace-angular-c3381916120="" class="m-0"\>\<a \_ngcontent-dspace-angular-c3381916120="" href="http://www.dspace.org/" role="link" tabindex="0" class="text-white"\>DSpace software\</a\> copyright © 2002-2026 \<a \_ngcontent-dspace-angular-c3381916120="" href="https://www.lyrasis.org/" role="link" tabindex="0" class="text-white"\>LYRASIS\</a\>\</p\>\<ul \_ngcontent-dspace-angular-c3381916120="" class="footer-info list-unstyled d-flex justify-content-center mb-0"\>\<li \_ngcontent-dspace-angular-c3381916120="" class="ng-star-inserted"\>\<button \_ngcontent-dspace-angular-c3381916120="" type="button" role="button" tabindex="0" class="btn btn-link text-white"\> Cookie settings \</button\>\</li\>\<!----\>\<li \_ngcontent-dspace-angular-c3381916120=""\>\<a \_ngcontent-dspace-angular-c3381916120="" routerlink="info/accessibility" role="link" tabindex="0" class="btn text-white" href="/info/accessibility"\>Accessibility settings

Expected behavior

Fix issue which is caused by flex containers using flex-nowrap and child elements that cannot shrink, preventing the header from wrapping or resizing appropriately. Several elements, ncluding the logo, search icon, and login link, retain fixed or minimum widths that force horizontal overflow.

Suggested fix / example code

Please check throughout site as it affects all pages. Allow flex items to shrink (flex-shrink:1; min-width:0), allow wrapping instead of forced single lines (flex-wrap instead of flex-nowrap), allow images to scale (max-width: 100%; height: auto), remove or override unshrinkable constraints (avoid flex-shrink:0; white-space: nowrap; min-width: /any fixed px value / ) and avoid allowing overflow-wrap:anywhere.

Issue 4 of 5: Resize Text - Cut off

Describe the bug

Link is cut off at 200% zoom. Table is scrollable horizontally, which is acceptable.

Page

Item Page

WCAG Guideline

WCAG 1.4.4, 1.4.10

Relevant code

\<div \_ngcontent-dspace-angular-c3003153274="" class="col-2"\>\<ds-file-download-link \_ngcontent-dspace-angular-c3003153274="" cssclasses="btn btn-outline-primary btn-download" data-used-theme="libraopen"\>\<ds-themed-file-download-link \_nghost-dspace-angular-c300052796="" class="ng-star-inserted"\>\<ds-access-status-badge \_ngcontent-dspace-angular-c300052796="" class="ng-star-inserted" data-used-theme="libraopen"\>\<ds-themed-access-status-badge class="ng-star-inserted"\>\<!----\>\</ds-themed-access-status-badge\>\<!----\>\</ds-access-status-badge\>\<!----\>\<a \_ngcontent-dspace-angular-c300052796="" role="link" tabindex="0" class="d-block dont-break-out mb-1 btn btn-outline-primary btn-download" title="Download CS-2006-13.pdf" aria-label="Download CS-2006-13.pdf" target="\_self" href="/bitstreams/9de13a43-63d2-47fd-95ec-488f87057788/download"\>\<!----\>\<!----\>\<i \_ngcontent-dspace-angular-c300052796="" class="fas fa-download d-inline ng-star-inserted"\>\</i\>\<!----\>\<span \_ngcontent-dspace-angular-c3003153274="" class="d-none d-md-inline ng-star-inserted"\> Download \</span\>\<!----\>\</a\>\<!----\>\</ds-themed-file-download-link\>\<!----\>\</ds-file-download-link\>\</div\>

Expected behavior

This issue occurs across the site and has been documented as an issue for the Home page and Communities and Collection page. Development team were given notes to make fix site-wide.

Issue 5 of 5: Dropdown Menu Cut Off (Mobile)

Describe the bug

This issue was found during quality review of development team's fixes. Responsive sizing for mobile views seem to be fixed except for uploading a new item when logged in. The dropdown when clicking on the "+" button is blocked by the leftside navigation bar. The rightmost button is also half-hidden, but I believe that button is being removed (not sure?), otherwise it needs to be formatted to not be cut off by the screen width.

Page

My LibraOpen

WCAG Guideline

WCAG 1.4.10 and 1.4.4

To Reproduce

Upload item buttons and expanded drop-down in the mobile view.

Relevant code

Here's the outer div for upload area:
\<ds-my-dspace-new-submission \_ngcontent-dspace-angular-c107738444="" \_nghost-dspace-angular-c3476923354="" class="ng-tns-c107738444-101 ng-star-inserted"\>\<div \_ngcontent-dspace-angular-c3476923354="" class="parent mb-3"\> Here's the dropdown that's being cut off: \<div \_ngcontent-dspace-angular-c2090173848="" ngbdropdownmenu="" id="entityControlsDropdownMenu" aria-labelledby="dropdownSubmission" class="dropdown-menu p-0 show" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 54px, 0px);" data-popper-placement="bottom-end"\>\<ds-entity-dropdown \_ngcontent-dspace-angular-c2090173848="" \_nghost-dspace-angular-c2643853920=""\>

Expected behavior

Recommended action is to fix responsive sizing of both the div for the upload button and for the dropdown. The responsive sizing fixes used for the header/footer and the mobile menu dropdown that the Dev team already made to header/footer were great –-- recommend using the same type of fixes. The mobile menu works great for this; putting that code snippet in as an example.

Suggested fix / example code

Mobile menu code snippet here for reference:
\<div \_ngcontent-dspace-angular-c3946170981="" id="mobile-navbar-wrapper" class="ng-tns-c3946170981-1 ng-trigger ng-trigger-slideMobileNav ng-star-inserted" style=""\>

[guillermo-escire]

Hi @dhweddington , could you please assign me this issue to work on?

[dhweddington]

Hi @guillermo-escire. I can't assign, but alerting @lgeggleston.