1496436 - Arrows from number inputs are missing while High Contrast is applied

Status: RESOLVED DUPLICATE of bug 1401185

(Core :: Layout: Form Controls, defect)

Description

[Catalin Sasca, Desktop Test Engineering [:csasca]]

Attachment: Arrows.gif

[Affected versions]:
- Firefox Beta 63.0b11
- Firefox Nightly 64.0a1 (2018-10-04)

[Affected platforms]:
- Windows 10 (x64)

[Steps to reproduce]:
Precondition: High Contrast mode is enabled from Windows settings.

1.Open Firefox
2.Navigate to about:config
3.Set the following value to true: devtools.chrome.enabled
4.Navigate to https://djr.com/merit-badge/
5.Open "Developer Toolbar" using CTRL+SHIFT+I combination.
6.Navigate to the "Fonts" sub-section in the right window of the inspector.
7.Scroll to "Sans serif forms" and "Weight" in the Fonts sub-section.
8.Observe the up and down arrows from the value boxes.

[Expected result]:
- The arrows are still there after High Contrast mode is activated.

[Actual result]:
- The arrows from the value boxes are changed to a horizontal bar.

[Regression range]:
- This is not a regression, as it is reproducing on Nightly builds from when the feature was merged.

[Additional notes]:
- The horizontal bar is much more visible when the dark theme is applied from Developer Toolbar settings.
- The actual behavior can be seen in the attachment.

Comment 1

[Razvan Caliman [:rcaliman]]

Thanks for filing!

This accessibility issue for Windows 10 seems to be Firefox-wide, not isolated to the number inputs used in the DevTools Font Editor. The buttons to increment/decrement the value while in High Contrast mode are broken on this sample page too:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Assigning this bug to the relevant product and component for triage.