p5.js-web-editor
p5.js-web-editor copied to clipboard
processing
Highlighting Text with a Mouse Drag Cause Text to Become Unreadable in High Contrast Mode
Nature of issue?
- Found a bug
Details about the bug:
Don't know if this actual qualifies as a bug but I found it somewhat annoying. And I think it makes it harder to use the UI when you can't see the selected text.
Bug might appear in other places or in other themes but I don't have the time at the moment to investigate more.
- Web browser and version: Firefox 84.0.2 (64-bit)
- Operating System: Linux - OS: Zorin 15 bionic - Kernel: x86_64 Linux 5.4.0-62-generic
- Steps to reproduce this bug:
- Login to web editor and set to high contrast theme.
- Go to file > open > collections > create collection
- When the dialog opens use the mouse to highlight the collection name.
https://user-images.githubusercontent.com/43045568/105800089-38838600-5f53-11eb-896e-384f529d5a38.mp4
Update: I found another text box with the same issue. Happens when renaming a sketch.
https://user-images.githubusercontent.com/43045568/105800777-c3b14b80-5f54-11eb-9274-c562f43b8e60.mp4
Thanks for reporting! I think this is an operating system level setting. It looks different (as in, it's legible) on my Mac, or if I go on BrowserStack and try it on Windows. Are you able to change this in your Linux OS settings?
@catarak I think you're right it does look like a os level problem. I did some research and it looks like it can still be set in css it just overrides the system default.
I found this: https://www.w3docs.com/snippets/css/how-to-change-the-default-text-selection-color-with-css.html
And did a simple test:
https://user-images.githubusercontent.com/43045568/106532493-81848e80-64ad-11eb-8730-c3a8ebb6f887.mp4
Might be worth adding to catch this use case. I don't know what unintended consequences it might have to add this in. If you want to close this issue that's fine. If you think it's worth changing I'd be happy to take a stab at it in the next two weeks.
@violetcraze thank you for looking into this! I didn't realize you could change the selection text with CSS. I think it would make sense to choose a selection color for each theme that is WCAG AA compliant for light and dark and WCAG AAA for high contrast.
Hey @catarak and @violetcraze,
I have figured out some color combinations for this issue. They are compliant with the WCAG AA and WCAG AAA standards. I checked their WCAG compatibility using this website - https://accessible-colors.com/.
For Light Theme - text color - #fff background - #E81351
For Dark Theme -
text color - #000
background - #fff
For High Contrast - text color - #333333 background - #F5DC23
Video Sample -
https://user-images.githubusercontent.com/42844688/107479039-7e218f00-6ba0-11eb-8a21-53b085d8c291.mp4
Before creating a PR I would love to know your opinions about these color combinations.
@MohdImran001 thanks for working on this! I would suggest looking at the SCSS variables file, which lists all of the colors currently being used in all of the themes. I also think it makes sense to use one of the variations of gray that are used in the theme rather than strong colors like pink and yellow, as that's more common in the context of text highlight colors.
Thanks for working on this everyone, I was just about to file an issue about this and found this wonderful one started by @violetcraze! 💖
Wow, great work @MohdImran001! I noticed that in high contrast mode the code itself is hard to see when highlighted, would it be possible to also adjust this as well?
I'll wait to hear back before re-opening!
@shiffman I think it would be possible! Because CodeMirror behind the scenes is using elements other than <input> or <textarea>, I believe it would be a matter of configuring CodeMirror or adding the right CSS selector.
Thanks @shiffman for pointing out this problem. I will try to fix it also.