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

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

@@ -37,6 +37,9 @@
       isVerticalScrollerVisible: YES,
       autohidesVerticalScroller: NO
       
+    })
+    .add("aria-controls_attribute", SC.ScrollView, {
+      contentView: iv
     });
 
     pane.show(); // add a test to show the test pane
@@ -146,5 +149,14 @@
      equals(container.get('layer').scrollLeft, 10, 'scrollLeft should be readjusted to 10');
      equals(container.get('layer').scrollTop, 10, 'scrollTop should be readjust to 10');
    });
-   
+
+   test('Scroller views of scroll view should have aria-controls set to its content', function() {
+     var view = pane.view("aria-controls_attribute"),
+         horizontalScrollerView = view.get('horizontalScrollerView'),
+         verticalScrollerView   = view.get('verticalScrollerView'),
+         contentView            = view.get('contentView');
+
+     equals(horizontalScrollerView.$().attr('aria-controls'), contentView, "horizontalScroller has aria-controls set");
+     equals(verticalScrollerView.$().attr('aria-controls'), contentView, "verticalScroller has aria-controls set");
+   });
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/scroller.js

@@ -88,3 +88,31 @@ test('hasButtons', function() {
   equals(view2.$('.endcap').length, 1, 'scrollers with buttons should have an endcap');
   equals(view2.$('.button-bottom, .button-top').length, 0, 'scrollers with buttons should not have an up or a down button');  
 });
+
+test('aria-role', function() {
+  var viewElem = view.$();
+  equals(viewElem.attr('role'), 'scrollbar', 'aria role set to the scroller');
+});
+
+test('aria-orientation', function(){
+  var viewElem = view.$();
+  equals(viewElem.attr('aria-orientation'), 'vertical', 'default aria-orientation should be vertical');
+});
+
+test('aria-valuemax', function(){
+  var viewElem = view1.$();
+  equals(viewElem.attr('aria-valuemax'), 100, 'aria-maximum attribute should be 100');
+});
+
+test('aria-valuemin', function(){
+  var viewElem = view1.$();
+  equals(viewElem.attr('aria-valuemin'), 10, 'aria-min attribute should be 10');
+});
+
+test('aria-valuenow', function(){
+  var viewElem;
+  view2.set('value', 80);
+  SC.RunLoop.begin().end();
+  viewElem = view2.$();
+  equals(viewElem.attr('aria-valuenow'), 80, 'aria-now attribute should be 10');
+});

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

@@ -59,3 +59,50 @@ test("Check that properties are mapped correctly", function() {
   equals(childViews[0].toolTip, null, 'Computed properties should match');
   equals(childViews[0].index, 0, 'Computed properties should match');
 });
+
+
+ test("Check that mouse actions work", function() {
+   view.triggerItemAtIndex(1);
+   SC.RunLoop.begin();
+   view.set('isEnabled', YES);
+   SC.RunLoop.end();
+   
+   // Test Mouse Down
+   // it now gets the item by the position, so we have to pass a position
+   var firstItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left + 1, clientY: rect1.top + 1 });
+   view.mouseDown(firstItemEvent);
+   
+   equals(view._isMouseDown, YES, 'Mouse down flag on mousedown should be ');
+   equals(view.get('activeIndex'), 0, 'The active item is the first segment.');
+   
+   // Test Mouse Up
+   elem = view.get('layer').childNodes[1];
+      
+   view.mouseUp(firstItemEvent);
+   equals(view._isMouseDown, NO, 'Mouse down flag on mouseup should be ');
+   equals(view.get('activeIndex'), -1, 'There shouldnt be any active item');
+   
+   // Test third item
+   elem = view.get('layer').childNodes[2];
+   var thirdItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect3.left + 1, client: rect3.top + 1 });
+   
+   // mouse down and move
+   view.mouseDown(thirdItemEvent);
+   view.mouseMoved(thirdItemEvent);
+   equals(view._isMouseDown, YES, 'Mouse down flag on mousemoved should be ');
+   equals(view.get('activeIndex'), 2, 'The active item is the third segment.');
+   
+   // try moving mouse while mouse down
+   var secondItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect2.left + 1, clientY: rect2.top + 1 });
+   view.mouseMoved(secondItemEvent);
+   equals(view._isMouseDown, YES, 'Mouse down flag on mousemoved should be ');
+   equals(view.get('activeIndex'), 1, 'The active item should have changed to the second segment.');
+   
+   // and check that mouse out cancels.
+   var noItemEvent = SC.Event.simulateEvent(elem, 'mousedown', { clientX: rect1.left - 5, clientY: rect1.top - 5 });
+
+   view.mouseExited(noItemEvent);
+   equals(view._isMouseDown, YES, 'Mouse down flag on mouseout should still be ');
+   equals(view.get('activeIndex'), -1, 'The active item is no longer specified.');
+   
+  });

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

@@ -155,6 +155,25 @@ var pane;
       itemWidthKey: 'width',
       value: "D",
       layout: { height: 25 }
+    })
+    .add("aria-role_tab,tablist", SC.SegmentedView, {
+      items: [
+      {title: "Item 1"},
+      {title: "Item 2"},
+      {title: "Item 3"}
+      ],
+      itemTitleKey: "title",
+      layout: { height: 25 }
+    })
+    .add("aria-labelledby", SC.SegmentedView, {
+      items: [
+      {title: "Item 1", ariaLabeledBy: "item1"},
+      {title: "Item 2", ariaLabeledBy: "item2"},
+      {title: "Item 3", ariaLabeledBy: "item3"}
+      ],
+      itemTitleKey: "title",
+      itemAriaLabeledByKey: "ariaLabeledBy",
+      layout: { height: 25 }
     });
 
   pane.show(); // add a test to show the test pane
@@ -180,6 +199,9 @@ var pane;
     ok(pane.view('3_items,2_sel,emptySel,multiSel').get('isVisibleInWindow'), '3_items,2_sel,emptySel,multiSel.isVisibleInWindow should be YES');
     ok(pane.view('3_items,leftAligned').get('isVisibleInWindow'), '3_items,leftAligned.isVisibleInWindow should be YES');
     ok(pane.view('3_items,rightAligned').get('isVisibleInWindow'), '3_items,rightAligned.isVisibleInWindow should be YES');
+    ok(pane.view('aria-role_tab,tablist').get('isVisibleInWindow'), 'aria-role_tab,tablist.isVisibleInWindow should be YES');
+    ok(pane.view('aria-labelledby').get('isVisibleInWindow'), 'aria-labelledby.isVisibleInWindow should be YES');
+
   });
 
 
@@ -395,4 +417,33 @@ var pane;
     var overflowEl = segments[segments.length - 1];
     ok($(overflowEl).hasClass('sel'), 'overflow segment should have .sel class');
   });
+
+  test("Check that the segmented view and segments have aria roles set", function() {
+    var sv        = pane.view("aria-role_tab,tablist"),
+        viewElem  = sv.$(),
+        segments, i, len, segmentViewElem, role;
+
+    equals(viewElem.attr('role'), 'tablist', "The segmented view has aria role set");
+
+    segments = sv.get('childViews');
+    for( i = 0, len = segments.length; i<len; ++i) {
+      segmentViewElem = segments[i].$();
+      role = segmentViewElem.attr('role');
+      equals(role, "tab", "segment " + (i+1) + " have aria role set");
+    }
+  });
+
+  test("Check that the segments have aria-labelled attribute set", function() {
+    var sv = pane.view('aria-labelledby'),
+        segments = sv.get('childViews'),
+        i, len, segmentViewElem, ariaLabeledBy, aria_labelledby;
+
+    for(i = 0, len = segments.length; i<len; ++i) {
+      ariaLabeledBy   = segments[i].get('ariaLabeledBy');
+      segmentViewElem = segments[i].$();
+      aria_labelledby = segmentViewElem.attr('aria-labelledby');
+      equals(aria_labelledby, ariaLabeledBy, "segment " + (i+1) + " has aria-labeledby set");
+    }
+  });
+
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/toolbar/method.js

@@ -0,0 +1,33 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+var pane, view;
+module("SC.ToolbarView", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.ToolbarView.extend({
+          layout: { left:12, height: 200, right:12, top:12 }
+          
+        })]
+    });
+    pane.append(); // make sure there is a layer...
+    SC.RunLoop.end();
+    
+    view = pane.childViews[0];
+  }, 
+  
+  teardown: function() {
+    pane.remove();
+    pane = view = null ;
+  }
+});
+
+

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

@@ -0,0 +1,29 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+
+var pane;
+(function() {
+
+  pane = SC.ControlTestPane.design()
+
+  .add("aria-role_ToolbarView", SC.ToolbarView, {
+    
+  });
+
+  pane.show();
+
+  module('SC.ToolbarView UI', pane.standardSetup());
+
+  test("Check that the toolbar view has role set", function(){
+    var viewElem = pane.view('aria-role_ToolbarView').$();
+
+    equals(viewElem.attr('role'), 'toolbar', "toolbar view has correct role set");
+  });
+})();

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

@@ -26,8 +26,36 @@ SC.CheckboxView = SC.ButtonView.extend(SC.StaticLayout, SC.Button,
 
   classNames: ['sc-checkbox-view', 'sc-checkbox-control'],
   tagName: 'label',
+
+  /**
+    The WAI-ARIA role of checkbox. This property's value should not be
+    changed.
+
+    @property {String}
+  */
   ariaRole: 'checkbox',
 
+  /**
+    The WAI-ARIA attribute for the checkbox. This property is assigned to
+    'aria-labelledby' attribute, which defines a string value that labels the
+    checkbox 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,
+
+  /**
+    The WAI-ARIA attribute for the checkbox. This property is assigned to
+    'aria-label' attribute, which defines a string value that labels the
+    checkbox element. Used to support voiceover. It is used when it is not
+    possible to have a visible label on the screen. It should be assigned a non-empty
+    string, if the 'aria-label' attribute has to be set for the element.
+
+    @property {String}
+  */
+  ariaLabel: null,
+
   // no special theme for Checkbox; button defaults to 'square', so we have to stop that.
   themeName: null,
   renderDelegateName: 'checkboxRenderDelegate',

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

@@ -21,7 +21,15 @@ SC.DisclosureView = SC.ButtonView.extend(
 /** @scope SC.DisclosureView.prototype */ {
   
   classNames: ['sc-disclosure-view'],
-  
+
+  /**
+    The WAI-ARIA attribute for the disclosure button. This property is assigned
+    to 'aria-label' attribute, which defines a string value that labels the
+    the element. Used to support voiceover. It is used when it is not
+    possible to have a visible label on the screen.
+  */
+  ariaLabel: null,
+
   renderDelegateName: 'disclosureRenderDelegate',
 
   buttonBehavior: SC.TOGGLE_BEHAVIOR,

data/lib/frameworks/sproutcore/frameworks/desktop/views/list_item.js

@@ -11,15 +11,15 @@ SC.LIST_ITEM_ACTION_EJECT = 'sc-list-item-cancel-eject';
 
 /**
   @class
-  
+
   Many times list items need to display a lot more than just a label of text.
-  You often need to include checkboxes, icons, right icons, extra counts and 
-  an action or warning icon to the far right. 
-  
-  A ListItemView can implement all of this for you in a more efficient way 
+  You often need to include checkboxes, icons, right icons, extra counts and
+  an action or warning icon to the far right.
+
+  A ListItemView can implement all of this for you in a more efficient way
   than you might get if you simply put together a list item on your own using
   views.
-  
+
   @extends SC.View
   @extends SC.Control
   @extends SC.Editable
@@ -29,30 +29,42 @@ SC.LIST_ITEM_ACTION_EJECT = 'sc-list-item-cancel-eject';
 SC.ListItemView = SC.View.extend(
     SC.Control,
 /** @scope SC.ListItemView.prototype */ {
-  
+
   classNames: ['sc-list-item-view'],
-  
+
   displayProperties: ['disclosureState', 'escapeHTML'],
-  
-  
+
+
   init: function() {
     sc_super();
   },
-  
+
   // ..........................................................
   // KEY PROPERTIES
-  // 
-  
+  //
+
   /**
     The content object the list item will display.
-    
+
     @type SC.Object
   */
   content: null,
-  
+
+  /**
+    The index of the content object in the ListView to which this
+    ListItemView belongs.
+
+    For example, if this ListItemView represents the first object
+    in a ListView, this property would be 0.
+
+    @type Number
+    @isReadOnly
+  */
+  contentIndex: null,
+
   /**
     (displayDelegate) True if you want the item view to display an icon.
-    
+
     If false, the icon on the list item view will be hidden.  Otherwise,
     space will be left for the icon next to the list item view.
   */
@@ -60,109 +72,109 @@ SC.ListItemView = SC.View.extend(
 
   /**
     (displayDelegate) True if you want the item view to display a right icon.
-    
+
     If false, the icon on the list item view will be hidden.  Otherwise,
     space will be left for the icon next to the list item view.
   */
   hasContentRightIcon: NO,
-  
+
   /**
-    (displayDelegate) True if you want space to be allocated for a branch 
+    (displayDelegate) True if you want space to be allocated for a branch
     arrow.
-    
+
     If false, the space for the branch arrow will be collapsed.
   */
   hasContentBranch: NO,
-  
+
   /**
     (displayDelegate) The name of the property used for the checkbox value.
-    
+
     The checkbox will only be visible if this key is not null.
-    
+
     @type {String}
   */
   contentCheckboxKey: null,
-  
+
   /**
     The URL or CSS class name to use for the icon. This is only used if
     contentIconKey is null, or returns null from the delegate.
   */
   icon: null,
-  
+
   /**
     (displayDelegate) Property key to use for the icon url
 
-    This property will be checked on the content object to determine the 
+    This property will be checked on the content object to determine the
     icon to display.  It must return either a URL or a CSS class name.
   */
   contentIconKey: null,
- 
+
   /**
     The URL or CSS class name to use for the right icon. This is only used if
     contentRightIconKey is null, or returns null from the delegate.
   */
   rightIcon: null,
-  
+
   /**
     (displayDelegate) Property key to use for the right icon url
 
-    This property will be checked on the content object to determine the 
+    This property will be checked on the content object to determine the
     icon to display.  It must return either a URL or a CSS class name.
   */
   contentRightIconKey: null,
-  
+
   /**
     (displayDelegate) The name of the property used for label itself
-    
+
     If null, then the content object itself will be used..
   */
   contentValueKey: null,
-  
+
   /**
     IF true, the label value will be escaped to avoid HTML injection attacks.
-    You should only disable this option if you are sure you will only 
-    display content that is already escaped and you need the added 
+    You should only disable this option if you are sure you will only
+    display content that is already escaped and you need the added
     performance gain.
   */
   escapeHTML: YES,
-  
+
   /**
-    (displayDelegate) The name of the property used to find the count of 
-    unread items. 
-    
-    The count will only be visible if this property is not null and the 
+    (displayDelegate) The name of the property used to find the count of
+    unread items.
+
+    The count will only be visible if this property is not null and the
     returned value is not 0.
   */
   contentUnreadCountKey: null,
-  
+
   /**
     (displayDelegate) The name of the property used to determine if the item
     is a branch or leaf (i.e. if the branch icon should be displayed to the
     right edge.)
-    
+
     If this is null, then the branch view will be completely hidden.
     Otherwise space will be allocated for it.
   */
   contentIsBranchKey: null,
-  
+
 
   /**
     YES if the item view is currently editing.
   */
   isEditing: NO,
-  
+
   /**
     Indent to use when rendering a list item with an outline level > 0.  The
-    left edge of the list item will be indented by this amount for each 
+    left edge of the list item will be indented by this amount for each
     outline level.
   */
   outlineIndent: 16,
-  
+
   /**
     Outline level for this list item.  Usually set by the collection view.
   */
   outlineLevel: 0,
-  
+
   /**
     Disclosure state for this list item.  Usually set by the collection view
     when the list item is created.
@@ -180,10 +192,10 @@ SC.ListItemView = SC.View.extend(
     if (this.get('contentIsEditable') !== this.contentIsEditable()) {
       this.notifyPropertyChange('contentIsEditable');
     }
-    
+
     this.displayDidChange();
   },
-  
+
   /**
     Determines if content is editable or not.  Checkboxes and other related
     components will render disabled if an item is not editable.
@@ -192,24 +204,24 @@ SC.ListItemView = SC.View.extend(
     var content = this.get('content');
     return content && (content.get ? content.get('isEditable')!==NO : NO);
   }.property('content').cacheable(),
-  
-  
+
+
   /**
     Finds and retrieves the element containing the label.  This is used
     for inline editing.  The default implementation returns a CoreQuery
-    selecting any label elements.   If you override renderLabel() you 
+    selecting any label elements.   If you override renderLabel() you
     probably need to override this as well.
-  
+
     @returns {SC.CoreQuery} CQ object selecting label elements
   */
   $label: function() {
     return this.$('label') ;
   },
-  
+
   /**
-    Generates the html string used to represent the action item for your 
+    Generates the html string used to represent the action item for your
     list item.  override this to return your own custom HTML
-    
+
     @param {SC.RenderContext} context the render context
     @param {String} actionClassName the name of the action item
     @returns {void}
@@ -217,15 +229,15 @@ SC.ListItemView = SC.View.extend(
   renderAction: function(context, actionClassName){
     context.push('<img src="',SC.BLANK_IMAGE_URL,'" class="action" />');
   },
-  
-  /** 
+
+  /**
     Determines if the event occured inside an element with the specified
     classname or not.
   */
   _isInsideElementWithClassName: function(className, evt) {
     var layer = this.get('layer');
     if (!layer) return NO ; // no layer yet -- nothing to do
-    
+
     var el = SC.$(evt.target) ;
     var ret = NO, classNames ;
     while(!ret && el.length>0 && (el[0] !== layer)) {
@@ -235,9 +247,9 @@ SC.ListItemView = SC.View.extend(
     el = layer = null; //avoid memory leaks
     return ret ;
   },
-  
+
   /** @private
-    Returns YES if the list item has a checkbox and the event occurred 
+    Returns YES if the list item has a checkbox and the event occurred
     inside of it.
   */
   _isInsideCheckbox: function(evt) {
@@ -245,18 +257,18 @@ SC.ListItemView = SC.View.extend(
     var checkboxKey = this.getDelegateProperty('contentCheckboxKey', del) ;
     return checkboxKey && this._isInsideElementWithClassName('sc-checkbox-view', evt);
   },
-  
-  /** @private 
-    Returns YES if the list item has a disclosure triangle and the event 
+
+  /** @private
+    Returns YES if the list item has a disclosure triangle and the event
     occurred inside of it.
   */
   _isInsideDisclosure: function(evt) {
     if (this.get('disclosureState')===SC.LEAF_NODE) return NO;
     return this._isInsideElementWithClassName('sc-disclosure-view', evt);
   },
-  
-  /** @private 
-    Returns YES if the list item has a right icon and the event 
+
+  /** @private
+    Returns YES if the list item has a right icon and the event
     occurred inside of it.
   */
   _isInsideRightIcon: function(evt) {
@@ -264,17 +276,17 @@ SC.ListItemView = SC.View.extend(
     var rightIconKey = this.getDelegateProperty('hasContentRightIcon', del) || !SC.none(this.rightIcon);
     return rightIconKey && this._isInsideElementWithClassName('right-icon', evt);
   },
-  
-  /** @private 
+
+  /** @private
   mouseDown is handled only for clicks on the checkbox view or or action
   button.
   */
   mouseDown: function(evt) {
-    
+
     // if content is not editable, then always let collection view handle the
     // event.
-    if (!this.get('contentIsEditable')) return NO ; 
-    
+    if (!this.get('contentIsEditable')) return NO ;
+
     // if occurred inside checkbox, item view should handle the event.
     if (this._isInsideCheckbox(evt)) {
       this._addCheckboxActiveState() ;
@@ -293,17 +305,17 @@ SC.ListItemView = SC.View.extend(
       this._isMouseInsideRightIcon = YES ;
       return YES;
     }
-    
+
     return NO ; // let the collection view handle this event
   },
-  
+
   mouseUp: function(evt) {
     var ret= NO, del, checkboxKey, content, state, idx, set;
 
-    // if mouse was down in checkbox -- then handle mouse up, otherwise 
+    // if mouse was down in checkbox -- then handle mouse up, otherwise
     // allow parent view to handle event.
     if (this._isMouseDownOnCheckbox) {
-   
+
       // update only if mouse inside on mouse up...
       if (this._isInsideCheckbox(evt)) {
         del = this.displayDelegate ;
@@ -316,10 +328,10 @@ SC.ListItemView = SC.View.extend(
           this.displayDidChange(); // repaint view...
         }
       }
- 
+
       this._removeCheckboxActiveState() ;
       ret = YES ;
-    
+
     // if mouse as down on disclosure -- handle mosue up.  otherwise pass on
     // to parent.
     } else if (this._isMouseDownOnDisclosure) {
@@ -328,35 +340,35 @@ SC.ListItemView = SC.View.extend(
         idx   = this.get('contentIndex');
         set   = (!SC.none(idx)) ? SC.IndexSet.create(idx) : null;
         del = this.get('displayDelegate');
-        
+
         if (state === SC.BRANCH_OPEN) {
           if (set && del && del.collapse) del.collapse(set);
           else this.set('disclosureState', SC.BRANCH_CLOSED);
           this.displayDidChange();
-          
+
         } else if (state === SC.BRANCH_CLOSED) {
           if (set && del && del.expand) del.expand(set);
           else this.set('disclosureState', SC.BRANCH_OPEN);
           this.displayDidChange();
         }
       }
-     
+
       this._removeDisclosureActiveState();
       ret = YES ;
-    // if mouse was down in right icon -- then handle mouse up, otherwise 
+    // if mouse was down in right icon -- then handle mouse up, otherwise
     // allow parent view to handle event.
     } else if (this._isMouseDownOnRightIcon) {
       this._removeRightIconActiveState() ;
       ret = YES ;
-    } 
-   
+    }
+
     // clear cached info
     this._isMouseInsideCheckbox = this._isMouseDownOnCheckbox = NO ;
     this._isMouseDownOnDisclosure = this._isMouseInsideDisclosure = NO ;
     this._isMouseInsideRightIcon = this._isMouseDownOnRightIcon = NO ;
     return ret ;
   },
-  
+
   mouseMoved: function(evt) {
     if (this._isMouseDownOnCheckbox && this._isInsideCheckbox(evt)) {
       this._addCheckboxActiveState() ;
@@ -379,31 +391,31 @@ SC.ListItemView = SC.View.extend(
    }
    return NO ;
   },
-  
+
   touchStart: function(evt){
     return this.mouseDown(evt);
   },
-  
+
   touchEnd: function(evt){
     return this.mouseUp(evt);
   },
-  
+
   touchEntered: function(evt){
     return this.mouseEntered(evt);
   },
-  
+
   touchExited: function(evt){
     return this.mouseExited(evt);
   },
-  
-  
+
+
   _addCheckboxActiveState: function() {
     if (this.get('isEnabled')) {
       if (this._checkboxRenderDelegate) {
         var source = this._checkboxRenderSource;
 
         source.set('isActive', YES);
-        
+
         this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
       } else {
         // for backwards-compatibility.
@@ -411,13 +423,13 @@ SC.ListItemView = SC.View.extend(
       }
     }
   },
-  
+
   _removeCheckboxActiveState: function() {
     if (this._checkboxRenderer) {
       var source = this._checkboxRenderSource;
 
       source.set('isActive', NO);
-      
+
       this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
     } else {
       // for backwards-compatibility.
@@ -430,7 +442,7 @@ SC.ListItemView = SC.View.extend(
       if (this._disclosureRenderDelegate) {
         var source = this._disclosureRenderSource;
         source.set('isActive', YES);
-        
+
         this._disclosureRenderDelegate.update(source, this.$('.sc-disclosure-view'));
       } else {
         // for backwards-compatibility.
@@ -439,12 +451,12 @@ SC.ListItemView = SC.View.extend(
 
     }
   },
-  
+
   _removeDisclosureActiveState: function() {
     if (this._disclosureRenderer) {
       var source = this._disclosureRenderSource;
       source.set('isActive', NO);
-      
+
       this._disclosureRenderDelegate.update(source, this.$('.sc-disclosure-view'));
     } else {
       // for backwards-compatibility.
@@ -455,18 +467,18 @@ SC.ListItemView = SC.View.extend(
   _addRightIconActiveState: function() {
    this.$('img.right-icon').setClass('active', YES);
   },
-  
+
   _removeRightIconActiveState: function() {
    this.$('img.right-icon').removeClass('active');
   },
-  
+
   /**
     Returns true if a click is on the label text itself to enable editing.
-  
-    Note that if you override renderLabel(), you probably need to override 
+
+    Note that if you override renderLabel(), you probably need to override
     this as well, or just $label() if you only want to control the element
     returned.
-  
+
     @param evt {Event} the mouseUp event.
     @returns {Boolean} YES if the mouse was on the content element itself.
   */
@@ -475,26 +487,26 @@ SC.ListItemView = SC.View.extend(
    var del = this.displayDelegate ;
    var labelKey = this.getDelegateProperty('contentValueKey', del) ;
    if (!labelKey) return NO ;
-   
+
    // get the element to check for.
    var el = this.$label()[0] ;
    if (!el) return NO ; // no label to check for.
-   
+
    var cur = evt.target, layer = this.get('layer') ;
    while(cur && (cur !== layer) && (cur !== window)) {
      if (cur === el) return YES ;
      cur = cur.parentNode ;
    }
-   
+
    return NO;
   },
-  
+
   beginEditing: function() {
     if (this.get('isEditing')) return YES ;
     //if (!this.get('contentIsEditable')) return NO ;
     return this._beginEditing(YES);
   },
-  
+
   _beginEditing: function(scrollIfNeeded) {
     var content   = this.get('content'),
         del       = this.get('displayDelegate'),
@@ -518,8 +530,8 @@ SC.ListItemView = SC.View.extend(
       });
       return YES; // let the scroll happen then begin editing...
     }
-    
-    // nothing to do...    
+
+    // nothing to do...
     if (!parent || !el || el.get('length')===0) return NO ;
     v = (labelKey && content && content.get) ? content.get(labelKey) : null ;
 
@@ -542,7 +554,7 @@ SC.ListItemView = SC.View.extend(
       targetLineHeight = fontSize * 1.5 ;
       if (targetLineHeight < lineHeight) {
         el.css({ lineHeight: '1.5' });
-        lineHeightShift = (lineHeight - targetLineHeight) / 2; 
+        lineHeightShift = (lineHeight - targetLineHeight) / 2;
       } else oldLineHeight = null ;
     }
 
@@ -554,50 +566,52 @@ SC.ListItemView = SC.View.extend(
     escapeHTML = this.get('escapeHTML');
 
     ret = SC.InlineTextFieldView.beginEditing({
-      frame: f, 
-      exampleElement: el, 
-      delegate: this, 
+      frame: f,
+      exampleElement: el,
+      delegate: this,
       value: v,
       multiline: NO,
       isCollection: YES,
       validator: validator,
-      escapeHTML: escapeHTML
+      escapeHTML: escapeHTML,
+      pane: this.get('pane'),
+      layout: this.get('layout')
     }) ;
 
-    // restore old line height for original item if the old line height 
+    // restore old line height for original item if the old line height
     // was saved.
     if (oldLineHeight) el.css({ lineHeight: oldLineHeight }) ;
 
     // Done!  If this failed, then set editing back to no.
     return ret ;
   },
-  
+
   commitEditing: function() {
    if (!this.get('isEditing')) return YES ;
    return SC.InlineTextFieldView.commitEditing();
   },
-  
+
   discardEditing: function() {
    if (!this.get('isEditing')) return YES ;
    return SC.InlineTextFieldView.discardEditing();
   },
-  
-  
+
+
   /** @private
     Allow editing.
   */
   inlineEditorShouldBeginEditing: function(inlineEditor) {
     return YES ;
   },
-  
+
   /** @private
    Set editing to true so edits will no longer be allowed.
   */
   inlineEditorWillBeginEditing: function(inlineEditor) {
    this.set('isEditing', YES);
   },
-  
-  /** @private 
+
+  /** @private
    Hide the label view while the inline editor covers it.
   */
   inlineEditorDidBeginEditing: function(inlineEditor) {
@@ -609,13 +623,13 @@ SC.ListItemView = SC.View.extend(
   inlineEditorShouldEndEditing: function(inlineEditor, finalValue) {
    return YES ;
   },
-  
+
   /** @private
    Update the field value and make it visible again.
   */
   inlineEditorDidEndEditing: function(inlineEditor, finalValue) {
     this.set('isEditing', NO) ;
-    
+
     var content = this.get('content') ;
     var del = this.displayDelegate ;
     var labelKey = this.getDelegateProperty('contentValueKey', del) ;
@@ -747,20 +761,20 @@ SC.ListItemView = SC.View.extend(
       .addClass('sc-regular-size')
       .addClass(this.get('theme').classNames)
       .addClass(renderer.get('name'));
-    
+
     var source = this._disclosureRenderSource;
     if (!source) {
-      this._disclosureRenderSource = source = 
+      this._disclosureRenderSource = source =
       SC.Object.create({ renderState: {}, theme: this.get('theme') });
     }
-    
+
     source
       .set('isSelected', state === SC.BRANCH_OPEN)
       .set('isEnabled', this.get('isEnabled'))
       .set('title', '');
-    
+
     renderer.render(source, context);
-    
+
     context = context.end();
     this._disclosureRenderDelegate = renderer;
  },
@@ -784,22 +798,22 @@ SC.ListItemView = SC.View.extend(
       .addClass('sc-regular-size')
       .addClass(this.get('theme').classNames)
       .addClass(renderer.get('name'));
-    
+
     var source = this._checkboxRenderSource;
     if (!source) {
-      source = this._checkboxRenderSource = 
+      source = this._checkboxRenderSource =
       SC.Object.create({ renderState: {}, theme: this.get('theme') });
     }
-    
+
     source
       .set('isSelected', state && (state !== SC.MIXED_STATE))
       .set('isEnabled', this.get('isEnabled') && this.get('contentIsEditable'))
       .set('isActive', this._checkboxIsActive)
       .set('title', '');
-    
+
     renderer.render(source, context);
     context = context.end();
-    
+
     this._checkboxRenderDelegate = renderer;
  },
 
@@ -909,7 +923,7 @@ SC.ListItemView = SC.View.extend(
           .push('&nbsp;')
           .end();
   }
-  
+
 });
 
 SC.ListItemView._deprecatedRenderWarningHasBeenIssued = false;