1430196 - input type file and not working focus via TAB key in CSS

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Nadia]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20171226003912

Steps to reproduce:

https://codepen.io/anon/pen/VydPdO


Actual results:

After use of tab key, the input looks like focused but the input:focus probably doesn't work


Expected results:

During use TAB key, the label should be red.

Comment 1

[Nadia]

Environmen

Comment 2

[Nadia]

Environment: Windows 8.1, Firefox 52.5.3 ESR 32-bit.

Comment 3

[Carmen Fat [:cfat] - Ecosystem QA]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0	
	
I managed to reproduce this issue using the provided steps from the Description, on latest Nightly 59.0a1 (2018-01-16) and Release 57.0.4 with Windows 10 x64, Ubuntu 14.04 x64 and macOS 10.12.

Pressing the "Tab" key highlights the "Browse" button, but the text from the right side that indicates the focus state remains the same (it should change accordingly to the focus state and become red).

I don't think this is a regression since it's also reproducible on an older Nightly build 29.0a1 (2014-01-20).

Comment 4

[Andreas Farre [:farre]]

On second though, moving to layout/forms.

Question: is this due to the fact that nsFileControlFrame::SetFocus hasn't got an implementation? Compare to nsTextControlFrame.

Comment 5

[Ryan VanderMeulen [:RyanVM]]

Out of scope for ESR consideration. I'd consider a patch for Fx59 backport if one materialized, though.

Comment 6

[Aleksander Machniak]

Is there a workaround? Bootstrap's custom file inputs inherit this problem and :focus-within is not really a solution. A fix would be really appreciated. https://github.com/twbs/bootstrap/issues/26563

Comment 7

[David Wickes]

(In reply to Aleksander Machniak from comment #6)
> Is there a workaround? Bootstrap's custom file inputs inherit this problem
> and :focus-within is not really a solution. A fix would be really
> appreciated. https://github.com/twbs/bootstrap/issues/26563

Only workaround I've managed to get is to wrap the file input in a div and then `div:inner-focus` to detect whether the file input has been detected. Bit shonkey though.

Makes it harder to implement simple accessibility, so I'd also really appreciate a fix!