1486986 - no styling of labels of <input type="file"> elements

Status: NEW

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

Description

[[e-mail]]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180807170231

Steps to reproduce:

File input with associated label:

<input type="file" id="file"/>
<label for="file">label for file input</label>

In the stylesheet:

input:focus + label
{
	outline: thin dotted;
	background: yellow;
}

See https://codepen.io/gunnarbittersmann/pen/oPLWoL


Actual results:

On keyboard navigation, the label is not highlighted – neither outline nor background-color (contrary to labels of other input types, see Codepen)


Expected results:

Styles for input:focus + label must also work with <input type="file">, as they do in other browsers, and as they do with other input types.

This is especially important when the input element is visually hidden, as described in https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Using_a_label_element_to_trigger_a_hidden_file_input_element, otherwise it is not keyboard-accessible, cf. https://codepen.io/gunnarbittersmann/pen/RYaeex

Comment 1

[raoul.schaffranek]

Based on Gunnars pen, here is a minmal test-case that could serve as a basis for a regression-test or workaround: https://codepen.io/1UnitedPower/pen/QVGOqz

HTML:

<input type="file" id="firefox-bug-1486986">
<label for="firefox-bug-1486986">This label should be styled when the file-input recieves focus</label>

CSS:

input[type='file']:focus + label {
  --firefox-bug-1486986:absent;
}

JS:

function detectFirefoxBug1486986 () {
  const file = document.querySelector('input')
  const label = document.querySelector('label')
  file.focus()
  const labelStyle = getComputedStyle(label)
  const bug = labelStyle.getPropertyValue('--firefox-bug-1486986')
  const assertion = bug === 'absent'
  console.assert(assertion, "Label is not styled propertly.")
}
detectFirefoxBug1486986()

Comment 2

[ovidiu boca[:Ovidiu]]

I tested this issue on Mac OS X 10.12 and Windows 10 x64 with FF Nightly 63, Beta 62 and Release 61 and I can confirm the issue, on keyboard navigation, the label is not highlighted.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Fwiw, this is a bug, but it's a pretty hard bug to fix given our current implementation of file inputs... The reason for that is that the element being focused is an anonymous button inside the controls, and there can only be one focused node.

We could teach the focus code of file inputs specially, but that feels a bit like a hack.

Olli, do you have any bright ideas about this one? I may want to look at what other browsers do for this otherwise, since Blink / WebKit use Shadow DOM for inputs at least, which should have the same issue.

(In reply to raoul.schaffranek from comment #1)
> Based on Gunnars pen, here is a minmal test-case that could serve as a basis
> for a regression-test or workaround:

Best work-around is just using `:focus-within`, fwiw, which should work everywhere and not need js or anything.

Comment 4

[Olli Pettay [:smaug][[e-mail]]]

Hmm, this does work with <input type=number> which has internally another input element focused. Why does that work?
I guess
https://searchfox.org/mozilla-central/rev/721842eed881c7fcdccb9ec0fe79e4e6d4e46604/dom/html/HTMLInputElement.cpp#6437-6469