search

RocketChat / Rocket.Chat

The communications platform that puts data protection first.
https://rocket.chat/
Other
40.61k stars 10.61k forks source link

WHAT is Rocket.Chat doing with scrollbars? (a11y and UI problem) #29359

Open mirabilos opened 1 year ago

mirabilos commented 1 year ago

Description:

Rocket.Chat, which I am forced to use for work, does weird things to scrollbars. They are not visible until I attach an external mouse with wheel and move the wheel (making scrolling impossible for Thinkpad classic X-series, trackball or 2/3-button mouse users, which is severely broken UI); they are then almost invisible (almost black on almost black; bad for accessibility, I can barely see it as is) and react much too sluggishly. They are also missing the up and down arrows.

I do have a Firefox userContent.css that fixes scrollbars on almost all other sites, such as this GitHub issue entry form, to behave somewhat properly (dark rectangle on brighter track, with arrows that work, always visible), but somehow Rocket.Chat manages to override this despite the !important in the userContent.css that’s supposed to prevent sites from doing just that.

Steps to reproduce:

  1. Log in to the Rocket.Chat webinterface
  2. Try to find a channel, or go into a channel and try to read older messages

Expected behavior:

The standard browser scrollbar is used and visible by standard browser rules. Users who configure an accessible scrollbar can use them in the web application.

Actual behavior:

This… thing… seems to disable scrollbars, somehow, and draw its own. This is supposedly not possible, so it probably also overrides the overflow handling. Ugh. Major antifeature.

Server Setup Information:

Client Setup Information

Vaani-pathariya commented 1 year ago

Willing to work on this issue , will raise a PR very soon

jazztickets commented 1 year ago

FWIW I've disabled "rc-scrollbars" by using this in Workspace -> Settings -> Layout -> Custom CSS

.rc-scrollbars-view { margin-right: 0px !important; }
.rc-scrollbars-track { display: none !important; }
mirabilos commented 1 year ago

jazztickets dixit:

FWIW I've disabled "rc-scrollbars" by using this in Workspace -> Settings -> Layout -> Custom CSS

.rc-scrollbars-view { margin-right: 0px !important; }
.rc-scrollbars-track { display: none !important; }

OK, and how do I get the real scrollbars back?

audouts commented 2 weeks ago

Would fixing this help my issue at all? https://github.com/RocketChat/Rocket.Chat/issues/31717

mirabilos commented 2 weeks ago

On Mon, 28 Oct 2024, audouts wrote:

Would fixing this help my issue at all? https://github.com/RocketChat/Rocket.Chat/issues/31717

Possibly, but evidently rocketchat is actively disinterested in fixing basic accessibility issues and honouring standards.

audouts commented 2 weeks ago

On Mon, 28 Oct 2024, audouts wrote: Would fixing this help my issue at all? #31717 Possibly, but evidently rocketchat is actively disinterested in fixing basic accessibility issues and honouring standards.

That's frustrating. Our team really likes RocketChat but it's frustrating that we have to hunt for tiny pixels to use an essential UI element. Frankly, the scrollbar is already pretty narrow.