sproutcore 1.5.0.pre.4 → 1.5.0.pre.4.1

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/button/ui.js

@@ -42,6 +42,22 @@ var pane = SC.ControlTestPane.design({height:24})
   .add("title,toolTip", SC.ButtonView, { 
     title: "Hello World", toolTip: 'Hello World is my tool tip'
   })
+
+  .add("aria-role", SC.ButtonView, {
+    title: 'aria-role',
+    ariaRole: 'button'
+  })
+
+  .add("aria-pressed", SC.ButtonView, {
+    title: 'aria-pressed',
+    ariaRole: 'button'
+  })
+
+  .add("aria-haspopup",SC.PopupButtonView, {
+    title: 'aria-haspopup',
+    ariaRole: 'button',
+    menu: ['a','b']
+  });
   // 
   // .add("autocontrolsize", SC.ButtonView, { 
   //   controlSize: SC.AUTO_CONTROL_SIZE,
@@ -67,6 +83,9 @@ test("Check that all button are visible", function() {
   ok(pane.view('title,icon,default').get('isVisibleInWindow'), 'title,icon,default.isVisibleInWindow should be YES');
   ok(pane.view('title,icon,selected').get('isVisibleInWindow'), 'title.icon,selected.isVisibleInWindow should be YES');
   ok(pane.view('title,toolTip').get('isVisibleInWindow'), 'title,toolTip.isVisibleInWindow should be YES');
+  ok(pane.view('aria-role').get('isVisibleInWindow'), 'aria-role.isVisibleInWindow should be YES');
+  ok(pane.view('aria-pressed').get('isVisibleInWindow'), 'aria-pressed.isVisibleInWindow should be YES');
+  ok(pane.view('aria-haspopup').get('isVisibleInWindow'), 'aria-haspopup.isVisibleInWindow should be YES');
 });
   
 
@@ -170,6 +189,34 @@ test("Check if title,toolTip has the tool tip set", function() {
   ok(viewElem.attr("title") == 'Hello World is my tool tip', 'title,toolTip has the expected tool tip set.');
 });
 
+test("Check if aria role is set to button", function() {
+  var viewElem=pane.view('aria-role').$();
+  ok(viewElem.attr("role") == 'button', 'aria-role is set to button.');
+});
+
+test("Check if aria haspopup is set to button", function() {
+  var viewElem=pane.view('aria-haspopup').$();
+  ok(viewElem.attr("aria-haspopup") == 'true', 'aria-haspopup should be true.');
+});
+
+test("aria-pressed attribute to be false by default", function(){
+  var b = pane.view('aria-pressed').$();
+  equals(b.attr("aria-pressed") , "false", "should have false by default");
+});
+
+test("mouseDown and then mouseUp anywhere in the button should toggle the aria-pressed", function() {
+  var b = pane.view('aria-pressed');
+  var elem = b.get('layer');
+
+  SC.Event.trigger(elem, 'mousedown');
+  equals(b.$().attr('aria-pressed'), 'true', 'aria-pressed should be true when mousedown');
+
+  SC.Event.trigger(elem,'mouseup');
+  equals(b.$().attr('aria-pressed'), 'false', 'aria-pressed should be false when mouseup');
+
+  elem = null ;
+});
+
 // test("Check if AUTO_CONTROL_SIZE button automatically calculated the correct controlSize", function() {
 //   var viewElem=pane.view('autocontrolsize').$();
 //   ok(viewElem.hasClass('sc-huge-size'), 'HUGE button has sc-huge-size class.');

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/checkbox/methods.js

@@ -98,17 +98,19 @@ test("isSelected should alter sel classname and sync with value property", funct
 test("mouseDown and then mouseUp anywhere in the checkbox should toggle the selection", function() {
 
   var elem = view.get('layer');
-  
+
   SC.Event.trigger(elem, 'mousedown');
   ok(view.get('isActive'), 'view should be active');
   ok(view.get('value'), 'value should not change yet');
-  
+  equals(view.$().attr('aria-checked'), 'true', 'aria-checked should be true');
+
   // simulate mouseUp and browser-native change to control
   SC.Event.trigger(elem,'mouseup');
-  
+
   ok(!view.get('isActive'), 'view should no longer be active');
   ok(!view.get('value'), 'value should change to NO');
-  
+  equals(view.$().attr('aria-checked'), 'false', 'aria-checked should be false');
+
   elem = null ;
 });
 
@@ -122,15 +124,3 @@ test("isEnabled=NO should add disabled attr to input", function() {
   view.mouseUp();
   ok(view.get('value'), 'value should not change when clicked');
 });
-
-
-
-
-
-
-
-
-
-
-
-

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/checkbox/ui.js

@@ -36,6 +36,16 @@ var pane = SC.ControlTestPane.design()
     useStaticLayout: YES, 
     layout: { width: 'auto', right: 'auto' },
     title: 'Different Length Title'
+  })
+
+  .add("role", SC.CheckboxView, {
+    value: YES, title: "role-checkbox"
+  })
+
+  .add("aria-label", SC.CheckboxView, {
+    value: NO, title: "aria-label",
+    ariaLabel:'TEXT BOX',
+    ariaLabeledBy: 'TEXT BOX1'
   });
 
 pane.show(); // add a test to show the test pane
@@ -92,4 +102,15 @@ test("disabled - selected", function() {
   var label = view.$('span.label');
   equals(label.text(), 'Hello World', 'should have label');
 });
+
+test("role", function() {
+  var view = pane.view('role');
+  equals(view.$().attr('role'),'checkbox', 'should have role as checkbox');
+});
+
+test("aria-label", function() {
+  var view = pane.view('aria-label');
+  equals(view.$().attr('aria-label'),'TEXT BOX', 'should have ariaLabel as TEXT-BOX');
+  equals(view.$().attr('aria-labelledby'),'TEXT BOX1', 'should have ariaLabeledby as TEXT-BOX1');
+});
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/disclosure/ui.js

@@ -20,7 +20,26 @@
 		})
 		.add("selected - disabled", SC.DisclosureView, {
 	      value: YES, isEnabled: NO
-		});
+		})
+
+    .add("aria-role", SC.DisclosureView, {
+        value: NO, isEnabled: YES,
+        ariaLabel:'Disclosure'
+    })
+
+    .add("aria-label", SC.DisclosureView, {
+        value: YES, isEnabled: YES,
+        ariaLabel:'Disclosure'
+    })
+    .add("aria-expanded", SC.DisclosureView, {
+        value: YES, isEnabled: YES,
+        ariaLabel:'Disclosure'
+    })
+    .add("aria-expanded-disabled", SC.DisclosureView, {
+        value: NO, isEnabled: NO,
+        ariaLabel:'Disclosure'
+    });
+
 	pane.show();
 	
 	module("TODO: Test SC.DisclosureView UI", pane.standardSetup());
@@ -61,4 +80,25 @@
 	    // ok(input.attr('disabled'), 'input should be disabled');
 	  });
 
+    test("aria role should be button for disclosure", function() {
+      var view = pane.view('aria-role');
+      equals(view.$().attr('role'), 'button', 'aria-role should be button');
+    });
+
+    test("aria label should be present", function() {
+      var view = pane.view('aria-label');
+      equals(view.$().attr('aria-label'), 'Disclosure', 'aria-label should be Disclosure');
+    });
+
+    test("aria pressed should be true if value is yes", function() {
+      var view = pane.view('aria-expanded');
+      equals(view.$().attr('aria-expanded'), 'true', 'aria-expanded should be true');
+    });
+
+    test("aria pressed should be false if value is no while the disclosure is disabled", function() {
+      var view = pane.view('aria-expanded-disabled');
+      equals(view.get('ariaLabel'), 'Disclosure', 'aria-label should be Disclosure even if it is disabled');
+      equals(view.$().attr('aria-expanded'), 'false', 'aria-expanded should be false');
+    });
+
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/progress/ui.js

@@ -42,6 +42,43 @@ var pane = SC.ControlTestPane.design()
     minimum: 0,
     maximum: 50
   })
+  .add("progress aria-role", SC.ProgressView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 10,
+    minimum: 0,
+    maximum: 50
+  })
+  .add("progress aria-valuemax", SC.ProgressView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 40,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress aria-valuemin", SC.ProgressView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 20,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress aria-valuenow", SC.ProgressView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 40,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress aria-valuetext", SC.ProgressView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 20,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress aria-disabled", SC.ProgressView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100,
+    isEnabled: NO
+  })
   
   // Slider View UI
   .add("slider basic", SC.SliderView, {
@@ -69,6 +106,42 @@ var pane = SC.ControlTestPane.design()
     minimum: 0, 
     maximum: 100,
     step: 20
+  })
+  .add("slider aria-role", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 10,
+    minimum: 0,
+    maximum: 50
+  })
+  .add("slider aria-valuemax", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 40,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-valuemin", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 20,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-valuenow", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 40,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-valuetext", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 20,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-orientation", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100
   });
 
 pane.show(); // add a test to show the test pane
@@ -242,6 +315,31 @@ test("changing value to a string", function() {
   setTimeout(assertions, 200);
 });
 
+test("Check if aria role is set to progress view", function() {
+  var viewElem = pane.view('progress aria-role').$();
+  ok(viewElem.attr('role') === 'progressbar', 'aria-role is set to the progress view');
+});
+
+test("Check if attribute aria-valuemax is set correctly", function() {
+  var viewElem = pane.view('progress aria-valuemax').$();
+  equals(viewElem.attr('aria-valuemax'), 100, 'aria-valuemax should be 100');
+});
+
+test("Check if attribute aria-valuemin is set correctly", function() {
+  var viewElem = pane.view('progress aria-valuemin').$();
+  equals(viewElem.attr('aria-valuemin'), 0, 'aria-valuemin should be 0');
+});
+
+test("Check if attribute aria-valuenow is set correctly", function() {
+  var viewElem = pane.view('progress aria-valuenow').$();
+  equals(viewElem.attr('aria-valuenow'), 0.4, 'aria-valuenow should be 0.4');
+});
+
+test("Check if attribute aria-valuetext is set correctly", function() {
+  var viewElem = pane.view('progress aria-valuetext').$();
+  equals(viewElem.attr('aria-valuetext'), 0.2, 'aria-valuetext should be 0.2');
+});
+
 
 // ..........................................................
 // SC.SliderView
@@ -284,4 +382,34 @@ test("basic step 20", function() {
   ok(view.$('.sc-handle'), 'should have sc-handle class');
   equals(view.$('.sc-handle').css('left'), '60%', 'left of sc-handle should be 60%');
 });
+
+test("Check if aria role is set to slider view", function() {
+  var viewElem = pane.view('slider aria-role').$();
+  ok(viewElem.attr('role') === 'slider', 'aria-role is set to the slider  view');
+});
+
+test("Check if attribute aria-valuemax is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuemax').$();
+  equals(viewElem.attr('aria-valuemax'), 100, 'aria-valuemax should be 100');
+});
+
+test("Check if attribute aria-valuemin is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuemin').$();
+  equals(viewElem.attr('aria-valuemin'), 0, 'aria-valuemin should be 0');
+});
+
+test("Check if attribute aria-valuenow is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuenow').$();
+  equals(viewElem.attr('aria-valuenow'), 40, 'aria-valuenow should be 40');
+});
+
+test("Check if attribute aria-valuetext is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuetext').$();
+  equals(viewElem.attr('aria-valuetext'), 20, 'aria-valuetext should be 20');
+});
+
+test("Check if attribute aria-orientation is set correctly", function() {
+  var viewElem = pane.view('slider aria-orientation').$();
+  equals(viewElem.attr('aria-orientation'), "horizontal", 'aria-orientation should be horizontal');
+});
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/radio/ui.js

@@ -9,8 +9,8 @@
 
 htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
 
-var itemList = [{ title: "Red", value: "red", enabled: YES }, { title: "Green", value: "green" }, { title: "Blue", value: "blue" }],
-itemList2 = [{ title: "Cyan", value: "cyan", enabled: YES }, { title: "Magenta", value: "magenta" }, { title: "Yellow", value: "yellow" },{ title: "blacK", value: "black"}],
+var itemList = [{ title: "Red", value: "red", enabled: YES,ariaLabeledBy: "color" }, { title: "Green", value: "green",ariaLabeledBy: "color"  }, { title: "Blue", value: "blue",ariaLabeledBy: "color" }],
+itemList2 = [{ title: "Cyan", value: "cyan", enabled: YES,ariaLabel: "itemList1" }, { title: "Magenta", value: "magenta",ariaLabel: "itemList1"  }, { title: "Yellow", value: "yellow",ariaLabel: "itemList1"  },{ title: "blacK", value: "black",ariaLabel: "itemList1" }],
 itemList3 = [{ title: "Red", value: "red", enabled: YES, width: 30 }, { title: "Green", value: "green", width: 50 }, { title: "Blue", value: "blue", width: 40 }];
 
 var pane = SC.ControlTestPane.design()
@@ -67,8 +67,45 @@ var pane = SC.ControlTestPane.design()
     itemTitleKey: 'title',
     itemValueKey: 'value',
     itemWidthKey: 'width'
-  });
+  })
+
+  .add("aria-role-group", SC.RadioView, {
+    value: "",
+    isEnabled: YES,
+    items: itemList,
+    itemTitleKey: 'title',
+    itemValueKey: 'value',
+    layoutDirection: SC.LAYOUT_HORIZONTAL
+  })
+
+  .add("aria-role-radio", SC.RadioView, {
+    value: "",
+    isEnabled: YES,
+    items: itemList,
+    itemTitleKey: 'title',
+    itemValueKey: 'value',
+    layoutDirection: SC.LAYOUT_HORIZONTAL
+  })
 
+  .add("aria-label", SC.RadioView, {
+    value: "",
+    isEnabled: YES,
+    items: itemList2,
+    itemAriaLabelKey: 'ariaLabel',
+    itemTitleKey: 'title',
+    itemValueKey: 'value',
+    layoutDirection: SC.LAYOUT_HORIZONTAL
+  })
+
+  .add("aria-labeledBy", SC.RadioView, {
+    value: "",
+    isEnabled: YES,
+    items: itemList,
+    itemAriaLabeledByKey: 'ariaLabeledBy',
+    itemTitleKey: 'title',
+    itemValueKey: 'value',
+    layoutDirection: SC.LAYOUT_HORIZONTAL
+  });
 pane.show(); // add a test to show the test pane
 
 pane.verifyButtons = function verifyButtons(view, items) {
@@ -250,4 +287,57 @@ test("item widths", function() {
     equals(SC.$(elem).width(), widths[idx], 'radio button %@ should width specified by itemWidthKey'.fmt(idx, widths[idx]));
     idx++;
   });
+ }); 
+
+test("aria-role-group", function() {
+  var radioButton = pane.view('aria-role-group');
+  equals(radioButton.$().attr('role'),'radiogroup', 'role should be radiogroup');
+});
+
+test("aria-role-radio", function() {
+  var radioButtons = pane.view('aria-role-radio').$('.sc-radio-button');
+
+  var i = 0;
+  radioButtons.forEach(function(radioInput) {
+    var theInput = SC.$(radioInput),
+      idx = parseInt(theInput.attr('index'),0),
+      buttonValue = theInput.attr('value');
+
+    equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
+    equals(theInput.attr('role'), 'radio', 'radio button #%@ should have role as radio'.fmt(idx));
+
+    i++;
+  });
+});
+
+test("aria-label", function() {
+  var radioButtons = pane.view('aria-label').$('.sc-radio-button');
+
+  var i = 0;
+  radioButtons.forEach(function(radioInput) {
+    var theInput = SC.$(radioInput),
+      idx = parseInt(theInput.attr('index'),0),
+      buttonValue = theInput.attr('value');
+
+    equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
+    equals(theInput.attr('aria-label'), 'itemList1', 'radio button #%@ should have aria-label as itemList1'.fmt(idx));
+
+    i++;
+  });
+});
+
+test("aria-labeledBy", function() {
+  var radioButtons = pane.view('aria-labeledBy').$('.sc-radio-button');
+
+  var i = 0;
+  radioButtons.forEach(function(radioInput) {
+    var theInput = SC.$(radioInput),
+      idx = parseInt(theInput.attr('index'),0),
+      buttonValue = theInput.attr('value');
+
+    equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
+    equals(theInput.attr('aria-labelledby'), 'color', 'radio button #%@ should have aria-labelledby as color'.fmt(idx));
+
+    i++;
+  });
 });