Tabbing sequence resetting via mouse clicks

[EricDunsworth]

Issue description:
Tabbing sequence seems to reset itself during mouse click events.

Test page:
http://jsbin.com/onibuc/387

Steps to reproduce:
Tab over to link 1 and move the mouse cursor to the open area between link 1 and link 2. Click once, then press the Tab key again.

Expected outcome:
Link 2 should gain focus.

Actual outcome:
Link 1 gains focus.

Platforms/browsers (including version) and devices tested:

• Platform: Windows 7 Ultimate 64-bit
• Browser: Firefox 19.0.2
• Device: Desktop PC

jQuery Mobile and jQuery core version used:

• jQuery core: 1.9.0
• jQuery Mobile: master (latest)

Other relevant information:
wet-boew/wet-boew#1432

[jaspermdegroot]

@EricDunsworth - This is because we add tabindex="0" to the page.

@scottjehl - Do you remember why we set this? (ebafc02)

[scottjehl]

I'm not sure I understand the relationship to jQM here fully. I'm probably missing something, but this behavior seems to be consistent with a regular page without jQM in it, correct?

http://jsbin.com/avofur/1

[Wilto]

+1; this seems like the normal browser behavior. The same sequence performed on this GitHub page produced the same result.

[scottjehl]

As for tabindex=0 on the page element, I believe we did that so we could send focus to one of many pages that could be in the DOM at a time. For accessibility purposes.

Not sure it's related here, though...

[zachleat]

Are you using Caret Navigation?
http://kb.mozillazine.org/Accessibility.browsewithcaret

[jaspermdegroot]

@scottjehl @scottjehl

I also tested without JQM and noticed it is the default browser behaviour on Chrome, but on Firefox it isn't.

[jaspermdegroot]

@EricDunsworth

Like @scottjehl mentioned we need this because of the multi-page model. I don't think it really causes big usability/accessibility issues, it is even default behaviour on some browsers. Closing this ticket as won't fix.

[pjackson28]

The problem is applying tabindex="0" to the divs in question at all times is actually disrupting accessibility and usability for mouse and keyboard users as any time they click something other than focusable element then focus is shifted to the div in question (also is an annoying hidden focus for keyboard users). Some of our mouse and keyboard users have found it disruptive so we have to take the tabindex off right after you apply it (less than ideal solution). Leaving tabindex="0" on all the time may be fine when a mouse and keyboard is not used but we are using jQuery Mobile for responsive design so mouse and keyboard users will face a jQuery Mobile enhanced page as well (which in most cases is a good thing).

I read through your code and it looks like you are using it as a fallback mechanism where you can't find another focusable element (lines 3936 to 3951).

    //direct focus to the page title, or otherwise first focusable element
    $.mobile.focusPage = function ( page ) {
        var autofocus = page.find( "[autofocus]" ),
            pageTitle = page.find( ".ui-title:eq(0)" );

        if ( autofocus.length ) {
            autofocus.focus();
            return;
        }

        if ( pageTitle.length ) {
            pageTitle.focus();
        } else{
            page.focus();
        }
    };

What I recommend instead is if you get to the last else, apply the tabindex="0" right before page.focus(). It should also be removed after so perhaps do something like the following:

        } else{
            page.attr("tabindex", "0");
            page.focus();
            page.one('focusout', function() {
                $(this).removeAttr('tabindex');
            }
        }
    };

That way you can have the tabindex="0" when you need it but it won't be disrupting mouse and keyboard users like it is now.

[pjackson28]

Can this issue please be reopened? This mouse + keyboard behaviour triggered by jQuery Mobile is inconsistent with the default browser behaviour in Firefox and IE and is quite disruptive to our mouse + keyboard users. It may be consistent with the behaviour of Webkit browsers (Chrome and Safari) but jQuery Mobile should not be forcing the default behaviour of Webkit browsers on non-Webkit browsers as it would be very different from what they are used to especially since Webkit browsers provide inferior keyboard support (e.g., activating a same page link in Webkit with the keyboard will scroll the page to the target but does not shift the keyboard focus like other browsers do which is bad for keyboard users). We now have to remove the tabindex="0" you apply which can impact sub-page navigation. We shouldn't have to make a choice between mouse + keyboard users on Firefox and IE versus sub-page navigation.

Here are examples of the issue for Firefox and IE users:

1. Click the mouse at a random point on a page then hit tab.

• Page without jQuery Mobile (e.g., http://en.wikipedia.org/wiki/JQuery_Mobile): Focus shifts to the nearest focusable element (e.g., link) which could be in the middle of the tabbing order.
• Page with jQuery Mobile (e.g., http://view.jquerymobile.com/1.3.0/): Focus shifts to the div with tabindex="0" then the next item in the tabbing order which is always at the start of the tabbing order.

Without jQuery Mobile it is easy to assign keyboard focus midway down the page with the mouse and then continue from that point using tabbing (fairly common use case). This is not possible with jQuery Mobile as it constantly places focus at the beginning of the tabbing order on every mouse click (except on focusable elements).

2. Tab several times into the page, click right next to the element in focus, then hit tab (e.g., exiting a form field with a mouse click).

• Page without jQuery Mobile (e.g., http://en.wikipedia.org/wiki/JQuery_Mobile): Focus shifts to the next focusable element relative to the element that was previously in focus.
• Page with jQuery Mobile (e.g., http://view.jquerymobile.com/1.3.0/): Focus shifts to the div with tabindex="0" then the next item in the tabbing order which is always at the start of the tabbing order.

Without jQuery Mobile you can click away from the element in focus and continue from that point in the tabbing order. That is not possible with jQuery Mobile as it constantly places focus at the beginning of the tabbing order on every mouse click (except on focusable elements).

Recommend that you implement the approach I suggested in my previous post where tabindex="0" is only applied where required. That way you have a solid fallback for sub-page navigation but also don't disrupt the normal mouse + keyboard behaviour for Firefox and IE users.

[jaspermdegroot]

@pjackson28

Thanks for the additional info and suggesting a different approach. We will look into it. Re-opening the ticket.

[apsdehal]

@jaspermdegroot Was there any progress on this?