title bar focus needs to be more noticeable

[Becky Gibson]

It is very difficult to determine when the title bar gets focus. Can we do something visually? Either a different color background, a more prominent focus border, or even just bolding and changing the color of the text.

[Becky Gibson]

I assigned to dante but I am willing to handle this if one of the designers can let me know what mechanism to use to distinguish focus better.

[dante]

works in firefox, but probably not ie.

.tundra div.dijitTitlePaneTitle:focus {
        border:1px solid #666;
}

ie6 seems to have a dotted border to indicate focus. focus style is murky water, and will be very difficult to unify across widgets.

an additional "dijitFocused" class attached to the outlying node of templated widgets would help: would be able to apply styles based on class only, nor relying on pseudo-selectors that don't work in all browsers.

[bill]

Be careful about attaching dijitFocused to TitlePane?.domNode as it will trickle down to affect all the contained widgets... but sure, it's a good idea to have a class on the title bar itself. The form widgets already apply a class (there's some code in focus.js::_onFocusNode() to call setStateClass() on focus/blur)

[Becky Gibson]

I've created an additional ticket, #4442, for accordion pane title. Hopefully we can use a similar solution for both.

[dante]

fixes this and #4222

[dante]

added a patch to fix this and #4222 - not sure about the this.inherited changes. tested here, but href was breaking because of no php locally so the "cleanup" aspect of patch to TitlePane?.js may be unacceptable.

[dante]

ugh i MEANT #4442 (focus on accordion)

[dante]

(In [10904]) fixes #4285 and #4442 by adding focus tracking code to each, and underlining the focused text. fixed a11y requirements.