@progress/kendo-vue-notification 3.8.4-dev.202302231351 → 3.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -57,6 +57,10 @@ export interface NotificationProps {
57
57
  * The `close` event which will be triggered when the **Close** button is clicked.
58
58
  */
59
59
  onClose?: (event: NotificationEvent) => void;
60
+ /**
61
+ * Defines the aria-label attribute of the Notification component. Defaults to `undefined`.
62
+ */
63
+ ariaLabel?: string;
60
64
  }
61
65
  /**
62
66
  * @hidden
@@ -5,7 +5,7 @@ var gh = allVue.h;
5
5
  var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  import { packageMetadata } from './package-metadata';
7
7
  import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
8
- import { validatePackage, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
8
+ import { validatePackage, getDefaultSlots, Icon, guid } from '@progress/kendo-vue-common';
9
9
  var buttonTitle = 'Close';
10
10
  /**
11
11
  * @hidden
@@ -38,10 +38,15 @@ var NotificationVue2 = {
38
38
  validator: function validator(value) {
39
39
  return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
40
40
  }
41
+ },
42
+ ariaLabel: {
43
+ type: String,
44
+ default: undefined
41
45
  }
42
46
  },
43
47
  created: function created() {
44
48
  validatePackage(packageMetadata);
49
+ this.notificationContentId = guid();
45
50
  },
46
51
  computed: {
47
52
  computedTheme: function computedTheme() {
@@ -101,8 +106,18 @@ var NotificationVue2 = {
101
106
  return h("div", {
102
107
  "class": "k-notification-container"
103
108
  }, [h("div", {
109
+ role: 'alert',
110
+ attrs: this.v3 ? undefined : {
111
+ role: 'alert',
112
+ "aria-live": 'polite',
113
+ "aria-label": this.$props.ariaLabel,
114
+ "aria-describedby": this.notificationContentId
115
+ },
104
116
  "class": this.wrapperClass,
105
- style: this.$props.style
117
+ style: this.$props.style,
118
+ "aria-live": 'polite',
119
+ "aria-label": this.$props.ariaLabel,
120
+ "aria-describedby": this.notificationContentId
106
121
  }, [type.icon && this.computedSvg.name && h(Icon, {
107
122
  name: this.computedSvg.name,
108
123
  attrs: this.v3 ? undefined : {
@@ -112,11 +127,19 @@ var NotificationVue2 = {
112
127
  icon: this.computedSvg.icon,
113
128
  "class": 'k-notification-status'
114
129
  }), h("div", {
115
- "class": "k-notification-content"
130
+ "class": "k-notification-content",
131
+ id: this.notificationContentId,
132
+ attrs: this.v3 ? undefined : {
133
+ id: this.notificationContentId
134
+ }
116
135
  }, [defaultSlot]), closable && h("span", {
117
136
  "class": "k-notification-actions"
118
137
  }, [h("span", {
119
- "class": "k-notification-action k-notification-close-action"
138
+ "class": "k-notification-action k-notification-close-action",
139
+ "aria-hidden": true,
140
+ attrs: this.v3 ? undefined : {
141
+ "aria-hidden": true
142
+ }
120
143
  }, [h(Icon, {
121
144
  name: "x",
122
145
  attrs: this.v3 ? undefined : {
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-notification',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1677159943,
8
+ publishDate: 1677571456,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
11
11
  };
@@ -57,6 +57,10 @@ export interface NotificationProps {
57
57
  * The `close` event which will be triggered when the **Close** button is clicked.
58
58
  */
59
59
  onClose?: (event: NotificationEvent) => void;
60
+ /**
61
+ * Defines the aria-label attribute of the Notification component. Defaults to `undefined`.
62
+ */
63
+ ariaLabel?: string;
60
64
  }
61
65
  /**
62
66
  * @hidden
@@ -5,7 +5,7 @@ var gh = allVue.h;
5
5
  var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  import { packageMetadata } from './package-metadata.js';
7
7
  import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
8
- import { validatePackage, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
8
+ import { validatePackage, getDefaultSlots, Icon, guid } from '@progress/kendo-vue-common';
9
9
  var buttonTitle = 'Close';
10
10
  /**
11
11
  * @hidden
@@ -38,10 +38,15 @@ var NotificationVue2 = {
38
38
  validator: function validator(value) {
39
39
  return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
40
40
  }
41
+ },
42
+ ariaLabel: {
43
+ type: String,
44
+ default: undefined
41
45
  }
42
46
  },
43
47
  created: function created() {
44
48
  validatePackage(packageMetadata);
49
+ this.notificationContentId = guid();
45
50
  },
46
51
  computed: {
47
52
  computedTheme: function computedTheme() {
@@ -101,8 +106,18 @@ var NotificationVue2 = {
101
106
  return h("div", {
102
107
  "class": "k-notification-container"
103
108
  }, [h("div", {
109
+ role: 'alert',
110
+ attrs: this.v3 ? undefined : {
111
+ role: 'alert',
112
+ "aria-live": 'polite',
113
+ "aria-label": this.$props.ariaLabel,
114
+ "aria-describedby": this.notificationContentId
115
+ },
104
116
  "class": this.wrapperClass,
105
- style: this.$props.style
117
+ style: this.$props.style,
118
+ "aria-live": 'polite',
119
+ "aria-label": this.$props.ariaLabel,
120
+ "aria-describedby": this.notificationContentId
106
121
  }, [type.icon && this.computedSvg.name && h(Icon, {
107
122
  name: this.computedSvg.name,
108
123
  attrs: this.v3 ? undefined : {
@@ -112,11 +127,19 @@ var NotificationVue2 = {
112
127
  icon: this.computedSvg.icon,
113
128
  "class": 'k-notification-status'
114
129
  }), h("div", {
115
- "class": "k-notification-content"
130
+ "class": "k-notification-content",
131
+ id: this.notificationContentId,
132
+ attrs: this.v3 ? undefined : {
133
+ id: this.notificationContentId
134
+ }
116
135
  }, [defaultSlot]), closable && h("span", {
117
136
  "class": "k-notification-actions"
118
137
  }, [h("span", {
119
- "class": "k-notification-action k-notification-close-action"
138
+ "class": "k-notification-action k-notification-close-action",
139
+ "aria-hidden": true,
140
+ attrs: this.v3 ? undefined : {
141
+ "aria-hidden": true
142
+ }
120
143
  }, [h(Icon, {
121
144
  name: "x",
122
145
  attrs: this.v3 ? undefined : {
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-notification',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1677159943,
8
+ publishDate: 1677571456,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
11
11
  };
@@ -57,6 +57,10 @@ export interface NotificationProps {
57
57
  * The `close` event which will be triggered when the **Close** button is clicked.
58
58
  */
59
59
  onClose?: (event: NotificationEvent) => void;
60
+ /**
61
+ * Defines the aria-label attribute of the Notification component. Defaults to `undefined`.
62
+ */
63
+ ariaLabel?: string;
60
64
  }
61
65
  /**
62
66
  * @hidden
@@ -44,10 +44,15 @@ var NotificationVue2 = {
44
44
  validator: function validator(value) {
45
45
  return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
46
46
  }
47
+ },
48
+ ariaLabel: {
49
+ type: String,
50
+ default: undefined
47
51
  }
48
52
  },
49
53
  created: function created() {
50
54
  (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
55
+ this.notificationContentId = (0, kendo_vue_common_1.guid)();
51
56
  },
52
57
  computed: {
53
58
  computedTheme: function computedTheme() {
@@ -107,8 +112,18 @@ var NotificationVue2 = {
107
112
  return h("div", {
108
113
  "class": "k-notification-container"
109
114
  }, [h("div", {
115
+ role: 'alert',
116
+ attrs: this.v3 ? undefined : {
117
+ role: 'alert',
118
+ "aria-live": 'polite',
119
+ "aria-label": this.$props.ariaLabel,
120
+ "aria-describedby": this.notificationContentId
121
+ },
110
122
  "class": this.wrapperClass,
111
- style: this.$props.style
123
+ style: this.$props.style,
124
+ "aria-live": 'polite',
125
+ "aria-label": this.$props.ariaLabel,
126
+ "aria-describedby": this.notificationContentId
112
127
  }, [type.icon && this.computedSvg.name && h(kendo_vue_common_1.Icon, {
113
128
  name: this.computedSvg.name,
114
129
  attrs: this.v3 ? undefined : {
@@ -118,11 +133,19 @@ var NotificationVue2 = {
118
133
  icon: this.computedSvg.icon,
119
134
  "class": 'k-notification-status'
120
135
  }), h("div", {
121
- "class": "k-notification-content"
136
+ "class": "k-notification-content",
137
+ id: this.notificationContentId,
138
+ attrs: this.v3 ? undefined : {
139
+ id: this.notificationContentId
140
+ }
122
141
  }, [defaultSlot]), closable && h("span", {
123
142
  "class": "k-notification-actions"
124
143
  }, [h("span", {
125
- "class": "k-notification-action k-notification-close-action"
144
+ "class": "k-notification-action k-notification-close-action",
145
+ "aria-hidden": true,
146
+ attrs: this.v3 ? undefined : {
147
+ "aria-hidden": true
148
+ }
126
149
  }, [h(kendo_vue_common_1.Icon, {
127
150
  name: "x",
128
151
  attrs: this.v3 ? undefined : {
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-vue-notification',
9
9
  productName: 'Kendo UI for Vue',
10
10
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
11
- publishDate: 1677159943,
11
+ publishDate: 1677571456,
12
12
  version: '',
13
13
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
14
14
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-vue-notification",
3
3
  "description": "Kendo UI for Vue Notification package",
4
- "version": "3.8.4-dev.202302231351",
4
+ "version": "3.8.4",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/telerik/kendo-vue.git"
@@ -40,12 +40,12 @@
40
40
  "vue": "^2.6.12 || ^3.0.2"
41
41
  },
42
42
  "dependencies": {
43
- "@progress/kendo-vue-common": "3.8.4-dev.202302231351"
43
+ "@progress/kendo-vue-common": "3.8.4"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@progress/kendo-licensing": "^1.3.0",
47
47
  "@progress/kendo-svg-icons": "^1.0.0",
48
- "@progress/kendo-vue-animation": "3.8.4-dev.202302231351"
48
+ "@progress/kendo-vue-animation": "3.8.4"
49
49
  },
50
50
  "@progress": {
51
51
  "friendlyName": "Notification",