search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.34k stars 1.29k forks source link

Highlighting Text with a Mouse Drag Cause Text to Become Unreadable in High Contrast Mode #1742

Open duskvirkus opened 3 years ago

duskvirkus commented 3 years ago

Nature of issue?

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.

  1. Login to web editor and set to high contrast theme.
  2. Go to file > open > collections > create collection
  3. 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

duskvirkus commented 3 years ago

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

catarak commented 3 years ago

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?

duskvirkus commented 3 years ago

@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.

catarak commented 3 years ago

@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.

MohdImran001 commented 3 years ago

Hey @catarak and @violetcraze, I would like to work on it.

duskvirkus commented 3 years ago

@MohdImran001 I don't mind if you work on this.

MohdImran001 commented 3 years ago

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.

catarak commented 3 years ago

@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.

shiffman commented 3 years ago

Thanks for working on this everyone, I was just about to file an issue about this and found this wonderful one started by @violetcraze! 💖

shiffman commented 3 years ago

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?

Screen Shot 2021-03-03 at 10 34 56 AM

I'll wait to hear back before re-opening!

catarak commented 3 years ago

@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.

MohdImran001 commented 3 years ago

Thanks @shiffman for pointing out this problem. I will try to fix it also.