-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve scrollbar accessibility #4115
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
@hichemfantar is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you send some windows screenshot before/after 🙏?
this also fixes a bug on firefox windows where the scrollbar becomes invisible when clicked |
i've done all the cross platform testing and everything works better than before |
@dimaMachina any hesitations about this? willing to discuss this further |
Why:
improves scrollbar accessibility, shows the user where the content starts and ends, better contrast, brings back inactive, hover, and active (on windows and linux) states
this also removes outdated styles, scrollbar styles are now properly supported
scrollbars can also be customized by the user on the OS or browser level so it's best to stick to native styles as much possible to avoid overriding user settings
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width#browser_compatibility
tested across all browsers and OSes
What's being changed (if available, include any code snippets, screenshots, or gifs):
before
![image](https://private-user-images.githubusercontent.com/34947993/407969422-35991345-15d0-4a2d-a36a-11c52748fed1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODAxMDgsIm5iZiI6MTczOTQ3OTgwOCwicGF0aCI6Ii8zNDk0Nzk5My80MDc5Njk0MjItMzU5OTEzNDUtMTVkMC00YTJkLWEzNmEtMTFjNTI3NDhmZWQxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEzVDIwNTAwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAyM2EyMWY0MDJhMWI4ZjU1N2ZjNDUyMzg1MTg1ZTMzMWNmMDA5MDkzNjk5YjRkYzVlNGRhNjVhYWQzZjg2NTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.5gRP1QFuRSfU1vYkc7XE6l5rpUWIygQy7TJDaXy7JbE)
after
![image](https://private-user-images.githubusercontent.com/34947993/407969451-e6db854b-3f63-4dfb-abb0-9cfa14b08c27.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODAxMDgsIm5iZiI6MTczOTQ3OTgwOCwicGF0aCI6Ii8zNDk0Nzk5My80MDc5Njk0NTEtZTZkYjg1NGItM2Y2My00ZGZiLWFiYjAtOWNmYTE0YjA4YzI3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEzVDIwNTAwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYwOWY1YWYwOTI2YjU2MDBmNGRhYjU3NWNmNzRlZWI5NDJlN2YwZTlkZjAyN2U4YTk1OGY4OTlhNDkwYjMxMjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.C5KKCil6xWk90qK65-rwd2-47TVqlUo4gnRVZhwbwxU)
before (hover state)
Screen.Recording.2025-01-30.at.2.52.38.AM.mp4
after (hover state)
Screen.Recording.2025-01-30.at.2.52.56.AM.mp4
Check off the following:
deployment link in this PR's timeline (this link will be available after
opening the PR).