accordion pane: focus on accordion tab should be more visible

[Becky Gibson]

The background color of the accordion title bar changes when an accordion is open but it is hard to see when the focus is on that title. We might consider changing the color like what is done for mouse over or applying a more visible border on focus.

Using dijit/tests/layout/test_AccordionContainer.html tab to the first example (with a b c as title). With focus on a, press the down arrow to put focus on b - there is a border at that bottom of the title but it is hard to see. Now press tab to move focus into the pane associated with b. Press shift tab to get focus back to the b title bar. Notice how hard it is to determine where focus is. It is a bit too subtle.

Tested with tundra and FF3 and IE7 on Windows. Focus is a little more visible in IE but still not great.

[Joseph Scheuhammer]

Attaching "7775.patch" that implements the background colour option, using the same colour scheme as for mouse over. Note that I'm not a CSS wizard, and there may be (probably is) a better approach (e.g. the "outline" selector).

I had a discussion with becky, and she suggested that sfoster is someone who could own this ticket -- adding to the cc list.

[Becky Gibson]

use underline and solid top and bottom border to indicate focus

[Becky Gibson]

I've provided another patch that underlines the accordionTitle to indicate focus. It also changes the top and bottom border to solid black. We really don't need both - one of the other would do. My preference is to just underline the title but I'd like feedback from others before committing since this affects look and feel. The other issue is I can't get this to work in Safari - which isn't critical since we don't support keyboard use there but it does make the appearance different since clicking on a title in other browsers will underline the title and in safari it will not. Any help there would also be appreciated.

[bill]

See also #8195, I'm waiting for the Ux group to give a general strategy about focus indication.

[Becky Gibson]

moving to 1.4 to work on consistent focus across widgets rather than changing focus in this widget more than once.

[Becky Gibson]

Since there has been no change to this in over a year, I would at least like to check in a fix to put an underline under the title of the focused widget for 1.4. I'll skip the borders top and bottom since that changes the look and feel more dramatically. But, this is really hard to use via the keyboard when you can't see the focus. As an example, in the current test_accordionContainter.html page on the first example, the container for the "A Simple Pane" drop down can receive focus. If you put focus on the select box in that pane, then press shift tab, focus goes to the container. You think focus would be on the title bar and it is not so when you press the down arrow the pane scrolls rather than focus moving to the next accordion title. I thought keyboard was broken for the accordion pane because I couldn't tell that focus was not on the title bar.

[Becky Gibson]

fixed via [20507]

[Becky Gibson]

[20508] remove partial, ugly focus border around title bar in Firefox and Safari

[bill]

(In [20562]) Shaving a few bytes, refs #7775.