Web-stories-wp: Scrollbars should auto-hide (respect OS level settings)

[pbakaus]

Bug Description

Currently, the custom styled scrollbars are not auto-hidden on Mac OS when a trackpad is used (default behavior). This is due to the fact that styling them overrides the automatic switching. I did some research and Filament Group found a way to do this, see https://www.filamentgroup.com/lab/scrollbars/

Expected Behaviour

Scrollbars should only show on scroll when a trackpad is used with the following setting in MacOS "Show scrollbars":

Steps to Reproduce

Open the editor. Click on a text element. Observe an always visible scrollbar in e.g. the design panel.

Screenshots

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

QA Instructions

[swissspidy]

Not sure I'd consider this a bug, since I think the current behavior was defined like this by UX. But implementing this as a custom React hook seems simple enough.

[pbakaus]

@swissspidy nah, @samitron7 is actually the one who keeps bugging me about this :)

[bmattb]

@diegovar should we take this out of S32?

[swissspidy]

Moved it back to sprint backlog because it was wrongly assigned to the media pod. Given that there's an existing PR that can serve as a foundation (#1858), I think this can be finally brought over the finish line.

[samitron7]

@swissspidy "Not sure I'd consider this a bug, since I think the current behavior was defined like this by UX." This is actually logged by me as a bug. ie, in Figma I defined that the scrollbar should only appear if you mouse over the media library. Currently, scrollbar are always visible everywhere and depending on what I'm doing, occasionally I see 4 of them. New visual designs are coming in so I'll make sure we clearly define areas where they appear on hover and certain areas where I think we don't even need them.

[diegovar]

That's not how iOS shows scrollbars though. In iOS scrollbars only appear while you're scrolling, and disappear after a moment once you stop scrolling. Should we override that behaviour?

Note that this is not what currently happens in the story editor.

[samitron7]

@diegovar Scrollbar appearing on hover or scrolling is fine by me, just not having them exposed all the time is what I would like to resolve. Areas in the element panels where the user needs to understand there are more of something, scrollbars are good to have. Outside of that, I don't think we need to show scrollbars (ie the design panel). Most editors don't even expose them and it's not an issue for users who is accustomed to scrolling to get to an attribute they need.

[swissspidy]

@samitron7 Thanks, but my comment was long outdated, we‘ve already began fixing this.

[miina]

@pbakaus @samitron7
Confirming just in case to ensure the description of the issue is up to date -- even though the generally expected behavior is to auto-hide the scrollbars, the scrollbars should still be always visible everywhere in the editor if the user configures the Mac to always show the scrollbar, is that correct?
Thanks!

[pbakaus]

@miina correct. The scrollbar behavior should follow OS level settings, or otherwise we a) don't make it feel native, and b) break A11Y. Some people deliberately make scrollbars always show because they need to.

The link I pasted in the description is actually an excellent writeup on the topic. If you follow that post, you'll be in a good state I believe.

[miina]

As the decision was to not use auto-hiding scrollbars, closing this in favor of #3363.