[whatwg] Outline style to use for drawSystemFocusRing

[Rik Cabanier]

On Mon, Jan 6, 2014 at 8:41 PM, Ian Hickson <ian at hixie.ch> wrote:

> On Mon, 6 Jan 2014, Rik Cabanier wrote:
> >
> > I think you misunderstood. The drawCustomFocusRing() and
> > drawSystemFocusRing() don't cause scrolling, it's when you focus the
> > fallback element that the browser should scroll.
>
> Doing this would imply remembering where the control was the last time the
> focusing ring was rendered,


Yes, the browser backend remembers the update region of the fallback
content.
Otherwise, screen readers would not be able to access it.


> which would cause all kinds of problems for
> authors. Since the last time the control was rendered, maybe the rendering
> stopped showing the control, or maybe when it was last rendered, the
> control was rendered just off-screen on purpose so that it could be
> animated onto the center of the screen when focused... we simply can't
> know what the author is doing.
>

I'm not sure I understand the problem. If the author moves the control
somewhere else on the canvas, he's supposed to call drawFocusRing again
which will update the region.



> This is why there's a separate dedicated API for scrolling. If the author
> thinks that the user will want to scroll to the control when the control
> is focused, then it's trivial to do. But we should not force this
> behaviour. That's terrible API design.


Every other control in HTML that gets the focus will cause scrolling. It's
terrible design that this would act differently.
Drawing a ring but not scrolling feels very unnatural. Try Dominic's
example [1] on a small window and you'll notice the scrolling for the links
at the bottom but not the hour and minute hands.

In order to turn this off in firefox and webkit, we would have to add
special case code that intentionally disables the scrolling for fallback
elements.
In addition, if the author doesn't call scrollPathIntoView (which I *think*
he has to do every time the fallback element is focused), visually impaired
users might not be able to tab to controls that are on a canvas.
so:

ctx.moveto(...);ctx.lineto(...);

ctx.drawFocusRing(element);

element.onfocus = function(){

ctx.moveto(...);ctx.lineto(...); // same path as above

ctx.scrollPathIntoView();

}


1: http://dmazzoni-google.github.io/canvas-focus-ring-demo/