Search and Top Navigation
Ticket #4739: slider_additions_to_fluid_patch_HH.txt
File slider_additions_to_fluid_patch_HH.txt, 12.0 KB (added by hhillen, February 26, 2010 12:50AM UTC)
### Eclipse Workspace Patch 1.0
#P jQuery
Index: demos/slider/multiple-handles.html
===================================================================
--- demos/slider/multiple-handles.html (revision 0)
+++ demos/slider/multiple-handles.html (revision 0)
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Slider - Range slider</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ #demo-frame > div.demo { padding: 10px !important; };
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#slider-range").slider({
+ min: 0,
+ max: 500,
+ values: [20, 75, 300, 400],
+ unittext: "dollar",
+ labels: ["estimated costs", "actual costs", "budget", "recommended budget"],
+ slide: function(event, ui) {
+ $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
+ }
+ });
+ $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo" role="application">
+
+<p>
+<label for="amount">Price range:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider-range"></div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Index: tests/unit/slider/slider_options.js
===================================================================
--- tests/unit/slider/slider_options.js (revision 3816)
+++ tests/unit/slider/slider_options.js (working copy)
@@ -89,7 +89,22 @@
});
test("range", function() {
- ok(false, "missing test - untested code is broken code.");
+ el = $('<div></div>');
+
+ options = {
+ max: 100,
+ min: 0,
+ orientation: 'horizontal',
+ values: [10,50],
+ range:true
+ };
+
+ el.slider(options);
+ var handles = handle();
+ ok(el.slider("option", "range") == options.range);
+ equals((options.values.length), 2, "range is set to true, length of values is");
+ el.slider('destroy');
+
});
test("step", function() {
@@ -97,11 +112,52 @@
});
test("value", function() {
- ok(false, "missing test - untested code is broken code.");
+ el = $('<div></div>');
+
+ options = {
+ max: 100,
+ min: 0,
+ orientation: 'horizontal',
+ value: 5
+ };
+
+ el.slider(options);
+ var handles = handle();
+ ok(el.slider("option", "value") == options.value);
+ equals(handles.attr("aria-valuenow"), 5, "the aria-valuenow is");
+ el.slider('destroy');
+
});
test("values", function() {
- ok(false, "missing test - untested code is broken code.");
+ el = $('<div></div>');
+
+ options = {
+ max: 100,
+ min: 0,
+ orientation: 'horizontal',
+ step: 1,
+ values: [10,50],
+ range: true
+ };
+
+ el.slider(options, options.step);
+ var handles = handle();
+ var firstHandle = handles.eq(0);
+ equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle is");
+ var secondHandle = handles.eq(1);
+ equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle is");
+ firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(firstHandle.attr("aria-valuenow"), 11, "The aria-valuenow of the first handle after keydown RIGHT is" );
+ firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle after keydown LEFT is" );
+ secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(secondHandle.attr("aria-valuenow"), 49, "The aria-valuenow of the second handle after keydown LEFT is");
+ secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle after keydown RIGHT is");
+
+ el.slider('destroy');
+
});
})(jQuery);
Index: demos/slider/default.html
===================================================================
--- demos/slider/default.html (revision 3816)
+++ demos/slider/default.html (working copy)
@@ -14,7 +14,7 @@
</style>
<script type="text/javascript">
$(function() {
- $("#slider").slider();
+ $("#slider").slider({unittext : "MB", label : "file size"});
});
</script>
</head>
Index: ui/jquery.ui.slider.js
===================================================================
--- ui/jquery.ui.slider.js (revision 3816)
+++ ui/jquery.ui.slider.js (working copy)
@@ -30,7 +30,9 @@
range: false,
step: 1,
value: 0,
- values: null
+ values: null,
+ unittext: null,
+ name: null
},
_create: function() {
@@ -122,7 +124,9 @@
});
this.handles.each(function(i) {
- $(this).data("index.ui-slider-handle", i);
+ $(this).data("index.ui-slider-handle", i).attr("aria-valuenow", o.values ? o.values[i] : o.value);
+ if (self.options.unittext)
+ $(this).data("index.ui-slider-handle", i).attr("aria-valuetext", (o.values ? o.values[i] : o.value) + " " + self.options.unittext);
});
this.handles.keydown(function(event) {
@@ -200,11 +204,37 @@
}
});
-
+ var ariaDefaults = {role: 'slider',
+ "aria-valuemin": this.options.min,
+ "aria-valuemax": this.options.max,
+ };
+
+ if (this.options.value && this.options.label)
+ ariaDefaults.title = this.options.label;
+ else if (!this.options.labels && this.options.label) {
+ this.handles.each(function(i,e) {
+
+ if (self.options.range && i < 2) {
+ $(this).attr('title', self.options.label + " " + (i == 0 ? "min" : "max"));
+ }
+ else
+ $(this).attr('title', self.options.label + " " + (i + 1))
+ });
+ }
+ else if (this.options.labels) {
+ this.handles.each(function(i,e) {
+ if (self.options.labels[i])
+ $(this).attr("title", self.options.labels[i]);
+ });
+ }
+
+ this.handles.attr(ariaDefaults);
this._refreshValue();
this._animateOff = false;
-
+ this._updateAriaLimit("min");
+ this._updateAriaLimit("max");
+
},
destroy: function() {
@@ -390,6 +420,9 @@
var otherVal = this.values(index ? 0 : 1);
if (allowed !== false) {
this.values(index, newVal, true);
+ $(handle).attr("aria-valuenow",newVal);
+ if (this.options.unittext)
+ $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext);
}
}
@@ -403,6 +436,9 @@
});
if (allowed !== false) {
this.value(newVal);
+ $(handle).attr("aria-valuenow",newVal);
+ if (this.options.unittext)
+ $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext);
}
}
@@ -512,6 +548,10 @@
this._refreshValue();
this._animateOff = false;
break;
+ case 'min':
+ case 'max':
+ this._updateAriaLimit(key);
+ break;
}
},
@@ -591,6 +631,12 @@
}
}
lastValPercent = valPercent;
+
+ $(this).attr('aria-valuenow', self.values(i));
+ //since ranged thumbs can't pass each other, update ARIA min/max boundary for opposite handle
+ if (self.options.range && i < 2) {
+ self.handles.eq(i == 0 ? 1 : 0).attr(i == 0 ? 'aria-valuemin' : 'aria-valuemax', self.values(i));
+ }
});
} else {
var value = this.value(),
@@ -606,8 +652,22 @@
(oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
(oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate);
(oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
+
+ this.handle.attr('aria-valuenow', value);
}
+ },
+
+ _updateAriaLimit : function(key) {
+ var value = this.options[key];
+ if (this.range && this.options.values && this.options.values.length == 2) {
+ this.handles.eq(key == "min" ? 0 : 1).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value);
+ }
+ else {
+ this.handles.each(function(i) {
+ $(this).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value);
+ });
+ }
}
});
Index: tests/unit/slider/slider_defaults.js
===================================================================
--- tests/unit/slider/slider_defaults.js (revision 3816)
+++ tests/unit/slider/slider_defaults.js (working copy)
@@ -14,7 +14,8 @@
range: false,
step: 1,
value: 0,
- values: null
+ values: null,
+ unittext: null
};
commonWidgetTests('slider', { defaults: slider_defaults });
Index: demos/slider/range.html
===================================================================
--- demos/slider/range.html (revision 3816)
+++ demos/slider/range.html (working copy)
@@ -19,6 +19,8 @@
min: 0,
max: 500,
values: [75, 300],
+ unittext: "dollar",
+ label: "price range",
slide: function(event, ui) {
$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
}
@@ -29,7 +31,7 @@
</head>
<body>
-<div class="demo">
+<div class="demo" role="application">
<p>
<label for="amount">Price range:</label>
Index: tests/unit/slider/slider_core.js
===================================================================
--- tests/unit/slider/slider_core.js (revision 3816)
+++ tests/unit/slider/slider_core.js (working copy)
@@ -289,4 +289,83 @@
el.slider("destroy");
});
+test("ARIA Min and Max", function() {
+ el = $('<div></div>');
+
+ options = {
+ max: 54,
+ min: 3,
+ orientation: 'horizontal',
+ value:15
+ };
+
+ el.slider(options);
+ var handles = handle();
+
+ equals(handles.attr("aria-valuemax"), 54, "The ARIA-valuemax should be 54" );
+ equals(handles.attr("aria-valuemin"), 3, "The ARIA-valuemin should be 3" );
+ equals(handles.attr("aria-valuenow"), 15, "The ARIA-valuenow should be 15" );
+ el.slider('destroy');
+});
+
+test("ARIA Min and Max with default options", function() {
+ el = $('<div></div>');
+
+ el.slider();
+ var handles = handle();
+
+ equals(handles.attr("aria-valuemax"), 100, "The ARIA max should be 100" );
+ equals(handles.attr("aria-valuemin"), 0, "The ARIA min should be 0" );
+ equals(handles.attr("aria-valuenow"), 0, "The ARIA-valuenow should be 0" );
+ el.slider('destroy');
+});
+
+test("ARIA-valuenow after keydown LEFT", function(){
+ el = $('<div></div>');
+ options = {
+ max: 5,
+ min: -5,
+ orientation: 'horizontal',
+ step: 1,
+ value: 4
+ };
+ el.slider(options);
+ var handles = handle();
+
+ el.slider(options.value, options.min + options.step);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" );
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(handles.attr("aria-valuenow"), 2, "The ARIA-valuenow should be 2" );
+
+ el.slider("destroy");
+
+});
+
+test("ARIA-valuenow after keydown RIGHT", function(){
+ el = $('<div></div>');
+ options = {
+ max: 5,
+ min: -5,
+ orientation: 'horizontal',
+ step: 1,
+ value: 2
+ };
+ el.slider(options);
+ var handles = handle();
+
+ el.slider(options.value, options.min + options.step);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" );
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(handles.attr("aria-valuenow"), 4, "The ARIA-valuenow should be 4" );
+
+ el.slider("destroy");
+
+});
+
})(jQuery);
Download in other formats:
Original Format
File slider_additions_to_fluid_patch_HH.txt, 12.0 KB (added by hhillen, February 26, 2010 12:50AM UTC)
### Eclipse Workspace Patch 1.0
#P jQuery
Index: demos/slider/multiple-handles.html
===================================================================
--- demos/slider/multiple-handles.html (revision 0)
+++ demos/slider/multiple-handles.html (revision 0)
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Slider - Range slider</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+ #demo-frame > div.demo { padding: 10px !important; };
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#slider-range").slider({
+ min: 0,
+ max: 500,
+ values: [20, 75, 300, 400],
+ unittext: "dollar",
+ labels: ["estimated costs", "actual costs", "budget", "recommended budget"],
+ slide: function(event, ui) {
+ $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
+ }
+ });
+ $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo" role="application">
+
+<p>
+<label for="amount">Price range:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider-range"></div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Index: tests/unit/slider/slider_options.js
===================================================================
--- tests/unit/slider/slider_options.js (revision 3816)
+++ tests/unit/slider/slider_options.js (working copy)
@@ -89,7 +89,22 @@
});
test("range", function() {
- ok(false, "missing test - untested code is broken code.");
+ el = $('<div></div>');
+
+ options = {
+ max: 100,
+ min: 0,
+ orientation: 'horizontal',
+ values: [10,50],
+ range:true
+ };
+
+ el.slider(options);
+ var handles = handle();
+ ok(el.slider("option", "range") == options.range);
+ equals((options.values.length), 2, "range is set to true, length of values is");
+ el.slider('destroy');
+
});
test("step", function() {
@@ -97,11 +112,52 @@
});
test("value", function() {
- ok(false, "missing test - untested code is broken code.");
+ el = $('<div></div>');
+
+ options = {
+ max: 100,
+ min: 0,
+ orientation: 'horizontal',
+ value: 5
+ };
+
+ el.slider(options);
+ var handles = handle();
+ ok(el.slider("option", "value") == options.value);
+ equals(handles.attr("aria-valuenow"), 5, "the aria-valuenow is");
+ el.slider('destroy');
+
});
test("values", function() {
- ok(false, "missing test - untested code is broken code.");
+ el = $('<div></div>');
+
+ options = {
+ max: 100,
+ min: 0,
+ orientation: 'horizontal',
+ step: 1,
+ values: [10,50],
+ range: true
+ };
+
+ el.slider(options, options.step);
+ var handles = handle();
+ var firstHandle = handles.eq(0);
+ equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle is");
+ var secondHandle = handles.eq(1);
+ equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle is");
+ firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(firstHandle.attr("aria-valuenow"), 11, "The aria-valuenow of the first handle after keydown RIGHT is" );
+ firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle after keydown LEFT is" );
+ secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(secondHandle.attr("aria-valuenow"), 49, "The aria-valuenow of the second handle after keydown LEFT is");
+ secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle after keydown RIGHT is");
+
+ el.slider('destroy');
+
});
})(jQuery);
Index: demos/slider/default.html
===================================================================
--- demos/slider/default.html (revision 3816)
+++ demos/slider/default.html (working copy)
@@ -14,7 +14,7 @@
</style>
<script type="text/javascript">
$(function() {
- $("#slider").slider();
+ $("#slider").slider({unittext : "MB", label : "file size"});
});
</script>
</head>
Index: ui/jquery.ui.slider.js
===================================================================
--- ui/jquery.ui.slider.js (revision 3816)
+++ ui/jquery.ui.slider.js (working copy)
@@ -30,7 +30,9 @@
range: false,
step: 1,
value: 0,
- values: null
+ values: null,
+ unittext: null,
+ name: null
},
_create: function() {
@@ -122,7 +124,9 @@
});
this.handles.each(function(i) {
- $(this).data("index.ui-slider-handle", i);
+ $(this).data("index.ui-slider-handle", i).attr("aria-valuenow", o.values ? o.values[i] : o.value);
+ if (self.options.unittext)
+ $(this).data("index.ui-slider-handle", i).attr("aria-valuetext", (o.values ? o.values[i] : o.value) + " " + self.options.unittext);
});
this.handles.keydown(function(event) {
@@ -200,11 +204,37 @@
}
});
-
+ var ariaDefaults = {role: 'slider',
+ "aria-valuemin": this.options.min,
+ "aria-valuemax": this.options.max,
+ };
+
+ if (this.options.value && this.options.label)
+ ariaDefaults.title = this.options.label;
+ else if (!this.options.labels && this.options.label) {
+ this.handles.each(function(i,e) {
+
+ if (self.options.range && i < 2) {
+ $(this).attr('title', self.options.label + " " + (i == 0 ? "min" : "max"));
+ }
+ else
+ $(this).attr('title', self.options.label + " " + (i + 1))
+ });
+ }
+ else if (this.options.labels) {
+ this.handles.each(function(i,e) {
+ if (self.options.labels[i])
+ $(this).attr("title", self.options.labels[i]);
+ });
+ }
+
+ this.handles.attr(ariaDefaults);
this._refreshValue();
this._animateOff = false;
-
+ this._updateAriaLimit("min");
+ this._updateAriaLimit("max");
+
},
destroy: function() {
@@ -390,6 +420,9 @@
var otherVal = this.values(index ? 0 : 1);
if (allowed !== false) {
this.values(index, newVal, true);
+ $(handle).attr("aria-valuenow",newVal);
+ if (this.options.unittext)
+ $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext);
}
}
@@ -403,6 +436,9 @@
});
if (allowed !== false) {
this.value(newVal);
+ $(handle).attr("aria-valuenow",newVal);
+ if (this.options.unittext)
+ $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext);
}
}
@@ -512,6 +548,10 @@
this._refreshValue();
this._animateOff = false;
break;
+ case 'min':
+ case 'max':
+ this._updateAriaLimit(key);
+ break;
}
},
@@ -591,6 +631,12 @@
}
}
lastValPercent = valPercent;
+
+ $(this).attr('aria-valuenow', self.values(i));
+ //since ranged thumbs can't pass each other, update ARIA min/max boundary for opposite handle
+ if (self.options.range && i < 2) {
+ self.handles.eq(i == 0 ? 1 : 0).attr(i == 0 ? 'aria-valuemin' : 'aria-valuemax', self.values(i));
+ }
});
} else {
var value = this.value(),
@@ -606,8 +652,22 @@
(oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
(oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate);
(oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
+
+ this.handle.attr('aria-valuenow', value);
}
+ },
+
+ _updateAriaLimit : function(key) {
+ var value = this.options[key];
+ if (this.range && this.options.values && this.options.values.length == 2) {
+ this.handles.eq(key == "min" ? 0 : 1).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value);
+ }
+ else {
+ this.handles.each(function(i) {
+ $(this).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value);
+ });
+ }
}
});
Index: tests/unit/slider/slider_defaults.js
===================================================================
--- tests/unit/slider/slider_defaults.js (revision 3816)
+++ tests/unit/slider/slider_defaults.js (working copy)
@@ -14,7 +14,8 @@
range: false,
step: 1,
value: 0,
- values: null
+ values: null,
+ unittext: null
};
commonWidgetTests('slider', { defaults: slider_defaults });
Index: demos/slider/range.html
===================================================================
--- demos/slider/range.html (revision 3816)
+++ demos/slider/range.html (working copy)
@@ -19,6 +19,8 @@
min: 0,
max: 500,
values: [75, 300],
+ unittext: "dollar",
+ label: "price range",
slide: function(event, ui) {
$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
}
@@ -29,7 +31,7 @@
</head>
<body>
-<div class="demo">
+<div class="demo" role="application">
<p>
<label for="amount">Price range:</label>
Index: tests/unit/slider/slider_core.js
===================================================================
--- tests/unit/slider/slider_core.js (revision 3816)
+++ tests/unit/slider/slider_core.js (working copy)
@@ -289,4 +289,83 @@
el.slider("destroy");
});
+test("ARIA Min and Max", function() {
+ el = $('<div></div>');
+
+ options = {
+ max: 54,
+ min: 3,
+ orientation: 'horizontal',
+ value:15
+ };
+
+ el.slider(options);
+ var handles = handle();
+
+ equals(handles.attr("aria-valuemax"), 54, "The ARIA-valuemax should be 54" );
+ equals(handles.attr("aria-valuemin"), 3, "The ARIA-valuemin should be 3" );
+ equals(handles.attr("aria-valuenow"), 15, "The ARIA-valuenow should be 15" );
+ el.slider('destroy');
+});
+
+test("ARIA Min and Max with default options", function() {
+ el = $('<div></div>');
+
+ el.slider();
+ var handles = handle();
+
+ equals(handles.attr("aria-valuemax"), 100, "The ARIA max should be 100" );
+ equals(handles.attr("aria-valuemin"), 0, "The ARIA min should be 0" );
+ equals(handles.attr("aria-valuenow"), 0, "The ARIA-valuenow should be 0" );
+ el.slider('destroy');
+});
+
+test("ARIA-valuenow after keydown LEFT", function(){
+ el = $('<div></div>');
+ options = {
+ max: 5,
+ min: -5,
+ orientation: 'horizontal',
+ step: 1,
+ value: 4
+ };
+ el.slider(options);
+ var handles = handle();
+
+ el.slider(options.value, options.min + options.step);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" );
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
+ equals(handles.attr("aria-valuenow"), 2, "The ARIA-valuenow should be 2" );
+
+ el.slider("destroy");
+
+});
+
+test("ARIA-valuenow after keydown RIGHT", function(){
+ el = $('<div></div>');
+ options = {
+ max: 5,
+ min: -5,
+ orientation: 'horizontal',
+ step: 1,
+ value: 2
+ };
+ el.slider(options);
+ var handles = handle();
+
+ el.slider(options.value, options.min + options.step);
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" );
+
+ handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
+ equals(handles.attr("aria-valuenow"), 4, "The ARIA-valuenow should be 4" );
+
+ el.slider("destroy");
+
+});
+
})(jQuery);