Skip to content
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

Custom text selection color causes text selection not to be visible in FireFox when in High-Contrast mode #173

Closed
robgeorge9 opened this issue Nov 13, 2018 · 13 comments · Fixed by #187
Assignees
Labels

Comments

@robgeorge9
Copy link

robgeorge9 commented Nov 13, 2018

When text is selected by the user, a background highlight is shown to indicate the range of text that is selected. For users of the FireFox browser on Windows machines running High-Contrast mode the text selection highlight is invisible when custom colors are used. For accessibility purposes, it is best practice to not overwrite text selection colors.

Please consider removing the following.
::-moz-selection
{ background-color:#b3d4fc; color:#000; text-shadow:none }

::selection
{ background-color:#b3d4fc; color:#000; text-shadow:none }

@jonathantneal
Copy link
Collaborator

Certainly, I’ll either need to test this to be certain or get a citation from you. Could you do that? This rule was added to improve accessibility, because text selections with text shadows are much harder to read.

@robgeorge9
Copy link
Author

The problem with overwriting the selection colors comes when you are using Windows High Contrast mode without IE. IE will not allow the overwrite to work, as WHC mode overwrites the styles inline. The problem comes with non-native browsers as it is not able to enact on the overwriting of styles and thus can render out incorrectly.

@jonathantneal
Copy link
Collaborator

@robgeorge9, does Firefox support a high contrast mode media query? I could make this change wrapped in that media query.

@robgeorge9
Copy link
Author

Since FF is not a native browser to the OS, Windows High Contrast mode is not supported to the full extent. Unfortunately, this is a limitation of the system built into the OS. Both FF and IE are both preferred browsers for PCs, so it's a bit unfortunate that it was overlooked in development, as they did create a media query for IE using WHC, just not FF.

@jonathantneal
Copy link
Collaborator

Would you be able to provide some screenshots? If so, I think we can make this change, despite the slight downgrade it means for other, aforementioned scenarios.

@jonathantneal
Copy link
Collaborator

I will be on vacation for a few weeks, but if you’re able to provide some screenshots, I’m still open to resolving this issue with you.

@robgeorge9
Copy link
Author

Yes sorry, I'll be back in the office on Friday. I will send through screenshots then.

@robgeorge9
Copy link
Author

Jonathan,

Here are the screenshots you requested. I've supplied both how IE and Firefox treats text selection on our website along with Yahoo.

Firefox
firefox_bbby_text_selection
firefox_yahoo_text_selection

IE
ie_bbby_text_selection
ie_yahoo_text_selection

Let me know if you need anything else.

@jonathantneal
Copy link
Collaborator

Thank you for the feedback, and I apologize for the late response. Yes, I will remove this in the next major release.

@tigt
Copy link

tigt commented May 30, 2019

Thank you for making this change to restore the correct selection colors to HCM users.

I’m curious, does:

::-moz-selection {
  text-shadow: none;
}

::selection {
  text-shadow: none;
}

…have the same problem? Disabling text-shadow was a pretty good usability move, in my opinion.

@jonathantneal
Copy link
Collaborator

@tigt, good point, and thanks for bringing it up because I hadn’t considered that. @robgeorge9, any concerns with disabling text-shadow, which was originally done in the service of usability?

@tigt
Copy link

tigt commented May 31, 2019

I can’t test HCM in Firefox due to my company’s draconian installation policy, but I can confirm that by default IE ignores text-shadow altogether in High-Contrast Mode, so barring weird side-effects, it should be safe to remove for everyone inside a selection.

@robgeorge9
Copy link
Author

@jonathantneal @tigt - No issues with the text-shadow. Feel free to add that back.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants