Page MenuHomePhabricator

Text typed into search box not visible when using white text on black.
Closed, ResolvedPublic

Description

Author: mossiegeek

Description:
An accessibility issue has just appeared in the main search box of Wikipedia MediaWika version ?). The search box now fails W3C WAI Guidelne F24: http://www.w3.org/TR/WCAG-TECHS/F24.html

I'm using a windows 7 desktop with Firefox. I have changed my windows colours to display white text on a black background.

The search box now sets characters typed to black. It does not set the background colour. Therefore the background defaults to the OS colour and I end up with black text on a black background ie. it's invisible. This is very new. The search box has been fine up until today(ish).

Note that either:
a) Both foreground (text) and background colour should be set.
OR
b) Both foreground (text) and background colour should not be set.

Setting one but not the other results in problems for people who are not using default colour settings eg. the visually impaired.

Do not test with Chrome. Chrome fixes this problem on the fly for most web pages. Text with Firefox or IE (I do not have Safari).

To see which colours have/have not been set. Go to the Windows appearance settings and change text to lime green and background to red. Now look at the Wikipedia site. Text typed is black (not lime green) and the background is red.

For the search box to behave as previously then the text colour should not be set and so be aloud to default to the OS colour setting along with the background.


Version: master
Severity: normal

Details

Reference
bz62668

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 2:52 AM
bzimport set Reference to bz62668.
bzimport added a subscriber: Unknown Object (MLST).

Required CSS changes would be trivial but no idea about potential side effects and why decisions like "background-color: transparent" were made here, hence moving to "Skin and page rendering" - maybe somebody knows.

With regard to the search box itself:
div#simpleSearch input {

background-color: transparent;
color: #000;

}

With regard to the proposed results:
.suggestions-result {

color: #000;

}
which does not have an explicit "background-color" at all...

The input box and everything else related to search *does* have box text color and background color set (although background in some cases is transparent, in order to display the background of page elements "below"). Can you provide a screenshot where this doesn't work?

mossiegeek wrote:

I've just retested prior to taking a screen shot and I no longer get the problem.

I suggest this report is closed. If the problem recurrs I'll try to re-open it.

Thanks.