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

data/lib/frameworks/sproutcore/frameworks/foundation/views/field.js

@@ -32,6 +32,14 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   */
   isTextArea: NO,
 
+  /**
+    The WAI-ARIA role for field view. This property's value should not be
+    changed.
+
+    @property {String}
+  */
+  ariaRole: 'textbox',
+
   _field_isMouseDown: NO,
 
   /**
@@ -312,7 +320,18 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     var ret = this.getFieldValue() ;
     if (this.objectForFieldValue) ret = this.objectForFieldValue(ret);
     return ret ;
+  },
+
+  render: function(context, firstTime) {
+    sc_super();
+
+    //addressing accessibility
+    if(firstTime) {
+      context.attr('aria-multiline', this.get('isTextArea'));
+      context.attr('aria-disabled', !this.get('isEnabled'));
+    }
   }
+
   
 });
 

data/lib/frameworks/sproutcore/frameworks/foundation/views/image.js

@@ -48,6 +48,8 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
 /** @scope SC.ImageView.prototype */ {
 
   classNames: 'sc-image-view',
+  
+  ariaRole: 'img',
 
   displayProperties: 'frame image imageValue innerFrame status toolTip type'.w(),
 

data/lib/frameworks/sproutcore/frameworks/foundation/views/label.js

@@ -32,7 +32,15 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditorDelegate, SC.InlineEdit
 
   displayProperties: 'displayTitle textAlign fontWeight icon escapeHTML needsEllipsis hint'.w(),
 
+  /**
+    The WAI-ARIA attribute for the label view. This property is assigned to
+    'aria-labelledby' attribute, which defines a string value that labels the
+    element. Used to support voiceover. It should be assigned a non-empty string,
+    if the 'aria-labelledby' attribute has to be set for the element.
 
+    @property {String}
+  */
+  ariaLabeledBy: null,
   
   isEditable: NO,
   
@@ -63,16 +71,14 @@ SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditorDelegate, SC.InlineEdit
     This is a default value that can be overridden by the
     settings on the owner view.
   */
-  escapeHTML: true,
+  escapeHTML: YES,
   escapeHTMLBindingDefault: SC.Binding.oneWay().bool(),
 
   /**
     If true, then the value will be localized.
-    
-    This is a default default that can be overidden by the
-    settings in the owner view.
+    This is a default that can be overidden by the settings in the owner view.
   */
-  localize: false,
+  localize: NO,
   localizeBindingDefault: SC.Binding.oneWay().bool(),
   
   /**

data/lib/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -27,14 +27,32 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   classNames: ['sc-text-field-view'],
   isTextField: YES,
 
+  /**
+    The WAI-ARIA role for text field view. This property's value should not be
+    changed.
+
+    @property {String}
+  */
+  ariaRole: 'textbox',
+
   // ..........................................................
   // PROPERTIES
   //
 
+  /**
+    When applyImmediately is turned on, every keystroke will set the value
+    of the underlying object. Turning it off will only set the value on blur.
+    
+    @property
+    @type String
+  */
   applyImmediately: YES,
 
   /**
     If YES, the field will hide its text from display. The default value is NO.
+    
+    @property
+    @type Boolean
   */
   isPassword: NO,
 
@@ -42,29 +60,56 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     If YES then allow multi-line input.  This will also change the default
     tag type from "input" to "textarea".  Otherwise, pressing return will
     trigger the default insertion handler.
+    
+    @property
+    @type Boolean
   */
   isTextArea: NO,
 
   /**
-    The hint to display while the field is not active.  Can be a loc key.
+    The hint to display while the field is not active.
+    
+    @property
+    @type String
   */
   hint: '',
 
+  /*
+  * Localizes the hint if necessary.
+  */
+  formattedHint: function() {
+    var hint = this.get('hint');
+
+    return this.get('localize') ? hint.loc() : hint;
+  }.property('hint', 'localize').cacheable(),
+
+  /*
+  * Whether the hint should be localized or not.
+  */
+  localize: YES,
+
   /**
     If YES then the text field is currently editing.
+    
+    @property
+    @type Boolean
   */
   isEditing: NO,
   
-  hintON:YES,
-  
   /**
     If you set this property to false the tab key won't trigger its default 
     behavior (tabbing to the next field).
+    
+    @property
+    @type Boolean
   */
-  defaultTabbingEnabled:YES,
+  defaultTabbingEnabled: YES,
   
   /**
     Enabled context menu for textfields.
+    
+    @property
+    @type Boolean
   */
   isContextMenuEnabled: YES,
 
@@ -73,6 +118,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     If false, 'value' is only updated when commitEditing() is called (this
     is called automatically when the text field loses focus), or whenever
     the return key is pressed while editing the field.
+    
+    @property
+    @type Boolean
   */
   continuouslyUpdatesValue: YES,
 
@@ -80,6 +128,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     If no, will not allow transform or validation errors (SC.Error objects)
     to be passed to 'value'.  Upon focus lost, the text field will revert
     to its previous value.
+    
+    @property
+    @type Boolean
   */
   allowsErrorAsValue: YES,
 
@@ -102,6 +153,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     defined on the "padding" element.  If you would like to customize the
     amount of left padding used when the accessory view is visible, make the
     accessory view wider, with empty space on the right.
+    
+    @property
+    @type SC.View
   */
   leftAccessoryView: null,
 
@@ -125,26 +179,45 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     defined on the "padding" element.  If you would like to customize the
     amount of right padding used when the accessory view is visible, make the
     accessory view wider, with empty space on the left.
+    
+    @property
+    @type SC.View
   */
   rightAccessoryView: null,
   
-  
   /**
     This property will enable disable HTML5 spell checking if available on the 
-    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it  
-  */
+    browser. As of today Safari 4+, Chrome 3+ and Firefox 3+ support it
     
+    @property
+    @type Boolean
+  */
   spellCheckEnabled: YES,
   
+  /**
+    Maximum amount of characters this field will allow.
+    
+    @property
+    @type Number
+  */
   maxLength: 5096,
   
+  /**
+    Whether to render a border or not.
+    
+    @property
+    @type Boolean
+  */
+  shouldRenderBorder: YES,
   
-  _isFocused: NO,
-  
+  /** @private
+    Whether to show hint or not
+  */
+  _hintON: YES,
   
   init: function() {
     var val = this.get('value');
-    this.set('hintON', (!val || val && val.length === 0));
+    this._hintON = (!val || val && val.length===0) ? YES : NO;
     return sc_super();
   },
 
@@ -179,7 +252,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         }
         else {
           // In IE8, input elements don't have hasOwnProperty() defined.
-          try{
+          try {
             if ('selectionStart' in element) {
               start = element.selectionStart ;
             }
@@ -264,7 +337,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // INTERNAL SUPPORT
   //
 
-  displayProperties: 'hint fieldValue isEditing leftAccessoryView rightAccessoryView isTextArea'.w(),
+  displayProperties: 'formattedHint fieldValue isEditing leftAccessoryView rightAccessoryView isTextArea'.w(),
 
   createChildViews: function() {
     sc_super();
@@ -369,6 +442,15 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // update layer classes always
     context.setClass('not-empty', v.length > 0);
 
+    //addressing accessibility
+    if(firstTime) {
+      context.attr('aria-multiline', this.get('isTextArea'));
+      context.attr('aria-disabled', !this.get('isEnabled'));
+    }
+    if(!SC.ok(this.get('value'))) {
+      context.attr('aria-invalid', YES);
+    }
+
     // If we have accessory views, we'll want to update the padding on the
     // hint to compensate for the width of the accessory view.  (It'd be nice
     // if we could add in the original padding, too, but there's no efficient
@@ -385,29 +467,29 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     if(SC.browser.mozilla) this.invokeLast(this._applyFirefoxCursorFix);
   },
 
-  /**
+  /** @private
     If isTextArea is changed (this might happen in inlineeditor constantly)
     force the field render to render like the firsttime to avoid writing extra
     code. This can be useful also 
   */
   _forceRenderFirstTime: NO,
-    
+  
+  /** @private */
   _renderFieldLikeFirstTime: function(){
     this.set('_forceRenderFirstTime', YES);
   }.observes('isTextArea'),
   
-  shouldRenderBorder: YES,
-  
+  /** @private */
   _renderField: function(context, firstTime, value, leftAdjustment, rightAdjustment) {
     // TODO:  The cleanest thing might be to create a sub- rendering context
     //        here, but currently SC.RenderContext will render sibling
     //        contexts as parent/child.
 
-    var hint = this.get('hint'), disabled, name, adjustmentStyle, type, 
+    var hint = this.get('formattedHint'), disabled, name, adjustmentStyle, type, 
         hintElements, element, paddingElementStyle, fieldClassNames,
         spellCheckEnabled=this.get('spellCheckEnabled'), spellCheckString,
         maxLength = this.get('maxLength'), isOldSafari;
-        
+
     context.setClass('text-area', this.get('isTextArea'));
     
     //Adding this to differentiate between older and newer versions of safari
@@ -434,9 +516,9 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       }
       context.push('<span class="padding" '+adjustmentStyle+'>');
                   
-      value = this.get('escapeHTML')?SC.RenderContext.escapeHTML(value):value;
+      value = this.get('escapeHTML') ? SC.RenderContext.escapeHTML(value) : value;
       if(!this.get('_supportsPlaceHolder') && (!value || (value && value.length===0))) {
-        value = this.get('hint');
+        value = hint;
         context.setClass('sc-hint', YES);
       } 
       
@@ -468,12 +550,11 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       if(!this.get('_supportsPlaceHolder')){
         var val = this.get('value');
         if((!val || (val && val.length===0))){
-          if(this.get('hintON') && !this.get('isFirstResponder')){
-            //console.log('hint on render');
+          if(this._hintON && !this.get('isFirstResponder')){
             context.setClass('sc-hint', YES);
             input.val(hint);
-          }else{
-            // console.log('removing hint on render');
+          } 
+          else {
             context.setClass('sc-hint', NO);
             input.val('');
           }
@@ -560,11 +641,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     // For some strange reason if we add focus/blur events to textarea
     // inmediately they won't work. However if I add them at the end of the
     // runLoop it works fine.
-    if(!this.get('_supportsPlaceHolder') && this.get('hintON')){
+    if(!this.get('_supportsPlaceHolder') && this._hintON){
       var currentValue = this.$input().val();
       if(!currentValue || (currentValue && currentValue.length===0)){
-        // console.log('hint on didcreatelayer');
-        this.$input().val(this.get('hint'));
+        this.$input().val(this.get('formattedHint'));
       }
     }
     if(this.get('isTextArea')) {
@@ -611,14 +691,13 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-
   /**
     Removes all the events attached to the textfield
   */
   
   willDestroyLayer: function() {
     sc_super();
-
+    
     var input = this.$input();
     SC.Event.remove(input, 'focus',  this, this._textField_fieldDidFocus);
     SC.Event.remove(input, 'blur',   this, this._textField_fieldDidBlur);
@@ -626,26 +705,23 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     SC.Event.remove(input, 'keypress',  this, this._firefox_dispatch_keypress);
   },
   
-  /**
+  /** @private
     This function is called by the event when the textfield gets focus
   */
-
   _textField_fieldDidFocus: function(evt) {
     SC.run(function() {
       this.set('focused',YES);
       this.fieldDidFocus(evt);
       var val = this.get('value');
-      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
-        // console.log('turn off hint');
-        this.set('hintON', NO);
+      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))) {
+        this._hintON = NO;
       }
     }, this);
   },
-
-  /**
+  
+  /** @private
     This function is called by the event when the textfield blurs
   */
-
   _textField_fieldDidBlur: function(evt) {
     SC.run(function() {
       this.set('focused',NO);
@@ -654,9 +730,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       // use it for the delegate to end editing
       this.fieldDidBlur(this._origEvent);
       var val = this.get('value');
-      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))){
-        // console.log('turn on hint');
-        this.set('hintON', YES);
+      if(!this.get('_supportsPlaceHolder') && ((!val) || (val && val.length===0))) {
+        this._hintON = YES;
       }
     }, this);
   },
@@ -701,13 +776,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
 
-  /**
+  /** @private
     Move magic number out so it can be over-written later in inline editor
   */
   _topOffsetForFirefoxCursorFix: 3,
-
-
-  /**
+  
+  /** @private
     Mozilla had this bug until firefox 3.5 or gecko 1.8 They rewrote input text
     and textareas and now they work better. But we have to keep this for older
     versions.
@@ -758,7 +832,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   },
   
   
-  /**
+  /** @private
     In Firefox, as of 3.6 -- including 3.0 and 3.5 -- for input fields only
     (that is, not textarea elements), if the cursor is at the end of the
     field, the "down" key will not result in a "keypress" event for the
@@ -780,7 +854,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
   
-  
+  /** @private */
   _textField_selectionDidChange: function() {
     this.notifyPropertyChange('selection');
   },
@@ -791,9 +865,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // When we become first responder, make sure the field gets focus and
   // the hint value is hidden if needed.
 
-  // when we become first responder, focus the text field if needed and
-  // hide the hint text.
-  /** @private */
+  /** @private
+    When we become first responder, focus the text field if needed and
+    hide the hint text.
+  */
   willBecomeKeyResponderFrom: function(keyView) {
     if(this.get('isVisibleInWindow')) {
       var inp = this.$input()[0];
@@ -807,23 +882,22 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
   },
   
-  willLoseKeyResponderTo: function(responder) {
-    //if (this._isFocused) this._isFocused = NO ;
-  },
-
-  // In IE, you can't modify functions on DOM elements so we need to wrap the
-  // call to select() like this.
+  /** @private
+    In IE, you can't modify functions on DOM elements so we need to wrap the
+    call to select() like this.
+  */
   _selectRootElement: function() {
-    // make sure input element still exists, as a redraw could have remove it
-    // already
     var inputElem = this.$input()[0];
+    // Make sure input element still exists, as a redraw could have remove it
+    // already.
     if(inputElem) inputElem.select() ;
     else this._textField_selectionDidChange();
   },
-
-  // when we lose first responder, blur the text field if needed and show
-  // the hint text if needed.
-  /** @private */
+  
+  /** @private 
+    When we lose first responder, blur the text field if needed and show
+    the hint text if needed.
+  */
   didLoseKeyResponderTo: function(keyView) {
     var el = this.$input()[0];
     if (el) el.blur();
@@ -831,8 +905,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     this.invokeLater("scrollToOriginIfNeeded", 100);
   },
   
-  /**
-    @private
+  /** @private
     Scrolls to origin if necessary (if the pane's current firstResponder is not a text field).
   */
   scrollToOriginIfNeeded: function() {
@@ -844,7 +917,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       document.body.scrollTop = document.body.scrollLeft = 0;
     }
   },
-
+  
   parentViewDidResize: function() {
     if (SC.browser.mozilla) {
       this.invokeLast(this._applyFirefoxCursorFix);
@@ -852,7 +925,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     sc_super();
   },
 
-  /** @private
+  /**
     Simply allow keyDown & keyUp to pass through to the default web browser
     implementation.
   */
@@ -883,7 +956,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
 
     // handle tab key
     if ((which === 9 || evt.keyCode===9) && this.get('defaultTabbingEnabled')) {
-      var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
+      view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if (view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
@@ -917,7 +990,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
     return YES;
   },
-
+  
   keyUp: function(evt) {
     if(SC.browser.mozilla && evt.keyCode===13) this.fieldValueDidChange(); 
     // The caret/selection could have moved.  In some browsers, though, the
@@ -928,7 +1001,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     evt.allowDefault();
     return YES;
   },
-
+  
   mouseDown: function(evt) {
     var fieldValue = this.get('fieldValue'); // use 'fieldValue' since we want actual text
     this._txtFieldMouseDown=YES;
@@ -972,24 +1045,29 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     return YES;
   },
   
-  /**
+  /** @private
     This function is to notify if the browser supports the placeholder attribute
     or not. Currently is disabled as in webkit there is a bug where the color 
     of the placeholder doesn't refresh all the time.
   */
   _supportsPlaceHolder: SC.platform.input.placeholder,
   
-  
-  valueObserver: function(){
-    // console.log('value observer');
+  /** @private
+    This observer makes sure to hide the hint when a value is entered, or
+    show it if it becomes empty.
+  */
+  _valueObserver: function() {
     var val = this.get('value'), max;
     if (val && val.length>0) {
-      this.set('hintON', NO);
+      this._hintON = NO;
       max = this.get('maxLength');
       if(!SC.browser.webkit && val.length>max){
         this.set('value', val.substr(0, max));
       }
-    }else this.set('hintON', YES);
+    } 
+    else {
+      this._hintON = YES;
+    }
   }.observes('value')
   
 });