Increasing text zoom size on mobile devices does not uniformly increase text size in Ramp components

[elynema]

Description

Testing Ramp in avalon-dev. Increasing the text size in the Safari browser seems to increase text size in only certain Ramp components. Which components are affected seems to differ between iPad/iPhone and Android.

This behavior is not seen when zooming the browser in Chrome or Safari on desktop.

On iPhone or iPad (ios17):

1. Load https://avalon-dev.dlib.indiana.edu/media_objects/3j3332278 in Safari
2. Click the AA icon on the far left side of the address bar
3. Increase text zoom to 150% or 200%
4. Scroll down and you can see that the media object title and sections did increase size, but the Details text did not.

On Android Device (Google Pixel 8 or Samsung Galaxy S24, OS 14):

1. Load https://avalon-dev.dlib.indiana.edu/media_objects/3j3332278 in Chrome
2. Click the three vertical dots to the right of the address bar
3. Scroll down and click Settings, then Accessibility.
4. Slide the slider at the top to 200% to scale text up
5. Go back and reload the web page
6. Scroll down and you can see that the media object title and sections did not increase to 200% size, but the Details and Transcript text did.

Not sure if this is a bug or if we need to discuss possible solutions. It does seem like all text should increase in size uniformly to meet the WCAG requirements.

[Dananji]

Sometimes all CSS properties are not supported in every browser/platform combination. This could probably be fixed by using browser specific CSS for these components.
We need to update the CSS and test across different platforms including desktop browsers, as these changes can affect them.

[Dananji]

Zooming in on iPhone 13 Pro Max v18.0:

Tested page: https://avalon-dev.dlib.indiana.edu/media_objects/3j3332278

On iPhone or iPad (ios17):
Scroll down and you can see that the media object title and sections did increase size, but the Details text did not.

From what I observed the text sizes are increasing in the Details tab, but the font sizes for different components are not the same to begin with. Notice how the font-size of structures are bigger than metadata display at the start of the screen recordings below. And this was observed in Android devices I tested on Browserstack as well.

On iPhone 13 Pro Max on iOS v18.0:

Screen.Recording.2024-11-21.at.3.51.21.PM.mov

On iPad Pro 13 2024 on iOS v17.5:

Screen.Recording.2024-11-21.at.4.26.18.PM.mov

On Android Device (Google Pixel 8 or Samsung Galaxy S24, OS 14):
Scroll down and you can see that the media object title and sections did not increase to 200% size, but the Details and Transcript text did.

I was not able to reproduce this for Samsung Galaxy S24 Ultra on Android v14.0, Samsung S24 on Android v14.0 , and Google Pixel 8 on Android v14.0.

On Samsung S24 on Android v14.0:

Screen.Recording.2024-11-21.at.4.19.52.PM.mov

The same item on Ramp demo site on iPad Pro 13 2024 on iOS v17.5:

Screen.Recording.2024-11-21.at.4.33.12.PM.mov

It seems on Ramp demo site the text size increase with zooming-in more consistent than what we are seeing on avalon-dev. Observed this on both iPad and Google Pixel 8.

A possible starting place: the font-sizes of the components could possible be affected by other CSS (un-scoped) in the Avalon context, resulting in the inconsistency of the text size increases in different components?

[Dananji]

I set a font-size in the main CSS file of Ramp that applies it to all the components. With this the text sizes are identical across all components unless they are specifically changed via CSS (either in Ramp or a host application).

Issue in Android;
After some digging, I found that, the inconsistent font-sizes we are seeing in the details tab (larger than expected) and files tab (smaller than expected) are caused by a height calculated by the browser when the page is zoomed in/out using accessibility settings.
When I tried to change this height value is via the CSS rules in the Ramp code, the text doesn't respond to the text size changes made with the accessibility settings. So, I didn't change anything related to this and I was not able to fix it via CSS.