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

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/checkbox.js

@@ -29,15 +29,28 @@ SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
   name: 'checkbox',
   
   render: function(dataSource, context) {
-    var theme = dataSource.get('theme');
-    
+    var theme = dataSource.get('theme'),
+        view  = dataSource.get('view'),
+        ariaLabel,ariaLabeledBy;
+
+    if(view) {
+      ariaLabel     = view.get('ariaLabel');
+      ariaLabeledBy = view.get('ariaLabeledBy');
+    }
+
     var isSelected = dataSource.get('isSelected') || NO;
     var isActive = dataSource.get('isActive');
     var isDisabled = !dataSource.get('isEnabled');
 
     context.attr('role', 'checkbox');
     context.attr('aria-checked', isSelected.toString());
-    
+    if(ariaLabeledBy && ariaLabeledBy !== "") {
+      context.attr('aria-labelledby', ariaLabeledBy);
+    }
+    if(ariaLabel && ariaLabel !== "") {
+      context.attr('aria-label', ariaLabel);
+    }
+
     context.setClass({
       'sel': isSelected,
       'active': isActive,
@@ -52,15 +65,28 @@ SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
   },
   
   update: function(dataSource, jquery) {
-    var theme = dataSource.get('theme');
-    
+    var theme = dataSource.get('theme'),
+        view  = dataSource.get('view'),
+        ariaLabel,ariaLabeledBy;
+
+    if(view) {
+      ariaLabel     = view.get('ariaLabel');
+      ariaLabeledBy = view.get('ariaLabeledBy');
+    }
+
     var isSelected = dataSource.get('isSelected');
     var isActive = dataSource.get('isActive');
     var isDisabled = !dataSource.get('isEnabled');
 
     // address accessibility
     jquery.attr('aria-checked', isSelected.toString());
-    
+    if(ariaLabeledBy && ariaLabeledBy !== "") {
+      jquery.attr('aria-labelledby', ariaLabeledBy);
+    }
+    if(ariaLabel && ariaLabel !== "") {
+      jquery.attr('aria-label', ariaLabel);
+    }
+
     theme.labelRenderDelegate.update(dataSource, jquery.find('span.label'));
     
     // add class names

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/disclosure.js

@@ -9,8 +9,22 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
   name: 'disclosure',
   
   render: function(dataSource, context) {
-    var theme = dataSource.get('theme');
-    
+    var theme = dataSource.get('theme'),
+        value = dataSource.get('value'),
+        title = dataSource.get('title'),
+        view = dataSource.get('view'),
+        ariaLabel;
+
+    if(view) {
+      ariaLabel = view.get('ariaLabel');
+    }
+
+    //addresing accessibility
+    context.attr('aria-expanded', value);
+    if(ariaLabel && ariaLabel !== ""){
+      context.attr('aria-label', ariaLabel);
+    }
+
     if (dataSource.get('isSelected')) context.addClass('sel');
     
     var state = '';
@@ -25,7 +39,21 @@ SC.BaseTheme.disclosureRenderDelegate = SC.RenderDelegate.create({
   },
   
   update: function(dataSource, jquery) {
-    var theme = dataSource.get('theme');
+    var theme = dataSource.get('theme'),
+        value = dataSource.get('value'),
+        title = dataSource.get('title'),
+        view = dataSource.get('view'),
+        ariaLabel;
+
+    if(view) {
+      ariaLabel = view.get('ariaLabel');
+    }
+
+    //addresing accessibility
+    jquery.attr('aria-expanded', value);
+    if(ariaLabel && ariaLabel !== ""){
+      jquery.attr('aria-label', ariaLabel);
+    }
 
     if (dataSource.get('isSelected')) jquery.addClass('sel');
 

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/progress.js

@@ -42,7 +42,10 @@ SC.BaseTheme.PROGRESS_OFFSET_RANGE = 24;
 */
 SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
   render: function(dataSource, context) {
-    var theme = dataSource.get('theme');
+    var theme    = dataSource.get('theme'),
+        valueMax = dataSource.get('maximum'),
+        valueMin = dataSource.get('minimum'),
+        valueNow = dataSource.get('value');
     
     var inner, animatedBackground, value = dataSource.get('value') * 100, 
         cssString, backPosition,
@@ -52,6 +55,12 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
         offsetRange = theme.PROGRESS_OFFSET_RANGE,
         offset = (isIndeterminate && isRunning) ? 
                 (Math.floor(Date.now()/75)%offsetRange-offsetRange) : 0;
+
+    //addressing accessibility
+    context.attr('aria-valuemax', valueMax);
+    context.attr('aria-valuemin', valueMin);
+    context.attr('aria-valuenow', valueNow);
+    context.attr('aria-valuetext', valueNow);
       
     // offsetRange from dataSource only supported for backwards-compatibility
     if (dataSource.get('offsetRange')) {
@@ -93,7 +102,8 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
   
   update: function(dataSource, $) {
     
-    var theme = dataSource.get('theme');
+    var theme    = dataSource.get('theme'),
+        valueNow = dataSource.get('value');
     
     var inner, value, cssString, backPosition,
         animatedBackground = theme.PROGRESS_ANIMATED_BACKGROUND_MATRIX,
@@ -119,7 +129,9 @@ SC.BaseTheme.progressRenderDelegate = SC.RenderDelegate.create({
       'sc-complete': (value >= 100)
     };
     
-    
+    //addressing accessibility
+    $.attr('aria-valuenow', valueNow);
+    $.attr('aria-valuetext', valueNow);
     
     $.setClass(classNames);
     inner = $.find('.sc-inner');

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/radio.js

@@ -32,18 +32,29 @@ SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
     var theme = dataSource.get('theme');
     
     var isSelected = dataSource.get('isSelected'),
-        width = dataSource.get('width');
-    
+        width = dataSource.get('width'),
+        title = dataSource.get('title'),
+        value = dataSource.get('value'),
+        ariaLabeledBy = dataSource.get('ariaLabeledBy'),
+        ariaLabel     = dataSource.get('ariaLabel');
+
     context.setClass({
       active: dataSource.get('isActive'),
       mixed: dataSource.get('isMixed'),
       sel: dataSource.get('isSelected'),
       disabled: !dataSource.get('isEnabled')
     });
-    
+
+    //accessing accessibility
     context.attr('role', 'radio');
     context.attr('aria-checked', isSelected);
-    
+    if(ariaLabel && ariaLabel !== "") {
+      context.attr('aria-label', ariaLabel);
+    }
+    if(ariaLabeledBy && ariaLabeledBy !== "") {
+      context.attr('aria-labelledby', ariaLabeledBy);
+    }
+
     if (width) context.css('width', width);
     
     context.push('<span class = "button"></span>');
@@ -56,8 +67,13 @@ SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
   update: function(dataSource, jquery) {
     var theme = dataSource.get('theme');
     
-    var isSelected = dataSource.get('isSelected'), width = dataSource.get('width');
-    
+    var isSelected = dataSource.get('isSelected'),
+        width = dataSource.get('width'),
+        title = dataSource.get('title'),
+        value = dataSource.get('value'),
+        ariaLabeledBy = dataSource.get('ariaLabeledBy'),
+        ariaLabel     = dataSource.get('ariaLabel');
+
     jquery.setClass({
       active: dataSource.get('isActive'),
       mixed: dataSource.get('isMixed'),
@@ -66,7 +82,12 @@ SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
     });
     
     jquery.attr('aria-checked', isSelected);
-    
+    if(ariaLabel !== ""){
+      jquery.attr('aria-label', ariaLabel);
+    }
+    if(ariaLabeledBy !== "") {
+      jquery.attr('aria-labelledby', ariaLabeledBy);
+    }
     jquery.css('width', width ? width : null);
     
     theme.labelRenderDelegate.update(dataSource, jquery.find('.sc-button-label'));

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/segmented.js

@@ -74,4 +74,4 @@ SC.BaseTheme.segmentedRenderDelegate = SC.Object.create({
     // Default not found
     return -1;
   }
-});
+});

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/slider.js

@@ -21,19 +21,38 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
   name: 'slider',
   
   render: function(dataSource, context) {
-    var blankImage = SC.BLANK_IMAGE_URL;
+    var blankImage  = SC.BLANK_IMAGE_URL,
+        valueMax    = dataSource.get('maximum'),
+        valueMin    = dataSource.get('minimum'),
+        valueNow    = dataSource.get('value');
+
     context.push('<span class="sc-inner">',
                   '<span class="sc-leftcap"></span>',
                   '<span class="sc-rightcap"></span>',
                   '<img src="', blankImage, 
                   '" class="sc-handle" style="left: ', dataSource.get('value'), '%" />',
                   '</span>');
+
+    //addressing accessibility
+    context.attr('aria-valuemax', valueMax);
+    context.attr('aria-valuemin', valueMin);
+    context.attr('aria-valuenow', valueNow);
+    context.attr('aria-valuetext', valueNow);
+    context.attr('aria-orientation', 'horizontal');
+
   },
   
   update: function(dataSource, jquery) {
+
+    var valueNow    = dataSource.get('value');
+
     if (dataSource.didChangeFor('sliderRenderDelegate', 'value')) {
       jquery.find(".sc-handle").css('left', dataSource.get('value') + "%");
     }
+
+    //addressing accessibility
+    jquery.attr('aria-valuenow', valueNow);
+    jquery.attr('aria-valuetext', valueNow);
   }
   
 });

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/well.js

@@ -5,11 +5,9 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-SC.BaseTheme.Well = SC.BaseTheme.subtheme('well');
-
 // the 'well'-styled container
-SC.BaseTheme.Well.containerRenderDelegate = SC.Object.create({
-  name: 'container',
+SC.BaseTheme.wellRenderDelegate = SC.Object.create({
+  name: 'well',
   
   render: function(dataSource, context) {
     context.push("<div class='top-left-edge'></div>",

data/lib/frameworks/sproutcore/frameworks/desktop/tests/panes/alert/ui.js

@@ -116,37 +116,43 @@ test("AlertPane.info with icon, message, description, caption and 1 button (pass
   pane.dismiss();
 });
 
-test("users interaction with mutiple alert panes with 1-3 buttons", function() {
-  
-  var delegate = SC.Object.create({
-    
-    threeButtonAlertPane: function() {
-      pane = SC.AlertPane.warn("AlertPane.warn title", 'Click OK to see this alert pane again.  \nClick Other... to see other alert panes.', 'Click cancel to dismiss.', "OK", "Cancel", 'Other...', this);      
-    },
-
-    twoButtonAlertPane: function() {
-      pane = SC.AlertPane.error("AlertPane.error title", 'Click OK to see one button alert pane.', 'Click cancel to dismiss.', "OK", "Cancel", delegate);      
-    },
-
-    oneButtonAlertPane: function() {
-      pane = SC.AlertPane.info("AlertPane.info title", 'Click OK to dismiss.', delegate);      
-    },
-   
-    alertPaneDidDismiss: function(alert, status) {
-      //console.log("%@.alertDidDismiss - %@".fmt(alert, status));
-      switch(status) {
-        case SC.BUTTON1_STATUS:
-          if(alert.icon && alert.icon.indexOf('alert')!=-1) this.invokeLater(this.threeButtonAlertPane, 1000);
-          if(alert.icon && alert.icon.indexOf('error')!=-1) this.oneButtonAlertPane();
-          break;
-        case SC.BUTTON3_STATUS:
-          this.twoButtonAlertPane();
-          break;
-      }
-    }
-  });
-
-  SC.RunLoop.begin();
-  delegate.threeButtonAlertPane();
-  SC.RunLoop.end();
-}) ;
+test("Alert pane should have role as alertdialog", function() {
+  pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, this);      
+  equals(pane.$().attr('role'), 'alertdialog', 'Alert pane should have role as alertdialog');
+  pane.dismiss();
+});
+
+// test("users interaction with mutiple alert panes with 1-3 buttons", function() {
+//   
+//   var delegate = SC.Object.create({
+//     
+//     threeButtonAlertPane: function() {
+//       pane = SC.AlertPane.warn("AlertPane.warn title", 'Click OK to see this alert pane again.  \nClick Other... to see other alert panes.', 'Click cancel to dismiss.', "OK", "Cancel", 'Other...', this);      
+//     },
+// 
+//     twoButtonAlertPane: function() {
+//       pane = SC.AlertPane.error("AlertPane.error title", 'Click OK to see one button alert pane.', 'Click cancel to dismiss.', "OK", "Cancel", delegate);      
+//     },
+// 
+//     oneButtonAlertPane: function() {
+//       pane = SC.AlertPane.info("AlertPane.info title", 'Click OK to dismiss.', delegate);      
+//     },
+//    
+//     alertPaneDidDismiss: function(alert, status) {
+//       //console.log("%@.alertDidDismiss - %@".fmt(alert, status));
+//       switch(status) {
+//         case SC.BUTTON1_STATUS:
+//           if(alert.icon && alert.icon.indexOf('alert')!=-1) this.invokeLater(this.threeButtonAlertPane, 1000);
+//           if(alert.icon && alert.icon.indexOf('error')!=-1) this.oneButtonAlertPane();
+//           break;
+//         case SC.BUTTON3_STATUS:
+//           this.twoButtonAlertPane();
+//           break;
+//       }
+//     }
+//   });
+// 
+//   SC.RunLoop.begin();
+//   delegate.threeButtonAlertPane();
+//   SC.RunLoop.end();
+// }) ;

data/lib/frameworks/sproutcore/frameworks/desktop/tests/panes/menu/ui.js

@@ -221,3 +221,38 @@ test('Automatic Closing', function() {
   ok(!menu.get('isVisibleInWindow'), 'menu should close if anywhere other than a menu item is clicked');
 });
 
+test('aria-role attribute', function() {
+  var menuPane = SC.MenuPane.create({
+    layout: { width: 200 },
+    items: items,
+    itemCheckboxKey: 'isChecked'
+  }), menuItems,normalItem, itemWithCheckBox, separatorItem;
+  menuPane.popup();
+
+  equals(menuPane.$().attr('role'), 'menu', "menu pane should have role set");
+
+  menuItems = menuPane.get('menuItemViews');
+  normalItem        = menuItems[0];
+  itemWithCheckBox  = menuItems[1];
+  separatorItem     = menuItems[3];
+
+  equals(normalItem.$().attr('role'), 'menuitem', "normal menuitem has correct role set");
+  equals(itemWithCheckBox.$().attr('role'), 'menuitemcheckbox', "menuitem with checkbox has correct role set");
+  equals(separatorItem.$().attr('role'), 'separator', "separator menuitem has correct role set");
+  clickOn(menuPane);
+});
+
+test('aria-checked attribute', function() {
+  var menuPane = SC.MenuPane.create({
+    layout: { width: 200 },
+    items: items,
+    itemCheckboxKey: 'isChecked'
+  }),itemWithCheckBox;
+  menuPane.popup();
+
+  itemWithCheckBox = menuPane.get('menuItemViews')[1];
+
+  equals(itemWithCheckBox.$().attr('aria-checked'), "true", "checked menuitem has aria-checked attribute set");
+  clickOn(menuPane);
+});
+

data/lib/frameworks/sproutcore/frameworks/desktop/tests/panes/panel/ui.js

@@ -38,3 +38,46 @@ test("verify panel content container is visible at correct location with right s
   pane.remove();
 }) ;
 
+test("Verify panel pane has aria role set", function() {
+  var pane = SC.PanelPane.create({
+    layout: { width: 400, height: 200, centerX: 0, centerY: 0 },
+    contentView: SC.View.extend({
+    })
+  });
+  pane.append();
+
+  equals(pane.$().attr('role'), 'dialog', "panel pane has role attribute set");
+
+  pane.remove();
+
+});
+
+test("Verify panel pane has aria-labelledby attribute set, when ariaLabeledBy is provided", function() {
+  var pane = SC.PanelPane.create({
+    layout: { width: 400, height: 200, centerX: 0, centerY: 0 },
+    contentView: SC.View.extend({
+    }),
+    ariaLabeledBy: "Panel is labelled by this value for voiceover"
+  });
+  pane.append();
+
+  equals(pane.$().attr('aria-labelledby'), 'Panel is labelled by this value for voiceover', "panel pane has aria-labelledby attribute set");
+
+  pane.remove();
+
+});
+
+test("Verify panel pane has aria-describedby attribute set, when ariaDescribedBy is provided", function() {
+  var pane = SC.PanelPane.create({
+    layout: { width: 400, height: 200, centerX: 0, centerY: 0 },
+    contentView: SC.View.extend({
+    }),
+    ariaDescribedBy: "Panel is described by this value for voiceover"
+  });
+  pane.append();
+
+  equals(pane.$().attr('aria-describedby'), 'Panel is described by this value for voiceover', "panel pane has aria-describedby attribute set");
+
+  pane.remove();
+
+});