CODEWITHSUNDEEP
javascripthtmlfocus
Frank Schwieterman
Frank Schwieterman

Reputation: 24478

how could a <ul> element receive the focus event?

I'm running the following code to trace the tagName of every control that gets focus in an HTML document:

$(function() {
    $("*").bind("focus", function() {
        console.log("tabbed " + this.tagName);
    });
});

When this runs I can watch the firebug console and see it trace tags like "A" and "INPUT" which I'd expect to receive focus as I tab through the document. However it also traces one "UL" tag. The document has multiple UL tags and only this one UL tag seems to get focus.

Any ideas how this could have happened? The UL Tag that has focus has no attribute (name, id, etc) so I have no idea how it would have been modified by other script.

(running in firefox. The page I'm looking at is quite large so I'm not including the source, but the UL tag has no attributes, contains some LIs, one of those LIs does contain a tag).

According to Which HTML elements can receive focus?, maybe its because some script has set a tabindex on that UL tag. I can't find any such script though.

Note that I am not trying to figure out how to make the UL focusable, but rather figure out why it is focusable.

Upvotes: 7

Views: 19773

Answers (3)

Jin-oh Kang
Jin-oh Kang

Reputation: 347

From WHATWG HTML Living Standard § 6.5.2. User interaction – Focus – Data model as of 16 January 2020:

The term focusable area is used to refer to regions of the interface that can become the target of keyboard input. Focusable areas can be elements, parts of elements, or other regions managed by the user agent.

Each focusable area has a DOM anchor, which is a Node object that represents the position of the focusable area in the DOM. (When the focusable area is itself a Node, it is its own DOM anchor.) The DOM anchor is used in some APIs as a substitute for the focusable area when there is no other DOM object to represent the focusable area.

The following table describes what objects can be focusable areas. The cells in the left column describe objects that can be focusable areas; the cells in the right column describe the DOM anchors for those elements. (The cells that span both columns are non-normative examples.)

Specifically, among the obvious cases like explicitly focusable elements, <area> and user agent widgets and defaults, the 4th row of the following table is of particular interest:

  • Focusable area

    The scrollable regions of elements that are being rendered and are not expressly inert.

  • DOM anchor

    The element for which the box that the scrollable region scrolls was created.

  • Examples

    The CSS 'overflow' property's 'scroll' value typically creates a scrollable region.

Other than a user agent specific behavior, the most plausible explanation is that the <ul> element was actually being used as a scrolling container of list items, the items overflowed creating a scrollable area, and the user agent (web browser) made provisions so that the scrolling function of the container is accessible in accordance to the HTML standard.

Note that specifying tabindex="-1" would suppress it from appearing in the tab navigation order; it would, however, still remain focusable.

Upvotes: 0

Juraj Blahunka
Juraj Blahunka

Reputation: 18543

Handling focus totally depends on browser implementation.

Hovewer you can force focus on html elements by adding tabindex property eg.:

<ul tabindex="1">
    <li>item</li>
    <li>item</li>
</ul>

<ul tabindex="2">
    <li>item</li>
    <li>item</li>
</ul>

This "hack" should force UL elements to be focusable (worked for me)

Upvotes: 13

Januz
Januz

Reputation: 527

If one of the LIs inside the UL contains an A tag, then the focus event (from the A) might be propagating to the UL.

Upvotes: 0

Related Questions