How to show focused section header?

[martintaal]

Hi,
Thanks for adding the canTabToHeader for Sectionitems, that's great. However, our next challenge is to show that the section header has the focus. We use the ImgSectionHeader as the SectionHeader class. This one extends HLayout which is not a StateFullCanvas.

I also tried changing to the default SectionHeader class and setting the canvasProperties of the section item with showFocused: true. But this did neither change the visualization.

is there a way to get focused to show for the ImgSectionHeader or the SectionHeader?

gr. Martin

[Isomorphic]

A quick test shows this working as expected in all browsers but Chrome with the default SectionHeader, without overriding anything except canTabToHeader.

Can you confirm which browsers you see this in?

[martintaal]

Hi,
I was indeed testing in chrome (11 on Ubuntu 11.04), in FF I see the focus border. Do you have a solution for chrome somehow?

And for FF, how can we change the styling when focused? Do you have a solution for the ImgSectionHeader or the SectionHeader?

gr. Martin

[Isomorphic]

For Chrome: no, not really. It's a massive accessibility violation that they do not show focus borders and we expect it will be fixed reasonably soon.

Firefox: there are CSS styles that Firefox supports for changing the color of the focus border. But why would you do this?

[martintaal]

Hi,
Sorry I was not clear, I am not that interested in the browsers focus display. I want the section header to be statefull in that it can show/use a different style when it is focused (just like buttons etc).

How can I accomplish this?

gr. Martin

[Isomorphic]

Ah. Because the headers are a subclass of StatefulCanvas, they support showFocused:true to turn on a different appearance when focused. You can do this in the skin file (load_skin.js).