Sync with Kendo UI Professional

Author: Kendo Bot

docs/api/javascript/ui/notification.md

@@ -357,6 +357,20 @@ Defines a Kendo UI template to be used with the corresponding notification type.
 
 See the [example above](/api/javascript/ui/notification#configuration-templates).
 
+### title `String` *(default: null)*
+
+Defines the title attribute value for the Notification wrapper.
+
+#### Example
+
+    <span id="notification"></span>
+    <script>
+        $("#notification").kendoNotification({
+            title: "Custom title"
+        });
+        $("#notification").getKendoNotification().show("Kendo Notification");
+    </script>
+
 ### width `Number|String` *(default: null)*
 
 Defines the notifications' width. Numbers are treated as pixels.

docs/knowledge-base/chart-align-zero-multiple-axes.md

@@ -0,0 +1,114 @@
+---
+title: Align Zero With Multiple Axes in Chart
+page_title: Align Zero With Multiple Axes in Chart | Kendo UI Chart for jQuery
+description: An example on how to align the zero value for multiple value axes in a Kendo UI Chart.
+type: how-to
+slug: chart-align-zero-multiple-axes
+tags: chart, align, zero, multiple, axes
+res_type: kb
+---
+
+## Environment
+
+<table>
+ <tr>
+  <td>Product</td>
+  <td>Chart for Progress® Kendo UI®</td>
+ </tr>
+</table>
+
+## Description
+
+I have a chart with multiple axes. One has negavive values and the other does not. I want the zero on the two axes to be aligned and to show the negative values on one axis.
+
+## Solution
+
+1. Update the [min](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.min) and [max](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.max) setting for the value axes so they include both positive and negative values.
+1. Specify a function for the [valueAxis.labels.template](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.labels#valueaxislabelstemplate) of the axes where only positive values should be displayed. 
+1. Check the values in the template handler and return only the positive values. For the negative values return an empty string.
+
+
+```dojo
+<div id="chart"></div>
+</div>
+
+<script>
+    function onlyPositive(e) {
+        if (e.value < 0) {
+            return '';
+        }
+
+        return e.value;
+    }
+
+
+    $("#chart").kendoChart({
+        title: {
+            text: "Hybrid car mileage report"
+        },
+        legend: {
+            position: "top"
+        },
+        series: [{
+            type: "column",
+            data: [20, 40, 45, 30, 50],
+            stack: true,
+            name: "on battery",
+            color: "#cc6e38"
+        }, {
+            type: "column",
+            data: [20, 30, 35, 35, 40],
+            stack: true,
+            name: "on gas",
+            color: "#ef955f"
+        }, {
+            type: "line",
+            data: [30, 38, 40, 32, 42],
+            name: "mpg",
+            color: "#ec5e0a",
+            axis: "mpg"
+        }, {
+            type: "line",
+            data: [-7.8, 6.2, 5.9, 7.4, 5.6],
+            name: "l/100 km",
+            color: "#4e4141",
+            axis: "l100km"
+        }],
+        valueAxes: [{
+            title: { text: "miles" },
+            min: -100,
+            max: 100,
+            labels: { template: onlyPositive }
+        }, {
+            name: "km",
+            title: { text: "km" },
+            min: -192,
+            max: 192,
+            majorUnit: 32,
+            labels: { template: onlyPositive }
+        }, {
+            min: -60,
+            max: 60,
+            name: "mpg",
+            title: { text: "miles per gallon" },
+            color: "#ec5e0a",
+            labels: { template: onlyPositive }
+        }, {
+            name: "l100km",
+            title: { text: "liters per 100km" },
+            color: "#4e4141"
+        }],
+        categoryAxis: {
+            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+            // Align the first two value axes to the left
+            // and the last two to the right.
+            //
+            // Right alignment is done by specifying a
+            // crossing value greater than or equal to
+            // the number of categories.
+            axisCrossingValues: [0, 0, 10, 10]
+        }
+    }); 
+
+</script>
+```

docs/knowledge-base/open-column-visibility-menu-on-right-click-on-header.md

@@ -30,7 +30,7 @@ How can I create a popup menu for toggling the visibility of the Kendo UI Grid c
 
 The following example demonstrates how to apply the necessary approach.
 
-```       
+```dojo
         <div id="example">
             <div id="grid"></div>
 

src/kendo.draganddrop.js

@@ -921,6 +921,8 @@ var __meta__ = { // jshint ignore:line
                 }
             });
 
+            clearInterval(this._scrollInterval);
+            this._scrollInterval = null;
             this._cancel(this._trigger(DRAGEND, e));
         },
 

src/kendo.notification.js

@@ -38,11 +38,11 @@ var __meta__ = { // jshint ignore:line
         RIGHT = "right",
         UP = "up",
         NS = ".kendoNotification",
-        WRAPPER = '<div class="k-widget k-popup k-notification"></div>',
+        WRAPPER = '<div role="alert" aria-live="polite" class="k-widget k-popup k-notification"></div>',
         TEMPLATE = '<div class="k-notification-wrap">' +
-                '<span class="k-icon k-i-#=typeIcon#" title="#=typeIcon#"></span>' +
+                '<span class="k-icon k-i-#:typeIcon#" title="#:typeIcon#"></span>' +
                 '<div class="k-notification-content">#=content#</div>' +
-                '<span class="#: closeButton ? "" : "k-hidden"# k-icon k-i-close" title="Hide"></span>' +
+                '<span aria-hidden="true" class="#: closeButton ? "" : "k-hidden"# k-icon k-i-close" title="Hide"></span>' +
             '</div>',
         SAFE_TEMPLATE = TEMPLATE.replace("#=content#", "#:content#");
 
@@ -89,6 +89,7 @@ var __meta__ = { // jshint ignore:line
             width: null,
             height: null,
             templates: [],
+            title: null,
             animation: {
                 open: {
                     effects: "fade:in",
@@ -353,12 +354,15 @@ var __meta__ = { // jshint ignore:line
             var that = this,
                 options = that.options,
                 wrapper = $(WRAPPER),
+                contentId = kendo.guid(),
                 args, defaultArgs;
 
             if (!type) {
                 type = INFO;
             }
 
+            wrapper.attr("aria-label", type);
+
             if (content !== null && content !== undefined && content !== "") {
 
                 if (kendo.isFunction(content)) {
@@ -377,10 +381,16 @@ var __meta__ = { // jshint ignore:line
                     .addClass(KNOTIFICATION + "-" + type)
                     .toggleClass(KNOTIFICATION + "-button", options.button)
                     .toggleClass(KNOTIFICATION + "-closable", options.button)
-                    .attr("data-role", "alert")
+                    .attr({
+                        "data-role": "alert",
+                        title: options.title
+                    })
                     .css({width: options.width, height: options.height})
                     .append(that._getCompiled(type, safe)(args));
 
+                wrapper.find(".k-notification-content").attr("id", contentId);
+                wrapper.attr("aria-describedby", contentId);
+
                 that.angular("compile", function(){
                     return {
                         elements: wrapper,

tests/notification/aria.js

@@ -0,0 +1,75 @@
+(function() {
+    describe("Notification WAI-ARIA", function() {
+        beforeEach(function() {
+
+        });
+        afterEach(function() {
+            if (notification) {
+                notification.destroy();
+            }
+            $(".k-notification").each(function(idx, element) {
+                var popup = $(element).data("kendoPopup");
+                if (popup) {
+                    popup.destroy();
+                }
+                $(element).remove();
+            });
+        });
+
+        it("Notification has appropriate role", function() {
+            createNotification();
+            notification.show("foo");
+
+            var element = $(".k-notification");
+
+            assert.equal(element.attr("role"), "alert");
+        });
+
+        it("Notification has appropriate aria-live", function() {
+            createNotification();
+            notification.show("foo");
+
+            var element = $(".k-notification");
+
+            assert.equal(element.attr("aria-live"), "polite");
+        });
+
+        it("Notification has appropriate aria-label", function() {
+            createNotification();
+            notification.show("foo", "error");
+
+            var element = $(".k-notification");
+
+            assert.equal(element.attr("aria-label"), "error");
+        });
+
+        it("Notification has appropriate aria-describedby", function() {
+            createNotification();
+            notification.show("foo", "error");
+
+            var element = $(".k-notification");
+
+            assert.equal(element.attr("aria-describedby"), element.find(".k-notification-content").attr("id"));
+        });
+
+        it("Notification close button has aria-hidden set", function() {
+            createNotification({
+                button: true
+            });
+            notification.show("foo");
+
+            var element = $(".k-notification .k-i-close");
+
+            assert.equal(element.attr("aria-hidden"), "true");
+        });
+
+        it("Notification does not violate AXE", function(done) {
+            createNotification({
+                button: true
+            });
+            notification.show("foo");
+
+            axeRun($(".k-notification").parent(), done);
+        });
+    });
+}());

tests/notification/initialization.js

@@ -107,7 +107,7 @@
 
             var defaultFunc = notification._getCompiled();
             var params = { typeIcon: "info", content: "foo", closeButton: false };
-            var defaultOutput = '<div class="k-notification-wrap"><span class="k-icon k-i-info" title="info"></span><div class="k-notification-content">foo</div><span class="k-hidden k-icon k-i-close" title="Hide"></span></div>';
+            var defaultOutput = '<div class="k-notification-wrap"><span class="k-icon k-i-info" title="info"></span><div class="k-notification-content">foo</div><span aria-hidden="true" class="k-hidden k-icon k-i-close" title="Hide"></span></div>';
 
             assert.equal(typeof defaultFunc, "function");
             assert.equal(defaultFunc(params), defaultOutput);
@@ -308,6 +308,17 @@
             }, 400);
         });
 
+        it("title is applied to the Notification element", function() {
+            createNotification({
+                title: "custom title"
+            });
+            notification.show("foo");
+
+            var element = $(".k-notification");
+
+            assert.equal(element.attr("title"), "custom title");
+        });
+
         it("hide button is displayed if button property is set to true", function() {
             createNotification({
                 button: true

typescript/kendo.all.d.ts

@@ -7173,6 +7173,7 @@ declare namespace kendo.ui {
         position?: NotificationPosition;
         stacking?: string;
         templates?: NotificationTemplate[];
+        title?: string;
         width?: number|string;
         hide?(e: NotificationHideEvent): void;
         show?(e: NotificationShowEvent): void;