Ticket #4739: slider_additions_to_fluid_patch_HH.txt

File slider_additions_to_fluid_patch_HH.txt, 12.0 KB (added by hhillen, 10 years ago)
Line 
1### Eclipse Workspace Patch 1.0
2#P jQuery
3Index: demos/slider/multiple-handles.html
4===================================================================
5--- demos/slider/multiple-handles.html  (revision 0)
6+++ demos/slider/multiple-handles.html  (revision 0)
7@@ -0,0 +1,51 @@
8+<!doctype html>
9+<html lang="en">
10+<head>
11+       <title>jQuery UI Slider - Range slider</title>
12+       <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
13+       <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
14+       <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
15+       <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
16+       <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
17+       <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
18+       <link type="text/css" href="../demos.css" rel="stylesheet" />
19+       <style type="text/css">
20+               #demo-frame > div.demo { padding: 10px !important; };
21+       </style>
22+       <script type="text/javascript">
23+       $(function() {
24+               $("#slider-range").slider({
25+                       min: 0,
26+                       max: 500,
27+                       values: [20, 75, 300, 400],
28+                       unittext: "dollar",
29+                       labels: ["estimated costs", "actual costs", "budget", "recommended budget"],
30+                       slide: function(event, ui) {
31+                               $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
32+                       }
33+               });
34+               $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
35+       });
36+       </script>
37+</head>
38+<body>
39+
40+<div class="demo" role="application">
41+
42+<p>
43+<label for="amount">Price range:</label>
44+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
45+</p>
46+
47+<div id="slider-range"></div>
48+
49+</div><!-- End demo -->
50+
51+<div class="demo-description">
52+
53+<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>
54+
55+</div><!-- End demo-description -->
56+
57+</body>
58+</html>
59Index: tests/unit/slider/slider_options.js
60===================================================================
61--- tests/unit/slider/slider_options.js (revision 3816)
62+++ tests/unit/slider/slider_options.js (working copy)
63@@ -89,7 +89,22 @@
64 });
65 
66 test("range", function() {
67-       ok(false, "missing test - untested code is broken code.");
68+       el = $('<div></div>');
69+       
70+       options = {
71+               max: 100,
72+               min: 0,
73+               orientation: 'horizontal',
74+               values: [10,50],
75+               range:true
76+       };
77+       
78+       el.slider(options);
79+       var handles = handle();
80+       ok(el.slider("option", "range") == options.range);
81+       equals((options.values.length), 2, "range is set to true, length of values is");
82+       el.slider('destroy');
83+
84 });
85 
86 test("step", function() {
87@@ -97,11 +112,52 @@
88 });
89 
90 test("value", function() {
91-       ok(false, "missing test - untested code is broken code.");
92+       el = $('<div></div>');
93+
94+       options = {
95+               max: 100,
96+               min: 0,
97+               orientation: 'horizontal',
98+               value: 5
99+       };
100+       
101+       el.slider(options);
102+       var handles = handle();
103+       ok(el.slider("option", "value") == options.value);
104+       equals(handles.attr("aria-valuenow"), 5, "the aria-valuenow is");
105+       el.slider('destroy');
106+
107 });
108 
109 test("values", function() {
110-       ok(false, "missing test - untested code is broken code.");
111+       el = $('<div></div>');
112+       
113+       options = {
114+               max: 100,
115+               min: 0,
116+               orientation: 'horizontal',
117+               step: 1,
118+               values: [10,50],
119+               range: true
120+       };
121+       
122+       el.slider(options, options.step);
123+       var handles = handle();
124+       var firstHandle = handles.eq(0);
125+       equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle is");
126+       var secondHandle = handles.eq(1);
127+       equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle is");
128+       firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
129+       equals(firstHandle.attr("aria-valuenow"), 11, "The aria-valuenow of the first handle after keydown RIGHT is" );
130+       firstHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
131+       equals(firstHandle.attr("aria-valuenow"), 10, "The aria-valuenow of the first handle after keydown LEFT is" );
132+       secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
133+       equals(secondHandle.attr("aria-valuenow"), 49, "The aria-valuenow of the second handle after keydown LEFT is");
134+       secondHandle.simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
135+       equals(secondHandle.attr("aria-valuenow"), 50, "The aria-valuenow of the second handle after keydown RIGHT is");
136+       
137+       el.slider('destroy');
138+
139 });
140 
141 })(jQuery);
142Index: demos/slider/default.html
143===================================================================
144--- demos/slider/default.html   (revision 3816)
145+++ demos/slider/default.html   (working copy)
146@@ -14,7 +14,7 @@
147        </style>
148        <script type="text/javascript">
149        $(function() {
150-               $("#slider").slider();
151+               $("#slider").slider({unittext : "MB", label : "file size"});
152        });
153        </script>
154 </head>
155Index: ui/jquery.ui.slider.js
156===================================================================
157--- ui/jquery.ui.slider.js      (revision 3816)
158+++ ui/jquery.ui.slider.js      (working copy)
159@@ -30,7 +30,9 @@
160                range: false,
161                step: 1,
162                value: 0,
163-               values: null
164+               values: null,
165+               unittext: null,
166+               name: null
167        },
168        _create: function() {
169 
170@@ -122,7 +124,9 @@
171                        });
172 
173                this.handles.each(function(i) {
174-                       $(this).data("index.ui-slider-handle", i);
175+                       $(this).data("index.ui-slider-handle", i).attr("aria-valuenow", o.values ? o.values[i] : o.value);
176+                       if (self.options.unittext)
177+                           $(this).data("index.ui-slider-handle", i).attr("aria-valuetext", (o.values ? o.values[i] : o.value) + " " + self.options.unittext);
178                });
179 
180                this.handles.keydown(function(event) {
181@@ -200,11 +204,37 @@
182                        }
183 
184                });
185-
186+                       var ariaDefaults = {role: 'slider',
187+                               "aria-valuemin": this.options.min,
188+                       "aria-valuemax": this.options.max,
189+           };
190+                       
191+                       if (this.options.value && this.options.label)
192+                           ariaDefaults.title = this.options.label;
193+                       else if (!this.options.labels && this.options.label) {
194+                       this.handles.each(function(i,e) {
195+                           
196+                           if (self.options.range && i < 2) {
197+                               $(this).attr('title', self.options.label + " " + (i == 0 ? "min" : "max"));
198+                           }
199+                           else
200+                               $(this).attr('title', self.options.label + " " + (i + 1))
201+                       });
202+                       }
203+                       else if (this.options.labels) {
204+                           this.handles.each(function(i,e) {
205+                               if (self.options.labels[i])
206+                                   $(this).attr("title", self.options.labels[i]);
207+                           });
208+                       }
209+                       
210+               this.handles.attr(ariaDefaults);   
211                this._refreshValue();
212 
213                this._animateOff = false;
214-
215+               this._updateAriaLimit("min");
216+               this._updateAriaLimit("max");
217+               
218        },
219 
220        destroy: function() {
221@@ -390,6 +420,9 @@
222                                var otherVal = this.values(index ? 0 : 1);
223                                if (allowed !== false) {
224                                        this.values(index, newVal, true);
225+                                       $(handle).attr("aria-valuenow",newVal);
226+                                       if (this.options.unittext)
227+                                           $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext);
228                                }
229                        }
230 
231@@ -403,6 +436,9 @@
232                                });
233                                if (allowed !== false) {
234                                        this.value(newVal);
235+                                       $(handle).attr("aria-valuenow",newVal);
236+                                       if (this.options.unittext)
237+                                           $(handle).attr("aria-valuetext", newVal + " " + this.options.unittext);
238                                }
239                                       
240                        }
241@@ -512,6 +548,10 @@
242                                this._refreshValue();
243                                this._animateOff = false;
244                                break;
245+                       case 'min':
246+                       case 'max':
247+                               this._updateAriaLimit(key);
248+                               break;
249                }
250 
251        },
252@@ -591,6 +631,12 @@
253                                        }
254                                }
255                                lastValPercent = valPercent;
256+                               
257+                               $(this).attr('aria-valuenow', self.values(i));
258+                               //since ranged thumbs can't pass each other, update ARIA min/max boundary for opposite handle
259+                               if (self.options.range && i < 2) {
260+                                       self.handles.eq(i == 0 ? 1 : 0).attr(i == 0 ? 'aria-valuemin' : 'aria-valuemax', self.values(i));
261+                               }
262                        });
263                } else {
264                        var value = this.value(),
265@@ -606,8 +652,22 @@
266                        (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
267                        (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate);
268                        (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
269+                       
270+                        this.handle.attr('aria-valuenow', value);
271                }
272 
273+       },
274+       
275+       _updateAriaLimit : function(key) {
276+               var value = this.options[key];
277+               if (this.range && this.options.values && this.options.values.length == 2) {
278+                       this.handles.eq(key == "min" ? 0 : 1).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value);
279+               }
280+               else {
281+                       this.handles.each(function(i) {
282+                               $(this).attr(key == "min" ? 'aria-valuemin' : 'aria-valuemax', value);
283+                       });
284+               }
285        }
286       
287 });
288Index: tests/unit/slider/slider_defaults.js
289===================================================================
290--- tests/unit/slider/slider_defaults.js        (revision 3816)
291+++ tests/unit/slider/slider_defaults.js        (working copy)
292@@ -14,7 +14,8 @@
293        range: false,
294        step: 1,
295        value: 0,
296-       values: null
297+       values: null,
298+       unittext: null
299 };
300 
301 commonWidgetTests('slider', { defaults: slider_defaults });
302Index: demos/slider/range.html
303===================================================================
304--- demos/slider/range.html     (revision 3816)
305+++ demos/slider/range.html     (working copy)
306@@ -19,6 +19,8 @@
307                        min: 0,
308                        max: 500,
309                        values: [75, 300],
310+                       unittext: "dollar",
311+                       label: "price range",
312                        slide: function(event, ui) {
313                                $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
314                        }
315@@ -29,7 +31,7 @@
316 </head>
317 <body>
318 
319-<div class="demo">
320+<div class="demo" role="application">
321 
322 <p>
323 <label for="amount">Price range:</label>
324Index: tests/unit/slider/slider_core.js
325===================================================================
326--- tests/unit/slider/slider_core.js    (revision 3816)
327+++ tests/unit/slider/slider_core.js    (working copy)
328@@ -289,4 +289,83 @@
329        el.slider("destroy");   
330 });
331 
332+test("ARIA Min and Max", function() {
333+  el = $('<div></div>');
334+ 
335+       options = {
336+               max: 54,
337+               min: 3,
338+               orientation: 'horizontal',
339+               value:15
340+       };
341+       
342+       el.slider(options);
343+       var handles = handle();
344+       
345+  equals(handles.attr("aria-valuemax"), 54, "The ARIA-valuemax should be 54" );
346+  equals(handles.attr("aria-valuemin"), 3, "The ARIA-valuemin should be 3" );
347+  equals(handles.attr("aria-valuenow"), 15, "The ARIA-valuenow should be 15" );
348+  el.slider('destroy');
349+});
350+
351+test("ARIA Min and Max with default options", function() {
352+  el = $('<div></div>');
353+       
354+       el.slider();
355+       var handles = handle();
356+
357+  equals(handles.attr("aria-valuemax"), 100, "The ARIA max should be 100" );
358+  equals(handles.attr("aria-valuemin"), 0, "The ARIA min should be 0" );
359+  equals(handles.attr("aria-valuenow"), 0, "The ARIA-valuenow should be 0" );
360+  el.slider('destroy');
361+});
362+
363+test("ARIA-valuenow after keydown LEFT", function(){
364+               el = $('<div></div>');
365+       options = {
366+               max: 5,
367+               min: -5,
368+               orientation: 'horizontal',
369+               step: 1,
370+               value: 4
371+       };
372+       el.slider(options);
373+       var handles = handle();
374+
375+       el.slider(options.value, options.min + options.step);
376+
377+       handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
378+       equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" );
379+
380+       handle().simulate("keydown", { keyCode: $.ui.keyCode.LEFT });
381+       equals(handles.attr("aria-valuenow"), 2, "The ARIA-valuenow should be 2" );
382+
383+       el.slider("destroy");   
384+
385+});
386+
387+test("ARIA-valuenow after keydown RIGHT", function(){
388+               el = $('<div></div>');
389+       options = {
390+               max: 5,
391+               min: -5,
392+               orientation: 'horizontal',
393+               step: 1,
394+               value: 2
395+       };
396+       el.slider(options);
397+       var handles = handle();
398+
399+       el.slider(options.value, options.min + options.step);
400+
401+       handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
402+       equals(handles.attr("aria-valuenow"), 3, "The ARIA-valuenow should be 3" );
403+
404+       handle().simulate("keydown", { keyCode: $.ui.keyCode.RIGHT });
405+       equals(handles.attr("aria-valuenow"), 4, "The ARIA-valuenow should be 4" );
406+
407+       el.slider("destroy");   
408+
409+});
410+
411 })(jQuery);