- From: Richard Schwerdtfeger <schwer@us.ibm.com>
- Date: Mon, 19 Dec 2011 17:11:24 -0600
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: "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>, Frank Olivier <Frank.Olivier@microsoft.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>
- Message-ID: <OFAEB66063.65EA54C3-ON8625796B.0078D8E6-8625796B.007F631B@us.ibm.com>
"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 >
Received on Monday, 19 December 2011 23:12:13 UTC