Make it clear structured navigation is a scrollable element

[elynema]

Description

Currently, the structured navigation component below the player on the media object page is a scrollable element. However, it's not at all obvious to the user that it is scrollable. In this example, it just looks like there are only 3 sections (but there are actually 5).

Private Zenhub Image

Done Looks Like

• Scrollbar always appears for StructuredNav when there is content overflow for Chrome and Safari

[joncameron]

This may already be changed in Ramp; https://avalon-dev.dlib.indiana.edu/media_objects/g158bh28p and https://avalon-dev.dlib.indiana.edu/media_objects/76537133j are displaying the scrollbar by default.

[elynema]

@joncameron I'm not seeing the scrollbar in Chrome until I actually start scrolling. It does not show up always or on mouse-over.

[joncameron]

I also reproduced this, specifically on Chrome 111 on macOS Catalina in Browserstack.

Should we move this to the Ramp repo? Or should this be Avalon CSS that applies to the Ramp StructuredNav component?

[elynema]

Want to force scrollbars for both webkit and mozilla, since always show scrollbar setting is not on by default in Firefox. Atishi requested we make this change prior to user testing as it is a usability issue.

[masaball]

As far as I have been able to determine, firefox/mozilla does not support custom scrollbar settings basically at all. On non-mozilla browsers, scrollbars can be edited with ::webkit-scrollbar pseudo-elements. But Webkit is not used/supported by mozilla.

In terms of standardized CSS elements, the only scrollbar related ones I have found are for setting the color and width of the scrollbar (fun to note that these properties are only compatible in firefox). There are no styling options that override browser or OS level settings for the scrollbars.

It does look like there are some JS libraries such as simplebar or overlay-scrollbar that provide the ability to make custom CSS scrollbars that override/overwrite the browser display. @Dananji, @elynema, @joncameron what do we think about bringing a new dependency into ramp for scrollbar display?

And if we want to pursue that route, Dananji would you be able to vet the libraries/plugins? Besides having the setting/feature to override auto-hide I'm not sure what other considerations would need to be taken into account before bringing in a new library.

[masaball]

Change for chrome/safari has been merged to Ramp and will be brought into Avalon before the user testing week of 11/13. Handling for firefox will be more fully discussed and investigated later and brought in as a future PR.

[joncameron]

Tested and working (scrollbar visible to start) in Chrome 111 on macOS Catalina in Browserstack.

Regarding scrollbars: I have doubts that a library like simplebar would fix this issue, since it "keeps the native overflow: auto scroll" behavior, which is the thing that doesn't seem to be respected anymore by Firefox in certain OS situations. And given that Edge is now Webkit-based, I don't trust that they won't do a rug-pull and put OS defaults for scrollbars above the CSS pseudo selectors for webkit in the future.

That there is no styling or markup available to force a scrollbar in all cases without resorting to some sort of shim is frustrating, but this feels like something we can come back to, or alternatively have some different UI in place to clearly indicate a scrollable area when scrollbars are hidden or thinly styled by default.

[charumitraravi]

QA completed. The definition of done is verified on Chrome and Safari