1401185 - <input type=number> spin buttons are barely visible in high contrast mode

Status: NEW

(Core :: Layout: Form Controls, defect, P3)

Description

[Mallipeddi Hardhik]

Attachment: highContrastBlack_InputContainer.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce:

Go here: https://jsfiddle.net/hrbL4uky/

The code inside the fiddle:
Add following line inside html section and click on run:
"<input type="number" />"

In normal mode you can see the up and down arrows visible inside the input control to increment/ decrements the values of the input.

Now switch to high contrast mode and refresh the page. The up/down arrows on the input control aren't visible.

On looking closely, it's observed that the arrows are still present but their size has become very small and almost inaccessible.


Actual results:

The arrows inside the input control aren't visible in high contrast, please refer to the attached screenshots.


Expected results:

The arrows should be still visible even in the high contrast mode.

Comment 1

[Mallipeddi Hardhik]

Attachment: highContrastWhite_InputContainer.PNG

Adding another screenshot with White High contrast setting.

Comment 2

[Mallipeddi Hardhik]

Attachment: normalMode_InputElement.PNG

Adding another attachment to show how it's showing the arrows in the normal mode.

Comment 3

[Mallipeddi Hardhik]

Can the

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Please don't bump the priority yourself without a comment. It's probably worth looking at this. We have system colors that are reactive to high-contrast settings. Would you want to try submitting a patch for this?