Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/html-helpers/editors/dropdownlist/cascading.md

@@ -11,8 +11,11 @@ position: 6
 The cascading functionality is represented by a series of two or more DropDownLists in which each DropDownList is filtered according to the selected options in the previous DropDownList.
 
 ## Basic Concepts and Requirements
-
+{% if site.core %}
 The child DropDownList cascades from the parent one if the [`CascadeFrom`](/api/Kendo.Mvc.UI.Fluent/DropDownListBuilder#cascadefromsystemstring) property is defined. The `CascadeFrom` property has to point to the [`Name`]({% slug fundamentals_core %}#basic-configuration) of the parent DropDownList widget.
+{% else %}
+The child DropDownList cascades from the parent one if the [`CascadeFrom`](/api/Kendo.Mvc.UI.Fluent/DropDownListBuilder#cascadefromsystemstring) property is defined. The `CascadeFrom` property has to point to the [`Name`]({% slug fundamentals_aspnetmvc %}#basic-configuration) of the parent DropDownList widget.
+{% endif %}
 
 The following actions occur during initialization of the child DropDownList. The child {{ site.product_short }} DropDownList:
 - checks if the `CascadeFrom` property is set. If not, cascading is disabled.

src/kendo.colorpicker.js

@@ -564,7 +564,7 @@ var __meta__ = { // jshint ignore:line
                 return;
             }
 
-            this._colorAsText.attr("title", that.options.messages.previewInput);
+            this._colorAsText.attr("aria-label", that.options.messages.previewInput);
             this._colorAsText.removeClass("k-state-error");
 
             that._selectedColor.css(BACKGROUNDCOLOR, color.toDisplay());

src/kendo.textbox.js

@@ -119,9 +119,26 @@ var __meta__ = {// jshint ignore:line
             }
 
             that.element.off(NS);
+            that.element[0].style.width = "";
+            that.element.removeClass(INPUT);
             Widget.fn.destroy.call(that);
         },
 
+        setOptions: function(options) {
+            this.destroy();
+
+            this.element.unwrap();
+            if (this._floatingLabelContainer) {
+                this._inputLabel.remove();
+                this._inputLabel = null;
+                this.element.unwrap();
+                this._floatingLabelContainer = null;
+            }
+
+            kendo.deepExtend(this.options, options);
+            this.init(this.element, this.options);
+        },
+
         _editable: function(options) {
             var that = this;
             var element = that.element;
@@ -198,6 +215,10 @@ var __meta__ = {// jshint ignore:line
 
             that.wrapper.removeClass(FOCUSED);
 
+            if (value === null) {
+                value = "";
+            }
+
             if (value !== newValue) {
                 that._value = newValue;
 

src/kendo.window.js

@@ -2051,9 +2051,9 @@
                     wnd.minTop = -containerOffset.top;
                 }
 
-                wnd.wrapper
-                    .append(templates.overlay)
-                    .children(KWINDOWRESIZEHANDLES).hide();
+                $(templates.overlay).appendTo(wnd.wrapper).css({ opacity: 0 });
+
+                wnd.wrapper.children(KWINDOWRESIZEHANDLES).hide();
 
                 $(BODY).css(CURSOR, e.currentTarget.css(CURSOR));
             },

tests/colorpicker/aria.js

@@ -1,134 +1,153 @@
-(function() {
-    var colorPicker;
-    var element;
-
-    describe("colorpalette", function() {
-        beforeEach(function() {
-            element = $("<div>").kendoColorPalette();
-            colorPicker = element.data("kendoColorPalette");
-        });
-        afterEach(function() {
-            colorPicker.destroy();
-        });
-
-        it("renders aria-label for each color", function() {
-            element.find(".k-item").each(function() {
-                var label = $(this).attr("aria-label");
-                assert.isOk(label, "aria-label defined on cells"); // label defined
-                var bg = $(this);
-                var color = kendo.parseColor(label);
-                bg = kendo.parseColor(bg.css("background-color"));
-                assert.isOk(color && bg && color.equals(bg), "aria-label is same as background color");
-            });
-        });
-
-        it("maintains aria-selected attribute consistent with selection", function() {
-            var items = element.find(".k-item");
-
-            assert.equal(element.find("[aria-selected=true]").length, 0);
-
-            items.last().click();
-
-            var selected = element.find("[aria-selected=true]");
-            assert.isOk(selected[0] === items.last()[0]);
-            assert.equal(selected.length, 1);
-        });
-
-        it("sets aria-activedescendant based on selection", function() {
-            var lastColor = element.find(".k-item").last();
-
-            lastColor.click();
-
-            assert.isOk(element.is("[aria-activedescendant]"));
-            assert.equal(element.attr("aria-activedescendant"), lastColor.attr("id"));
-        });
-
-        it("renders role='row' for each tr", function() {
-            var rows = element.find("tr");
-
-            assert.equal(rows.filter("[role=row]").length, rows.length);
-        });
-
-        it("renders role='gridcell' for each td", function() {
-            var cells = element.find("td");
-
-            assert.equal(cells.filter("[role=gridcell]").length, cells.length);
-        });
-    });
-
-    describe("color picker", function() {
-        beforeEach(function() {
-            element = $("<input/>").kendoColorPicker();
-            colorPicker = element.data("kendoColorPicker");
-        });
-        afterEach(function() {
-            colorPicker.destroy();
-        });
-
-        it("renders role='textbox' to the wrapper", function() {
-            var wrapper = colorPicker.wrapper;
-
-            assert.equal(wrapper.attr("role"), "textbox");
-        });
-
-        it("renders aria-haspopup='true' to the wrapper", function() {
-            var wrapper = colorPicker.wrapper;
-
-            assert.equal(wrapper.attr("aria-haspopup"), "true");
-        });
-
-        it("render popup with id", function() {
-            colorPicker.open();
-
-            var popup = colorPicker._popup.element;
-
-            assert.isOk(popup.attr("id"));
-        });
-
-        it("render aria-owns to the wrapper", function() {
-            colorPicker.open();
-
-            assert.equal(colorPicker.wrapper.attr("aria-owns"), colorPicker._popup.element.attr("id"));
-        });
-
-        it("renders aria-disabled=false", function() {
-            assert.equal(colorPicker.wrapper.attr("aria-disabled"), "false");
-        });
-
-        it("renders aria-disabled=true", function() {
-            colorPicker.enable(false);
-
-            assert.equal(colorPicker.wrapper.attr("aria-disabled"), "true");
-            assert.isOk(!colorPicker.wrapper.attr("disabled"));
-        });
-
-        it("renders aria-label to the wrapper", function() {
-            colorPicker.value("#f9d9ab");
-
-            assert.isOk(colorPicker.wrapper.attr("aria-label").indexOf("#f9d9ab") !== -1);
-        });
-    });
-
-    describe("flatcolorpicker", function() {
-        beforeEach(function() {
-            element = $("<div>").kendoFlatColorPicker({
-                preview: true
-            });
-            colorPicker = element.data("kendoFlatColorPicker");
-        });
-        afterEach(function() {
-            colorPicker.destroy();
-        });
-
-        it("renders aria-label to the slider", function() {
-            var ariaLabel = colorPicker.wrapper.find(".k-hue-slider input").attr("aria-label");
-            assert.isOk(ariaLabel === "hue saturation");
-        });
-
-        it("renders title to the preview input", function() {
-            var ariaLabel = colorPicker.wrapper.find(".k-color-value").attr("title");
-            assert.isOk(ariaLabel === "Color Hexadecimal Code");
-        });
-
-    });
-}());
+(function() {
+    var colorPicker;
+    var element;
+
+    describe("colorpalette", function() {
+        beforeEach(function() {
+            element = $("<div>").appendTo(Mocha.fixture).kendoColorPalette();
+            colorPicker = element.data("kendoColorPalette");
+        });
+        afterEach(function() {
+            colorPicker.destroy();
+        });
+
+        it("renders aria-label for each color", function() {
+            element.find(".k-item").each(function() {
+                var label = $(this).attr("aria-label");
+                assert.isOk(label, "aria-label defined on cells"); // label defined
+                var bg = $(this);
+                var color = kendo.parseColor(label);
+                bg = kendo.parseColor(bg.css("background-color"));
+                assert.isOk(color && bg && color.equals(bg), "aria-label is same as background color");
+            });
+        });
+
+        it("maintains aria-selected attribute consistent with selection", function() {
+            var items = element.find(".k-item");
+
+            assert.equal(element.find("[aria-selected=true]").length, 0);
+
+            items.last().click();
+
+            var selected = element.find("[aria-selected=true]");
+            assert.isOk(selected[0] === items.last()[0]);
+            assert.equal(selected.length, 1);
+        });
+
+        it("sets aria-activedescendant based on selection", function() {
+            var lastColor = element.find(".k-item").last();
+
+            lastColor.click();
+
+            assert.isOk(element.is("[aria-activedescendant]"));
+            assert.equal(element.attr("aria-activedescendant"), lastColor.attr("id"));
+        });
+
+        it("renders role='row' for each tr", function() {
+            var rows = element.find("tr");
+
+            assert.equal(rows.filter("[role=row]").length, rows.length);
+        });
+
+        it("renders role='gridcell' for each td", function() {
+            var cells = element.find("td");
+
+            assert.equal(cells.filter("[role=gridcell]").length, cells.length);
+        });
+
+        it("colorpalette is accessible with AXE", function(done) {
+            axeRunFixture(done);
+        });
+    });
+
+    describe("color picker", function() {
+        beforeEach(function() {
+            element = $("<input/>").appendTo(Mocha.fixture).kendoColorPicker();
+            colorPicker = element.data("kendoColorPicker");
+        });
+        afterEach(function() {
+            colorPicker.destroy();
+        });
+
+        it("renders role='textbox' to the wrapper", function() {
+            var wrapper = colorPicker.wrapper;
+
+            assert.equal(wrapper.attr("role"), "textbox");
+        });
+
+        it("renders aria-haspopup='true' to the wrapper", function() {
+            var wrapper = colorPicker.wrapper;
+
+            assert.equal(wrapper.attr("aria-haspopup"), "true");
+        });
+
+        it("render popup with id", function() {
+            colorPicker.open();
+
+            var popup = colorPicker._popup.element;
+
+            assert.isOk(popup.attr("id"));
+        });
+
+        it("render aria-owns to the wrapper", function() {
+            colorPicker.open();
+
+            assert.equal(colorPicker.wrapper.attr("aria-owns"), colorPicker._popup.element.attr("id"));
+        });
+
+        it("renders aria-disabled=false", function() {
+            assert.equal(colorPicker.wrapper.attr("aria-disabled"), "false");
+        });
+
+        it("renders aria-disabled=true", function() {
+            colorPicker.enable(false);
+
+            assert.equal(colorPicker.wrapper.attr("aria-disabled"), "true");
+            assert.isOk(!colorPicker.wrapper.attr("disabled"));
+        });
+
+        it("renders aria-label to the wrapper", function() {
+            colorPicker.value("#f9d9ab");
+
+            assert.isOk(colorPicker.wrapper.attr("aria-label").indexOf("#f9d9ab") !== -1);
+        });
+
+        it("colorpicker is accessible with AXE", function(done) {
+            axeRunFixture(done);
+        });
+
+        it("colorpicker popup is accessible with AXE", function(done) {
+            colorPicker.open();
+
+            // excluded rule should be removed after fixing the issue in the slider
+            axeRun(colorPicker._popup.element, done, ["aria-allowed-role"]);
+        });
+    });
+
+    describe("flatcolorpicker", function() {
+        beforeEach(function() {
+            element = $("<div>").appendTo(Mocha.fixture).kendoFlatColorPicker({
+                preview: true
+            });
+            colorPicker = element.data("kendoFlatColorPicker");
+        });
+        afterEach(function() {
+            colorPicker.destroy();
+        });
+
+        it("renders aria-label to the slider", function() {
+            var ariaLabel = colorPicker.wrapper.find(".k-hue-slider input").attr("aria-label");
+            assert.isOk(ariaLabel === "hue saturation");
+        });
+
+        it("renders aria-label to the preview input", function() {
+            var ariaLabel = colorPicker.wrapper.find(".k-color-value").attr("aria-label");
+            assert.isOk(ariaLabel === "Color Hexadecimal Code");
+        });
+
+        it("flatcolorpicker is accessible with AXE", function(done) {
+            // excluded rule should be removed after fixing the issue in the slider
+            axeRunFixture(done, ["aria-allowed-role"]);
+        });
+    });
+}());

tests/textbox/api.js

@@ -113,5 +113,24 @@
             textbox.destroy();
             assert.equal(input.data("kendoTextBox"), undefined);
         });
+
+        it("setOptions correctly changes placeholder", function() {
+            var textbox = new TextBox(input, { placeholder: "Enter value ..." });
+
+            textbox.setOptions({ placeholder: "test1" });
+            assert.equal(textbox.element.attr("placeholder"), "test1");
+        });
+
+        it("setOptions correctly removes floating label", function() {
+            var textbox = new TextBox(input, {
+                label: {
+                    content: "Name",
+                    floating: true
+                }
+            });
+
+            textbox.setOptions({ label: false });
+            assert.isOk(!textbox.element.closest(".k-floating-label-container").length);
+        });
     });
 }());