Browser (Chrome) CSS outline not disabled on purpose?

[Blama]

Hi Isomorphic,

I noticed the annoying CSS Outlines, Chrome puts around the focused element by default.

If you look at this online showcase example in FF 26 in Simplicity-skin and click in the "From: N months ago"-input, you will notice that you already "outlined" the selected element via this CSS code:

Simplicity skin_styles.css excerpt:

.textItemFocused,
.selectItemTextFocused {
    color:black;
    -moz-outline-offset:-1;
    border-top:1px solid #5678ac;
    border-left:1px solid #bccde6;
    border-right:1px solid #afc6e2;
    border-bottom:1px solid #c0d7ec;
}

When you look at it in Chrome 35, you additionally see Chrome's thick outline (from the default browser style sheet?).

Shouldn't this outline be disabled in all skins with respect to your CSS already in place and your pixel-perfect layout approach?
Or is there a reason for having the outline enabled? If I "tab-through" the showcase example, I can see a very very thin dotted outline in Firefox as well, but this is less disruptive and not interfering with your skin as this is the case for Chrome.

Best regards,
Blama

[Isomorphic]

It's intentional that we do not disable it by default. We don't want to default to suppressing the default focus indicator, which is platform-specific, and is what is familiar to users already - doing so is arguably an accessibility issue.

However you can use standard CSS to disable the native focus indicator, either system-wide or just for specific scenarios where it's redundant, like you describe.

[Blama]

Hi Isomorphic,

Ok, understood it.

Thanks for the answer,
Blama