Case study: label and focus()

This is a run-through of one developer's approach to Test the Web Forward. It will show you ways you can be involved, some of the challenges you may face, and the reward at the end.

Scenario

While exploring case study: label and contenteditable I wound up with another issue. My tests involved the use of focus() and click() to test whether a label that was contenteditable kept focus or passed it to the associated form control.

All of the tests failed in Firefox. Why?

View the tests: codepen: label@contenteditable tests

Narrowing down the issue

I did some testing to isolate what was failing. I tried a couple of things in a test page using the developer console. I compared label elements with div (a pretty generic element). I kept contenteditable="true" on both in case that related to them being able to receive focus. I event started to experiment with tabindex="-1" (to allow them to get focus) but decided that was introducing more variables rather than narrowing it down. I'm happy with the simple test case I ended up with:

See the Pen focus() and activeElement tests by Ben Boyle (@bboyle) on CodePen.

In Firefox, document.activeElement is set to the div after calling focus(), but this does not work on the label. Note that manually clicking on the element with the mouse does set document.activeElement. So, this test is specifically about calling focus() in JavaScript, on a label that is contenteditable. Now I know what to research in the specifications!

Check the spec

focus()

I started with document.activeElement and read the MDN page Document.activeElement. Please note that MDN itself is not an official specification—but can be a good place to learn from. A link to formal specifications is always included at the end of the content and links to the definition of 'activeElement' in the HTML Living Standard. Even better, scrolling up a bit reveals this to be part of 6.4.6 Focus management APIs—that sounds promising!

The key parts I read—and my understanding of them—are

document.activeElement

This property should reference the element that has focus, at all times.

element.focus()

Used to set focus on any element.

focusable-area

There are notes specific to some elements, but nothing about label that I can tell. The final entry in the table is about "any other element" and that seems to apply to my test case.

focusing steps, focus update steps

Whew, there is a lot of detail here! Some of it is familiar, such as the focus event we can use in our scripts. The part about a defined activation behaviour was interesting, but related to the input element, not label.

I haven't seen anything that contradicts my expectations yet. I also need to check if there is any behaviour defined for label or contenteditable which relates to focus.

label

Nothing specific in here about what focus on the label element should do relating to this test scenario. The part about labels passing the activation behaviour on to descendent elements (e.g. a nested checkbox) is interesting—but in this test I have a single label with text content only.

Learnings

label.control

Seriously!? How long as this shortcut property to find the control associated with the label existed? I could be using that…

control.labels

And the inverse! (List of all labels that reference a control.)

contenteditable

Hmm, there really isn't much to glean from the specs here. I ended up searching Content Editable Events for "focus". It's mentioned once and not relevant to the issue being tested here.

Time to check in with the Test the Web Forward team!