r2744 - spinner: added aria support
Author: pazu2k@gmail.com
Date: Sat Jun 13 06:33:05 2009
New Revision: 2744
Added:
branches/dev/spinner/tests/visual/spinner/spinner_aria.html (contents,
props changed)
Modified:
branches/dev/spinner/ui/ui.spinner.js
Log:
spinner: added aria support
Added: branches/dev/spinner/tests/visual/spinner/spinner_aria.html
==============================================================================
--- (empty file)
+++ branches/dev/spinner/tests/visual/spinner/spinner_aria.html Sat Jun 13
06:33:05 2009
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Spinner Visual Test Page: Spinner ARIA test</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css">
+ <style type="text/css">
+ input { width: 50px; }
+ </style>
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.spinner.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#spinner').spinner();
+ $('button').click(function() {
+ $('#spinner')
+ .spinner('option', {
+ min: $('#min').val(),
+ max: $('#max').val(),
+ step: $('#step').val()
+ });
+ });
+ });
+ </script>
+</head>
+<body>
+<div class="ui-widget">
+
+<input id="spinner" type="number" min="-100" max="100" value="5" step="2">
+
+Min: <input id="min" type="text" name="min" value="-100">
+Max: <input id="max" type="text" name="max" value="100">
+Step: <input id="step" type="text" name="step" value="2">
+<button>Update spinner</button>
+
+</div>
+</body>
+</html>
\ No newline at end of file
Modified: branches/dev/spinner/ui/ui.spinner.js
==============================================================================
--- branches/dev/spinner/ui/ui.spinner.js (original)
+++ branches/dev/spinner/ui/ui.spinner.js Sat Jun 13 06:33:05 2009
@@ -88,7 +88,7 @@
// draw widget
var widget = self._draw();
-
+
// add behaviours
widget
.find('.ui-spinner-up')
@@ -231,14 +231,15 @@
_draw: function() {
var self = this,
- dir = self.options.dir,
- spinnerClass = self.options.spinnerClass,
+ options = self.options,
+ dir = options.dir,
+ spinnerClass = options.spinnerClass,
spinnerBoxClass = 'ui-spinner-box',
widgetClasses = 'ui-spinner ui-widget ui-widget-content ui-corner-all
ui-spinner-' + dir + (spinnerClass ? ' '+ spinnerClass: ''),
widget = self.element
.addClass(spinnerBoxClass)
.attr('autocomplete', 'off') // switch off autocomplete in opera
- .wrap('<div>')
+ .wrap('<div role="spinbutton">')
.parent()
.addClass(widgetClasses)
.append('<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-t'+ dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-n">▲</span></span></a>')
@@ -251,8 +252,8 @@
}
// force width if passed through options
- if (self.options.width) {
- self.element.width(self.options.width);
+ if (options.width) {
+ self.element.width(options.width);
}
// Give the spinner casing a unique id only if one exists in original
input
@@ -262,7 +263,13 @@
widget.attr('id', 'ui-spinner-'+ this.id);
}
});
-
+
+ // add aria properties
+ widget
+ .attr('aria-valuemin',options.min)
+ .attr('aria-valuemax',options.max)
+ .attr('aria-valuenow',options.value);
+
return widget;
},
_constrain: function() {
@@ -401,6 +408,7 @@
$.ui.spinner.format.currency(newVal, this.options.currency,
this.options.groupSeparator, this.options.radixPoint) :
$.ui.spinner.format.number(newVal, this._precision,
this.options.radix, this.options.groupSeparator, this.options.radixPoint,
this.options.padLength)
);
+ this.element.parent().attr('aria-valuenow', this._getValue());
},
_animate: function(d) {
if (this.element.hasClass('ui-spinner-list') && ((d == 'up' &&
this._getValue() <= this.options.max) || (d == 'down' && this._getValue()