Dijit.form.Button, DijitDialog and Firefox 10: No focus outline visible for button if button is the first focusable element of a dialog

[Paul Christopher]

Description

If a dijit.Form.Button is the first focusable element of a dijit dialog, no focus outline is visible for this button in Firefox 10. It works like a charm in IE9, Safari 5.1.2 on Win7.

Steps to reproduce the issue

Run the attached test case testFocusOutline.html. A dijit dialog contains two buttons. The first button gets focus by default (since it is the first focusable element of the dialog). However in Firefox10, no focus outline will be visible. Now use the tab key. The next button gains focus. The focus outline for this button gets displayed correctly.

Affected versions

Firefox 10 (Win7), Dojo 1.7.1

[bill]

I wonder if FF doesn't start to show the focus outline until the user starts tabbing. (Since mouse users don't like to see the focus outline.)

[bill]

Yah, it's like I said above, that FF doesn't start to show focus until the user starts tabbing. (This is FF windows. On FF mac it's shown right away.)

I'll attach a modified version of your test case to show that's true. Press tab to focus the "show" button and then click it (or hit enter), and the focus on the dialog's first button will be shown.

[bill]

press tab to focus "show" button and then click it; focus on the dialog's button is then shown

[Paul Christopher]

Yes, you are perfectly right Bill! I didn't know, that Firefox hides the focus outline until the user tabs.

Thank you very much for looking at that! I do care about usability and accessibility a lot.

And at least I could learn this now: Sometimes it is good to reduce things in test cases, sometimes not: At least I should have given a focusable element to the body so as to be more realistic. Still learning... ;-)

[bill]

No worries. We spend a lot of time on accessibility so it's good to see someone else interested in it.