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.

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;