RE: drawSystemFocusRing in Canvas

Thanks much Rich. Good to know.



I was worried, but then I found getImageData() and putImageData() so
redrawing isn’t that much effort.



For those who don’t know, these let you copy a rectangle as is and place it
back on the canvas later, without having to keep a record of how everything
was initially drawn.



Should there be a tip for authors to remember that the focus ring might be
a lot bigger than the standard one and some type of standard recommendation
for how many pixels out they should redraw?

Should the spec say what should happen if the focusRing would go outside
the boundaries of the canvas itself? For example, if the canvas is nearly
full with a giant start button and the user-customized focusRing includes
padding, the focusRing might not be visible at all:



Standard:



One of ZoomText’s standard focus options:






 ------------------------------

*From:* Richard Schwerdtfeger [mailto:schwer@us.ibm.com]
*Sent:* Thursday, July 25, 2013 7:50 PM
*To:* Suzanne Taylor
*Cc:* public-html-a11y@w3.org
*Subject:* RE: drawSystemFocusRing in Canvas



Hi Suzanne,

response below. Note: I will out tomorrow and won't be able to respond
again until next week with any questions you might have. So, if you don't
get a response I am not ignoring you. :-)

Rich



Rich Schwerdtfeger

[image: Inactive hide details for Suzanne Taylor ---07/25/2013 05:38:32
PM---I like the idea that no matter who customized the system f]Suzanne
Taylor ---07/25/2013 05:38:32 PM---I like the idea that no matter who
customized the system focus ring (web developer, user through OS

From: Suzanne Taylor <suzanne.taylor@pearson.com>
To: Richard Schwerdtfeger/Austin/IBM@IBMUS, public-html-a11y@w3.org,
Date: 07/25/2013 05:38 PM
Subject: RE: drawSystemFocusRing in Canvas
 ------------------------------




I like the idea that no matter who customized the system focus ring (web
developer, user through OS setting, etc) that style will be used.

I have a concern/question about how the focus ring will be cleared:

According to the spec, drawSystemFocusRing actually draws onto the canvas:


If the given element is focused, draws a focus ring around the current
default path<http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#current-default-path>
or
the given path, following the platform conventions for focus rings.

<rich>yes but it makes that function call in response to receiving a focus
event. The path is defined by the author. </rich>


It doesn’t set up onfocus and onblur automatic events, like the presence of
an ordinary active element, which would be more like this:

<rich> Why not? Keyboard focus is in fallback content. If focus moves the
user agent should send the onblur event. The author would need to set up a
handler to erase the old ring. It knows how it computed the path the last
time. This is an authoring issue. GUIs work the same way.
</rich>


Permanently associate the current default
path<http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#current-default-path>
or
the given path with the given element, so that, as the given element gains
and loses focus, focus indication is shown and hidden on the canvas and
communicated to AT following the platform conventions for focus rings.

<rich> Well, to do this right the author may need to paint the background
again. It may not be that simple.
</rich>





So, would a Web developer use drawSystemFocusRing in a function triggered
by onfocus(), something like this:
      function myFocus(num){
                      rc.beginPath();

                      rc.moveTo(275,165);
                      rc.lineTo(415,165);
                      rc.lineTo(415,285);
                      rc.lineTo(275,285);
                      rc.lineTo(275,165);
                      rc.closePath();


rc.drawSystemFocusRing(document.getElementById(‘thefallbackitem’));
      }
<rich>Yes, and there may be additional clearing and painting that goes
along with that.</rich>



If so, with each browser having different fallback styles, and with
possible end user customization, how will we know how to un-draw the focus
ring, which might actually overlap fairly complex backgrounds?

<rich>You track the focus related events and do your drawing for erasing
and drawing the focus rectangle. This will require, at times, painting the
backing over to address complex backgrounds. </rich>

Thanks,
Suzanne
 ------------------------------

*From:* Richard Schwerdtfeger [mailto:schwer@us.ibm.com] *
Sent:* Thursday, July 25, 2013 11:03 AM*
To:* public-html-a11y@w3.org*
Subject:* drawSystemFocusRing in Canvas


I am working with Google on their implementing support for this feature.
One of the things we did not specify with greater clarity is how the focus
ring style is determined for the standard focus ring associated with a
fallback element.

Default Focus styling by default should be determined from the outline
style of the fallback element associated with the element drawn on the
canvas
*
*http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines

>From CSS2:
"Graphical user interfaces may use outlines around elements to tell the
user which element on the page has the *focus*. These outlines are in
addition to any borders, and switching outlines on and off should not cause
the document to reflow. The focus is the subject of user interaction in a
document (e.g., for entering text, selecting a button, etc.). User agents
supporting the interactive media
group<http://www.w3.org/TR/CSS2/media.html#interactive-media-group>
must
keep track of where the focus lies and must also represent the focus. This
may be done by using dynamic outlines in conjunction with the :focus
pseudo-class.

For example, to draw a thick black line around an element when it has the
focus, and a thick red line when it is active, the following rules can be
used:


:focus  { outline: thick solid black }
:active { outline: thick solid red }"

This would of course mean that should the author decide to change the
default focus style for the outline of that element that that style could
change on the physical canvas.

I would like to add informative text to the Canvas 2D API document that
states something on the order of (and this could be placed in a note):

Note:

The agents may use the <a href="
http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines">CSS outlines around
focused elements</a> in determining the system focus style on fallback
elements to determine the standard system focus ring style drawn on the
canvas. This would mean that if an author were to override this style that
the appearance of the standard focus ring drawn on the canvas could reflect
this change in style.

Since this is non-normative text and would not require us to go back to
Last Call and because Google requested that we add informative text I would
like to propose adding this or similar to text to the current Canvas 2D API
CR document.

Rich








Rich Schwerdtfeger