All the form widgets support the standard form element attributes such as disabled, tabIndex, id, name, value, in addition to enable()/disable(), and getValue()/setValue(). Of course, changing any parameter value must be done via a method call rather than by just changing the variable value.
All form widgets can be added to a webpage inside a <form> tag, and their value is submitted when the form is submitted. Form reset doesn't work (at least for 0.9).
Some form widgets have the idea of the displayed value (in localized format), and the submitted value (in a standard format). For example, a DateTextBox in America will display 5/30/2007, but you create the widget like this:
<input dojoType=dijit.DateTextBox value=2007-5-30>and also when you submit the form it will send 2007-5-30.
Activating the button via a mouse click or pressing enter or space with focus on the button opens a menu below the button with focus on the first menu item. Pressing up or down arrow with focus on a menu item will cycle focus around through the menu items. Press escape to close the menu and have focus return to the Dropdown button. Pressing tab will close the menu and set focus back to the button.
Mouseover on a menuitem sets focus to that menuitem. Setting focus is necessary so that a screen reader or screen magnifier will work correctly. Mouseout of the menu closes the menu and set focus back to the button.
The current Dojo Tundra theme includes only button text. For those developers using an image for the button face information, a real img element should be used with appropriate alternative text. This will insure that a button with an image is still usable in high contrast mode and with the display of images turned off in the browser.
A combo button is a button with two behaviors - to activate a default action or to open a drop down menu. The drop down menu functionality is implemented as an arrow or other visual indicator within the button face. Activating the main portion of the button executes the default action. Activating the second portion of the button opens a drop down menu of actions.
There are two tab stops within the combo button. One tab stop for the default button action and another for the portion of the button which opens the drop down menu. This implementation is more intuitive for the screen reader user as there is no explicit role to indicate a combination button. The optionsTitle parameter is used to label this button so the screen reader use will know the purpose of the button.
Clicking in the default portion of the button will activate the default action. With focus on the default action portion of the button, pressing the space or enter key will activate the default action. The second portion of the button behaves the same as a Dropdown button.
The default portion of the button has the ARIA role of button. The dropdown button portion of the combo button has the ARIA role of button and the haspopup=true property.
The current Dojo Tundra theme includes only button text. For those developers using an image for the button face information, a real img element should be used with appropriate alternative text. This will insure that a button with an image is still usable in high contrast mode and with the display of images turned off in the browser.
A toggle button is the base class for Checkbox and Radio, and has methods like setSelected(boolean)
Like a textbox but it suggests values for you to type in. No key/value dichotomy. Interfaces to server via dojo.data interface. Can also hardcode data into the HTML file via <select> <option> <option> ...</select> format.
Combobox subclasses the Validation textbox so that it can display error messages if user types a wrong value
See test files (test_Combobox.html, test_FilteringSelect.html) for examples with inlined data or JSON data
If user types in an invalid value, and tabs away, we'll just leave the text they typed in the <input> box. We won't erase the value, nor revert to the last good value, not ignore user keystrokes that cause the text to become invalid (ie, if the user types "californib" or "acalifornia", all the characters will go into the input box).
While this doesn't match the behavior of a browser's <select> or OS drop down, my judgement is that it's the best option, since we don't lose any data the user typed in. It also works well with the asynchronous nature of dojo.data, which prevents us from immediately determining if a given string is valid or invalid.
(bug #3268)
The down button will show all the available choices, so that mouse only users can still use something like a state select box. This is already the current behavior; no change needed.
There will be a widget parameter to show/hide the drop down button. (bug #3269)
This option is means that if you type a partial word (like "cal") and then tab away, it will fill in "California" from the drop down list. It automatically completes your entry.
It doesn't refer to the display of the drop down list. The drop down list always appears; there's no option to turn it off. (The purpose of both these widgets is to have a drop down list.)
(bug #3268)
The drop down list auto-sizes according to the space available; it adds a scrollbar when necessary.
Since our drop downs auto-size to the space available, let's make the drop down always go below the <input> box, unless the space below the input box is really cramped (say, less that 100px).
(bug #3272)
TODO: option to limit the # of items displayed? <a href="">Google suggests</a> only prints 10 items at a time.Validation error message will print tooltip to the right of the box (bug #3267)
At some point we will make a select widget similar to the browser's or OS's select boxes, but not 0.9. See bug #3270 for details.
The browsers focus is put into the text field and the user starts typing. When a match/matches is found, a list of choices is displayed below the textfield that match the information typed into the textfied. As the user continues typing, the list of choices is updated to match what the user has typed.
If the user arrows down into the list of choices a choice is highlighted/selected, the entry in the textfield is updated to match the selected choice and the automatically completed characters are highlighted. As the user arrows through the choices, the textfield is updated, with the automatically completed characters highlighted. The screen reader will speak each choice.
Pressing the down arrow does not change what is displayed in the drop down list.
Pressing the escape key closes the list of choices and returns the text field to the value that the user had typed before selecting from the list of choices. Likewise, pressing the up arrow to move from the list of choices back to the text field returns the textfield value to the value that the user had typed before selecting from the list of choices. The textfield has focus and the caret is at the end of the entry ready for additional input. If the user has a choice selected and types an additional letter, the list of choices is closed and the auto-completed characters are replaced by the newly entered character. Thus, in order to continue typing a different address after having selected one from the list, the user just continues typing. If the user presses enter with a choice selected, the browser closes the list of choices and navigates to the selected choice.
(never written... see test files)
Slider docs: http://www.dojotoolkit.org/developer/dijit/spec/slider
Goal: Port slider from trunk/0.4 to the new dijit structure. Fixing bugs along the way.
Slider is 2 different 'displays'. Vertical and Horizontal.
becka11y asks: the old version of the slider had a flip attribute to change the slider behavior? Will this still be supported? I vote for no since I think it is confusing but if flip is supported the keyboard behavior will have to flip as well to support.
How to deal with Tick Marks, and Labels? Do we allow just tick marks, do we allow them to specify, or draw their own, or do we just do it ourselves however we see fit? Do we allow percentages and discrete numbers?
the spinner widget will deal with adjustments as well(increment/decrement some value.. should we play well with them?)
I've looked at QT and GTK, neither seem to have a good way to deal with the tick marks and labels. I'm going to play with an implementation and see what I come up with.
The slider needs to work in high contrast mode. Any CSS background images or colors are turned off in high contrast mode. Generally to support high contrast we need to use real images to represent at least the slider. This image should have alternative text (probably a + or X to represent the slider when images are turned off. An alternative to an image slider is to use an img button - the button text could have the actual slider value.
At least one of elements in the slider needs to have tabindex="0" so it is in the tab order. This element should receive the ARIA role of slider. The role can probably be set in the slider template. This element also needs the ARIA property values valuemin, valuemax, and valuenow. Valuemin and valuemax correspond to the slider min and max values, respectively. If min and max can be programmitically updated the valuemin and valuemax properties must be updated as well. The valuenow is the current silder value and must be updated via the dijit.util.wai.setAttr() api each time the slider value is updated via the mouse, keyboard or programmatically.
* http://trac.dojotoolkit.org/query?status=new&status=assigned&status=reop... * http://trac.dojotoolkit.org/browser/trunk/src/widget/Slider.js * http://www.flickr.com/photo_zoom.gne?id=343727062&size=o * http://archive.dojotoolkit.org/nightly/tests/widget/test_Slider.html
textarea that automatically changes size based on the content (like the Editor)
This is a standard textbox with various facilities for auto-correcting the input text (capitalization, etc), and hinting w/example values to type in.
TODO: hinting wasn't implemented for 0.9. Need it for 1.0
A Textbox that can take different regular expressions for validating many different patterns. Pops up an error message (like a tooltip) if there is an error.
Displayed value will be localized; user inputs localized value. But the value sent to the server is standard format like javascript numbers.
See currency checkbox comments above.
Like DropdownDatePicker but vastly simpler; no parameters to widget (other than those in FormWidget.js (value, name, id, etc). No advance by week buttons. A stand alone calendar isn't supported. Allows manual input of date by typing. Includes validation if user types wrong date. Combination of Validating textbox and drop down.