Open Bug 1486986 Opened 2 years ago Updated 2 years ago

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

Categories

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

defect

Tracking

()

Tracking Status
firefox61 --- affected
firefox62 --- affected
firefox63 --- affected

People

(Reporter: gunnar, Unassigned)

Details

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
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()
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.
Component: Untriaged → CSS Parsing and Computation
OS: Unspecified → All
Product: Firefox → Core
Hardware: Unspecified → All
Version: 61 Branch → Trunk
Status: UNCONFIRMED → NEW
Ever confirmed: true
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.
Component: CSS Parsing and Computation → Layout: Form Controls
Flags: needinfo?(bugs)
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
Flags: needinfo?(bugs)
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.