[whatwg] Outline style to use for drawSystemFocusRing

[Ian Hickson]

On Wed, 24 Jul 2013, Dominic Mazzoni wrote:
> On Wed, Jul 24, 2013 at 4:14 PM, Ian Hickson <ian at hixie.ch> wrote:
> > 
> > The idea is it's supposed to be the system style (hence the name of 
> > the method, draw _system_ focus ring), and that if the authors wants a 
> > special style, they use drawCustomFocusRing() and if it returns true 
> > they draw it themselves (using strokeStyle and stroke(), or whatever).
> 
> Every html element already gets a system focus ring by default if you 
> add tabindex=0 and focus it - however, you can use CSS to change just 
> one property - like just the color, or just the outline width - while 
> inheriting everything else from the system style (border radius, line 
> style, etc). Why not allow for the same flexibility in canvas?

Well we can't use the CSS styles, because you might not have an element 
(e.g. if you're drawing in a worker). So we'd need a way to express all 
the system focus ring styles of all operating systems, just to allow 
individual parts to be overridden. I don't know how workable that is. It 
seems like a potentially large surface area for a minor feature. How often 
would an author want to use an almost-system-like focus ring on canvas?

Also, while what you describe is true for Chrome, it doesn't appear to be 
uniformly true. For example, in Firefox, the focus outline of an <input> 
doesn't seem to have any relation to its CSS 'outline', since you can have 
both at once. Also, the default focus outline on a <div tabindex=0> in 
Firefox doesn't seem to have any relation to the system focus ring style 
(though it does seem to be using 'outline').

Having said that, I do like your idea of being able to override the style. 
I just don't think basing it on CSS or the current drawing styles makes 
sense, given the above. Maybe we could have have a future extension to 
drawSystemFocusRing() where you pass it a dictionary with hints like 
"color" or "width":

   drawSystemFocusRing(path, input, {
     color: red,
     width: 8px,
   });

That way the browser could ignore the ones that it needs to ignore (e.g. 
because the user needs thick high-contrast focus rings), and then draw the 
ring using the hints mixed with the native style, so that things we can't 
yet express are still used where relevant.

But before we do that, we should probably figure out how much demand there 
is for this. If people are happier to just draw their own rings entirely, 
then we probably don't need to bother providing this at all. Most use 
cases for interactive canvases are where the author isn't trying to fit in 
with the platform at all. (i.e. it's not like authors want the soft rings 
on Mac OS X and the dotted rings on Windows XP, is it? They just want 
their awesome rings everywhere).

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'