Re: Request to re-open issue 131 -USE CASES, USE CASES, USE CASES

"Tab Atkins Jr." <jackalmage@gmail.com> wrote on 12/19/2011 11:03:22 AM:

> From: "Tab Atkins Jr." <jackalmage@gmail.com>
> To: Richard Schwerdtfeger/Austin/IBM@IBMUS,
> Cc: Frank Olivier <Frank.Olivier@microsoft.com>, "chuck@jumis.com"
> <chuck@jumis.com>, Cynthia Shelly <cyns@microsoft.com>, david bolter
> <david.bolter@gmail.com>, "dbolter@mozilla.com"
> <dbolter@mozilla.com>, Steve Faulkner <faulkner.steve@gmail.com>,
> Jonas Sicking <jonas@sicking.cc>, Maciej Stachowiak <mjs@apple.com>,
> Paul Cotton <Paul.Cotton@microsoft.com>, "public-canvas-api@w3.org"
> <public-canvas-api@w3.org>, "public-html@w3.org" <public-
> html@w3.org>, "public-html-a11y@w3.org" <public-html-a11y@w3.org>,
> Sam Ruby <rubys@intertwingly.net>
> Date: 12/19/2011 11:06 AM
> Subject: Re: Request to re-open issue 131 -USE CASES, USE CASES, USE
CASES
>
> On Mon, Dec 19, 2011 at 6:46 AM, Richard Schwerdtfeger
> <schwer@us.ibm.com> wrote:
> >
> > I doubt developers will launch an HTML text box every time they
> want the user to enter text:
> >
> > - editable combobox
> > - grid cell
> > - text box
> >
> > If they were going to do this the author (the lucidart example)
> would have done it in that example I last posted. It is really not
> visibly pleasing to have to launch a dialog box to enter text into
> an editable combobox and definitely not intuitive.
>
> That's not what Jonas was alluding to - he explicitly described his
> scenario, and said it was not "launching a dialog box".  That would
> indeed be a horrible user experience.
>
> Jonas instead described positioning an element, perhaps a <div
> contenteditable>, atop the canvas so that it would receive focus when
> you clicked on it (instead of the canvas) and when you typed into it,
> the text would appear as if it were being live-drawn into the canvas.
> I can provide a simple working example if you wish.
>
>
> > Also, there is a technical problem with overlaying a textbox on a
> flow diagram drawing object. I mean in something like Visio you will
> want to zoom in and out to focus on a drawing object. You may want
> the text to magnify accordingly.
>
> That is not a technical problem; it's either automatic or trivial.  If
> the user is using the browser's built-in zooming functionality, the
> canvas and the text will both zoom automatically and together.  If the
> app is manually zooming by redrawing what's in the canvas, it is
> trivial to also scale the font-size and position of the text overlaid
> atop the canvas with some trivial CSS.  Again, I can provide a simple
> working example if you wish.
>
Thanks for the clarification. I don't know if this will be enough 6-12
months down the road when people start creating more interesting
applications with canvas but it does have the benefit of being able to use
the browser's IME. I will take you up on your offer for the trivial code
example for a canvas combobox if you have time. From an accessibility
perspective the challenge will be ensuring structural integrity of a widget
for a screen reader. I think we can handle that by using aria-owns to knit
the text field into say a combobox. Something like the following (which I
can add to your example and try out with IE and Chrome and Mozilla as soon
as they can handle fallback content):

<canvas>

<script type="text/javascript">
function setFocustoText()
{
document.getElementById("text").focus();
}
</script>

<div id="cb1" class="cb" role="combobox" tabindex='0" aria-owns="cb1-list"
onfocus="setFocustoText()"/>
  <div class="cb_label"><label id="cb1-label"
for="cb1-edit">State</label>:</div>
  <div aria-owns="text"
    aria-labelledby="cb1-label"
    aria-autocomplete="inline"/>
  <div id="cb1-button-label" class="hidden">Open list of states</div>
  <button id="cb1-button" class="cb_button"
aria-labelledby="cb1-button-label" aria-controls="cb1-list" tabindex="-1">
    <img
src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png"
 alt="Open or close the list box" />
  </button>

  <ul id="cb1-list" class="cb_list" tabindex="-1" role="listbox"
aria-expanded="true">
    <li id="cb1-opt1" role="option" class="cb_option">Alabama</li>
    <li id="cb1-opt2" role="option" class="cb_option">Alaska</li>
    <li id="cb1-opt3" role="option" class="cb_option">American Samoa</li>
    <li id="cb1-opt4" role="option" class="cb_option">Arizona</li>
    <li id="cb1-opt5" role="option" class="cb_option">Arkansas</li>
    <li id="cb1-opt6" role="option" class="cb_option">California</li>
   </ul>
 </div>
..
<div id="text" contenteditable role="textbox" tabindex="-1"
aria-autocomplete="inline">
</div>
</canvas>



> ~TJ
>