1106045 - <input>s within <div>s within <a>s create focus cycles

Status: UNCONFIRMED

(Firefox :: Disability Access, defect)

Description

[Harry Cutts]

What did you do?
================

I was testing a Web application for keyboard accessibility. In the application there were some HTML structures like the following:

    <a href="#">
        <div>
            The link text
            <button type="button">Button 1</button>
            <button type="button">Button 2</button>
        </div>
    </a>

(I have created a JSFiddle illustrating the problem at http://jsfiddle.net/jjxuL1tz/5/ .)

I attempted to tab through this structure to focus elements further on in the HTML.

What happened?
==============

I became stuck in a focus cycle. That is, pressing Tab when Button 2 was focussed returned focus to the parent <a> tag, so the focus went as follows:

    <a> -> Button 1 -> Button 2 -> <a> -> Button 1 -> ...

When <a> was focussed, I could press Shift+Tab to get out of the cycle and focus the previous element in the document, but I could not focus the element after the cycle without using the mouse.

What should have happened?
==========================

With Button 2 focussed, I should have been able to press Tab to focus the next element on the page.

Workaround
==========

The problem does not occur if the <button>s are replaced with <a>s; indeed, adding one <a> tag as a sibling of the <button>s fixes the problem, even if it has its `tabindex` attribute set to -1.

An example of this can be found in the JSFiddle (http://jsfiddle.net/jjxuL1tz/5/).

Comment 1

[Harry Cutts]

I should also mention that the issue still occurs on a clean Firefox profile.

Comment 2

[Rodney Rehm]

I can confirm the behavior on Mac OS X 10.8.5 with Firefox Nightly 37.0a1 (2015-01-04).

Note that both, <button> [1] and <a> [2] elements are not allowed to contain any form of interactive content. Both elements fall into that category making your example invalid HTML. The described workaround would nest two <a> elements, thus also being invalid HTML.

[1] http://www.w3.org/TR/html5/forms.html#the-button-element
[2] http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

Comment 3

[Marco Zehe (:MarcoZ)]

So is this an invalid bug, then, and should we close it accordingly?