1490335 - Form controls don't receive visible focus when receive focused state through an ID ref

Status: RESOLVED DUPLICATE of bug 1484185

(Core :: DOM: Core & HTML, defect)

Description

[Rob Pataki]

Attachment: Firefox - Form control focus issue is not visible

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce:

Visit these links:
- https://mdn.mozillademos.org/en-US/docs/Learn/HTML/Forms/Form_validation$samples/Constraining_the_length_of_your_entries?revision=1410514#number
- https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input/checkbox$samples/Value?revision=1411044#subscribeNews
- https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input/radio$samples/Defining_a_radio_group?revision=1392198#contactChoice3

The same issue happens when an anchor link on the same HTML page points to the form control


Actual results:

The form control (input; radio or checkbox) matching the ID receives focus, but the focus is not shown visually (outline is not visible).


Expected results:

The form control (input; radio or checkbox) matching the ID receives focus, and the focus is visually visible (outline is shown). If custom ':focus' styling is applied to the element it should be also visible.

Comment 1

[Stefan [:StefanG_QA]]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0 (20180913100107)

I have tested this report on Windows 10 and OS X 10.12 using the latest Nightly and, Fx release builds. I was able to reproduce the mentioned behavior using the provided test pages. When loading the page in Nightly or Fx 62.0 I don't see the initial focus to be on any element. Contrary to Chrome where on the first load the focus is displayed.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

I don't think we give focus to elements targeted with idrefs. That's what autofocus is for isn't it?

I don't see what in https://html.spec.whatwg.org/#target-element should make the target element also focused.

Comment 3

[Rob Pataki]

autofocus is used for setting the focus on a particular element when the page loads, so it would not work in our case, because the element which receives the focus depends on the ID referenced by the #fragment.

You are right in saying that the specification (https://html.spec.whatwg.org/#target-element) does not mention setting the focus on elements that are returned using the #fragment, but browsers (including Firefox) do set the focus on the element that is found using the #fragment.

When the element is a form control, the user can interact with that element straight away, because the focus gets set on that element. The problem is not with setting the focus on the element or not - as it already works - but rather lack of visual indication of the focus styling on the focussed element.

Firefox sets the focus on the ID referenced element without an issue. What we're having issue with is Firefox not displaying the focus styling around the element, which received the focus - hopefully the attached screenshots above help.

Comment 5

[Boris Zbarsky [:bzbarsky]]

When the element is a form control, the user can interact with that element straight away

For what it's worth, I'm not seeing that behavior on any of the links in comment 0. For example, if I load https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input/checkbox$samples/Value?revision=1411044#subscribeNews I can't use spacebar to toggle the checkbox, as I could if it were actually focused. This is in a Firefox nightly on Mac.

Am I just missing something?

Code inspection agrees: we do not in fact focus the target of the idref at all. We do move the current caret (so tab navigation in particular) position to that element, but we explicitly focus the document itself, not the element. See https://searchfox.org/mozilla-central/rev/f8b11433159cbc9cc80500b3e579d767473fa539/layout/base/PresShell.cpp#3134-3145

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Comment 5 agrees with what I was seeing in comment 2. I don't think we set the focus there.

Comment 7

[Rob Pataki]

Apologies for the confusion guys, it must have been wishful thinking. Currently the focus does not seem to be set, but I agree with the concern raised on bug 1484185 - for accessibility reasons I would expect visible focus to be set on the form control.

Comment 8

[Anne (:annevk)]

1. Per https://html.spec.whatwg.org/#scroll-to-the-fragment-identifier there is a requirement to focus the target when scrolling to a particular fragment.
2. When I try data:text/html,<input id=x>#x this works in Chrome and Safari (though Safari has a bug in including #x as part of the contents too).
3. I believe it's macOS platform convention to not be able to focus checkboxes and radio buttons. So even if we fix this, those might not work.

(Aside: please don't use "guys" as a catch-all.)