@progress/kendo-vue-editor 3.5.4 → 3.6.0

package/dist/es/Editor.js

@@ -65,6 +65,8 @@ import { Pdf } from './tools/pdf';
 import { Print } from './tools/print';
 import { FindAndReplace } from './tools/findReplace';
 import { ApplyColor } from './tools/applyColor';
+import { messages, keys } from './messages/main';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /** @hidden */
 
 export var allTools = {
@@ -247,6 +249,11 @@ var EditorVue2 = {
     loaded: null,
     execute: null
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   props: {
     defaultContent: String,
     value: [Object, String],
@@ -273,7 +280,10 @@ var EditorVue2 = {
       }
     },
     pasteHtml: Function,
-    extendView: Function
+    extendView: Function,
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    ariaLabel: String
   },
   data: function data() {
     return {
@@ -361,6 +371,7 @@ var EditorVue2 = {
         preserveWhitespace = _d === void 0 ? 'full' : _d,
         style = _a.style;
     var view = this.getView();
+    var ls = provideLocalizationService(this);
 
     if (this.view) {
       var editorProps = editorPropsKey.getState(this.view.state);
@@ -476,15 +487,27 @@ var EditorVue2 = {
       ref: setRef(this, 'iframe'),
       frameborder: "0",
       attrs: this.v3 ? undefined : {
-        frameborder: "0"
+        frameborder: "0",
+        title: ls.toLanguageString(keys.iframeTitle, messages[keys.iframeTitle])
       },
+      title: ls.toLanguageString(keys.iframeTitle, messages[keys.iframeTitle]),
       style: contentStyle,
       "class": "k-iframe"
     })]) : h("div", {
       style: contentStyle,
       "class": "k-editor-content"
     }, [h("div", {
-      ref: setRef(this, 'contentElement')
+      ref: setRef(this, 'contentElement'),
+      role: "textbox",
+      attrs: this.v3 ? undefined : {
+        role: "textbox",
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-label": this.$props.ariaLabel
+      },
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-label": this.$props.ariaLabel
     })]), renderDialog.call(this)]);
   },
   methods: {

package/dist/es/EditorProps.d.ts

@@ -178,5 +178,18 @@ export interface EditorProps {
      * Defaults to `full`.
      */
     preserveWhitespace?: boolean | 'full' | string;
+    /**
+     * Identifies the element(s) which will describe the component, similar
+     * to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
 }
 export {};

package/dist/es/messages/main.d.ts

@@ -80,6 +80,7 @@ export declare const messages: {
     "editor.findReplace-prevMatch": string;
     "editor.findReplace-nextMatch": string;
     "editor.findReplace-matches": string;
+    "editor.iframeTitle": string;
 };
 /**
  * @hidden
@@ -163,4 +164,5 @@ export declare const keys: {
     findReplacePrevMatch: string;
     findReplaceNextMatch: string;
     findReplaceMatches: string;
+    iframeTitle: string;
 };

package/dist/es/messages/main.js

@@ -311,6 +311,10 @@ var findReplaceNextMatch = 'editor.findReplace-nextMatch';
  * @hidden
  */
 var findReplaceMatches = 'editor.findReplace-matches';
+/**
+ * @hidden
+ */
+var iframeTitle = 'editor.iframeTitle';
 /**
  * @hidden
  */
@@ -399,6 +403,7 @@ export var messages = (_a = {},
     _a[findReplacePrevMatch] = 'Prev',
     _a[findReplaceNextMatch] = 'Next',
     _a[findReplaceMatches] = '{0} of {1} matches',
+    _a[iframeTitle] = 'Editable area. Press Alt + F10 for toolbar.',
     _a);
 /**
  * @hidden
@@ -481,5 +486,6 @@ export var keys = {
     findReplaceUseRegExp: findReplaceUseRegExp,
     findReplacePrevMatch: findReplacePrevMatch,
     findReplaceNextMatch: findReplaceNextMatch,
-    findReplaceMatches: findReplaceMatches
+    findReplaceMatches: findReplaceMatches,
+    iframeTitle: iframeTitle
 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-editor',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662729240,
+    publishDate: 1663078152,
     version: '',
     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'
 };

package/dist/es/tools/fontStyle.js

@@ -112,7 +112,8 @@ var FontNameVue2 = {
       itemRender: this.customItemRender,
       textField: 'text',
       dataItemKey: 'value',
-      leftRightKeysNavigation: false
+      leftRightKeysNavigation: false,
+      title: defaultItem.text
     }), settings.props);
 
     var dropdown = h(DropDownList, __assign({

package/dist/es/tools/formatBlock.js

@@ -112,7 +112,8 @@ var FormatBlockVue2 = {
       leftRightKeysNavigation: false,
       popupSettings: {
         width: '170px'
-      }
+      },
+      title: defaultItem.text
     }), settings.props);
 
     var dropdown = h(DropDownList, __assign({

package/dist/esm/Editor.js

@@ -65,6 +65,8 @@ import { Pdf } from './tools/pdf.js';
 import { Print } from './tools/print.js';
 import { FindAndReplace } from './tools/findReplace.js';
 import { ApplyColor } from './tools/applyColor.js';
+import { messages, keys } from './messages/main.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /** @hidden */
 
 export var allTools = {
@@ -247,6 +249,11 @@ var EditorVue2 = {
     loaded: null,
     execute: null
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   props: {
     defaultContent: String,
     value: [Object, String],
@@ -273,7 +280,10 @@ var EditorVue2 = {
       }
     },
     pasteHtml: Function,
-    extendView: Function
+    extendView: Function,
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    ariaLabel: String
   },
   data: function data() {
     return {
@@ -361,6 +371,7 @@ var EditorVue2 = {
         preserveWhitespace = _d === void 0 ? 'full' : _d,
         style = _a.style;
     var view = this.getView();
+    var ls = provideLocalizationService(this);
 
     if (this.view) {
       var editorProps = editorPropsKey.getState(this.view.state);
@@ -476,15 +487,27 @@ var EditorVue2 = {
       ref: setRef(this, 'iframe'),
       frameborder: "0",
       attrs: this.v3 ? undefined : {
-        frameborder: "0"
+        frameborder: "0",
+        title: ls.toLanguageString(keys.iframeTitle, messages[keys.iframeTitle])
       },
+      title: ls.toLanguageString(keys.iframeTitle, messages[keys.iframeTitle]),
       style: contentStyle,
       "class": "k-iframe"
     })]) : h("div", {
       style: contentStyle,
       "class": "k-editor-content"
     }, [h("div", {
-      ref: setRef(this, 'contentElement')
+      ref: setRef(this, 'contentElement'),
+      role: "textbox",
+      attrs: this.v3 ? undefined : {
+        role: "textbox",
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-label": this.$props.ariaLabel
+      },
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-label": this.$props.ariaLabel
     })]), renderDialog.call(this)]);
   },
   methods: {

package/dist/esm/EditorProps.d.ts

@@ -178,5 +178,18 @@ export interface EditorProps {
      * Defaults to `full`.
      */
     preserveWhitespace?: boolean | 'full' | string;
+    /**
+     * Identifies the element(s) which will describe the component, similar
+     * to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
 }
 export {};

package/dist/esm/messages/main.d.ts

@@ -80,6 +80,7 @@ export declare const messages: {
     "editor.findReplace-prevMatch": string;
     "editor.findReplace-nextMatch": string;
     "editor.findReplace-matches": string;
+    "editor.iframeTitle": string;
 };
 /**
  * @hidden
@@ -163,4 +164,5 @@ export declare const keys: {
     findReplacePrevMatch: string;
     findReplaceNextMatch: string;
     findReplaceMatches: string;
+    iframeTitle: string;
 };

package/dist/esm/messages/main.js

@@ -311,6 +311,10 @@ var findReplaceNextMatch = 'editor.findReplace-nextMatch';
  * @hidden
  */
 var findReplaceMatches = 'editor.findReplace-matches';
+/**
+ * @hidden
+ */
+var iframeTitle = 'editor.iframeTitle';
 /**
  * @hidden
  */
@@ -399,6 +403,7 @@ export var messages = (_a = {},
     _a[findReplacePrevMatch] = 'Prev',
     _a[findReplaceNextMatch] = 'Next',
     _a[findReplaceMatches] = '{0} of {1} matches',
+    _a[iframeTitle] = 'Editable area. Press Alt + F10 for toolbar.',
     _a);
 /**
  * @hidden
@@ -481,5 +486,6 @@ export var keys = {
     findReplaceUseRegExp: findReplaceUseRegExp,
     findReplacePrevMatch: findReplacePrevMatch,
     findReplaceNextMatch: findReplaceNextMatch,
-    findReplaceMatches: findReplaceMatches
+    findReplaceMatches: findReplaceMatches,
+    iframeTitle: iframeTitle
 };

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-editor',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662729240,
+    publishDate: 1663078152,
     version: '',
     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'
 };

package/dist/esm/tools/fontStyle.js

@@ -112,7 +112,8 @@ var FontNameVue2 = {
       itemRender: this.customItemRender,
       textField: 'text',
       dataItemKey: 'value',
-      leftRightKeysNavigation: false
+      leftRightKeysNavigation: false,
+      title: defaultItem.text
     }), settings.props);
 
     var dropdown = h(DropDownList, __assign({

package/dist/esm/tools/formatBlock.js

@@ -112,7 +112,8 @@ var FormatBlockVue2 = {
       leftRightKeysNavigation: false,
       popupSettings: {
         width: '170px'
-      }
+      },
+      title: defaultItem.text
     }), settings.props);
 
     var dropdown = h(DropDownList, __assign({

package/dist/npm/Editor.js

@@ -104,6 +104,10 @@ var print_1 = require("./tools/print");
 var findReplace_1 = require("./tools/findReplace");
 
 var applyColor_1 = require("./tools/applyColor");
+
+var main_2 = require("./messages/main");
+
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 /** @hidden */
 
 
@@ -287,6 +291,11 @@ var EditorVue2 = {
     loaded: null,
     execute: null
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   props: {
     defaultContent: String,
     value: [Object, String],
@@ -313,7 +322,10 @@ var EditorVue2 = {
       }
     },
     pasteHtml: Function,
-    extendView: Function
+    extendView: Function,
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    ariaLabel: String
   },
   data: function data() {
     return {
@@ -401,6 +413,7 @@ var EditorVue2 = {
         preserveWhitespace = _d === void 0 ? 'full' : _d,
         style = _a.style;
     var view = this.getView();
+    var ls = (0, kendo_vue_intl_1.provideLocalizationService)(this);
 
     if (this.view) {
       var editorProps = props_key_1.editorPropsKey.getState(this.view.state);
@@ -516,15 +529,27 @@ var EditorVue2 = {
       ref: (0, kendo_vue_common_1.setRef)(this, 'iframe'),
       frameborder: "0",
       attrs: this.v3 ? undefined : {
-        frameborder: "0"
+        frameborder: "0",
+        title: ls.toLanguageString(main_2.keys.iframeTitle, main_2.messages[main_2.keys.iframeTitle])
       },
+      title: ls.toLanguageString(main_2.keys.iframeTitle, main_2.messages[main_2.keys.iframeTitle]),
       style: contentStyle,
       "class": "k-iframe"
     })]) : h("div", {
       style: contentStyle,
       "class": "k-editor-content"
     }, [h("div", {
-      ref: (0, kendo_vue_common_1.setRef)(this, 'contentElement')
+      ref: (0, kendo_vue_common_1.setRef)(this, 'contentElement'),
+      role: "textbox",
+      attrs: this.v3 ? undefined : {
+        role: "textbox",
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-label": this.$props.ariaLabel
+      },
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-label": this.$props.ariaLabel
     })]), renderDialog.call(this)]);
   },
   methods: {

package/dist/npm/EditorProps.d.ts

@@ -178,5 +178,18 @@ export interface EditorProps {
      * Defaults to `full`.
      */
     preserveWhitespace?: boolean | 'full' | string;
+    /**
+     * Identifies the element(s) which will describe the component, similar
+     * to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
 }
 export {};

package/dist/npm/messages/main.d.ts

@@ -80,6 +80,7 @@ export declare const messages: {
     "editor.findReplace-prevMatch": string;
     "editor.findReplace-nextMatch": string;
     "editor.findReplace-matches": string;
+    "editor.iframeTitle": string;
 };
 /**
  * @hidden
@@ -163,4 +164,5 @@ export declare const keys: {
     findReplacePrevMatch: string;
     findReplaceNextMatch: string;
     findReplaceMatches: string;
+    iframeTitle: string;
 };

package/dist/npm/messages/main.js

@@ -314,6 +314,10 @@ var findReplaceNextMatch = 'editor.findReplace-nextMatch';
  * @hidden
  */
 var findReplaceMatches = 'editor.findReplace-matches';
+/**
+ * @hidden
+ */
+var iframeTitle = 'editor.iframeTitle';
 /**
  * @hidden
  */
@@ -402,6 +406,7 @@ exports.messages = (_a = {},
     _a[findReplacePrevMatch] = 'Prev',
     _a[findReplaceNextMatch] = 'Next',
     _a[findReplaceMatches] = '{0} of {1} matches',
+    _a[iframeTitle] = 'Editable area. Press Alt + F10 for toolbar.',
     _a);
 /**
  * @hidden
@@ -484,5 +489,6 @@ exports.keys = {
     findReplaceUseRegExp: findReplaceUseRegExp,
     findReplacePrevMatch: findReplacePrevMatch,
     findReplaceNextMatch: findReplaceNextMatch,
-    findReplaceMatches: findReplaceMatches
+    findReplaceMatches: findReplaceMatches,
+    iframeTitle: iframeTitle
 };

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-editor',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662729240,
+    publishDate: 1663078152,
     version: '',
     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'
 };

package/dist/npm/tools/fontStyle.js

@@ -125,7 +125,8 @@ var FontNameVue2 = {
       itemRender: this.customItemRender,
       textField: 'text',
       dataItemKey: 'value',
-      leftRightKeysNavigation: false
+      leftRightKeysNavigation: false,
+      title: defaultItem.text
     }), settings.props);
 
     var dropdown = h(kendo_vue_dropdowns_1.DropDownList, __assign({

package/dist/npm/tools/formatBlock.js

@@ -125,7 +125,8 @@ var FormatBlockVue2 = {
       leftRightKeysNavigation: false,
       popupSettings: {
         width: '170px'
-      }
+      },
+      title: defaultItem.text
     }), settings.props);
 
     var dropdown = h(kendo_vue_dropdowns_1.DropDownList, __assign({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-editor",
   "description": "Kendo UI for Vue Editor package",
-  "version": "3.5.4",
+  "version": "3.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -37,33 +37,33 @@
   "peerDependencies": {
     "@progress/kendo-drawing": "^1.2.0",
     "@progress/kendo-licensing": "^1.0.1",
-    "@progress/kendo-vue-buttons": "^3.0.0",
-    "@progress/kendo-vue-dialogs": "^3.0.0",
-    "@progress/kendo-vue-dropdowns": "^3.0.0",
-    "@progress/kendo-vue-inputs": "^3.0.0",
-    "@progress/kendo-vue-intl": "^3.0.0",
-    "@progress/kendo-vue-layout": "^3.0.0",
-    "@progress/kendo-vue-pdf": "^3.0.0",
-    "@progress/kendo-vue-popup": "^3.0.0",
+    "@progress/kendo-vue-buttons": "^3.6.0",
+    "@progress/kendo-vue-dialogs": "^3.6.0",
+    "@progress/kendo-vue-dropdowns": "^3.6.0",
+    "@progress/kendo-vue-inputs": "^3.6.0",
+    "@progress/kendo-vue-intl": "^3.6.0",
+    "@progress/kendo-vue-layout": "^3.6.0",
+    "@progress/kendo-vue-pdf": "^3.6.0",
+    "@progress/kendo-vue-popup": "^3.6.0",
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
     "@progress/kendo-editor-common": "1.8.0",
-    "@progress/kendo-vue-common": "3.5.4"
+    "@progress/kendo-vue-common": "3.6.0"
   },
   "devDependencies": {
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.0.1",
-    "@progress/kendo-vue-buttons": "3.5.4",
-    "@progress/kendo-vue-dialogs": "3.5.4",
-    "@progress/kendo-vue-dropdowns": "3.5.4",
-    "@progress/kendo-vue-form": "3.5.4",
-    "@progress/kendo-vue-inputs": "3.5.4",
-    "@progress/kendo-vue-intl": "3.5.4",
-    "@progress/kendo-vue-layout": "3.5.4",
-    "@progress/kendo-vue-pdf": "3.5.4",
-    "@progress/kendo-vue-popup": "3.5.4",
-    "@progress/kendo-vue-upload": "3.5.4"
+    "@progress/kendo-vue-buttons": "3.6.0",
+    "@progress/kendo-vue-dialogs": "3.6.0",
+    "@progress/kendo-vue-dropdowns": "3.6.0",
+    "@progress/kendo-vue-form": "3.6.0",
+    "@progress/kendo-vue-inputs": "3.6.0",
+    "@progress/kendo-vue-intl": "3.6.0",
+    "@progress/kendo-vue-layout": "3.6.0",
+    "@progress/kendo-vue-pdf": "3.6.0",
+    "@progress/kendo-vue-popup": "3.6.0",
+    "@progress/kendo-vue-upload": "3.6.0"
   },
   "@progress": {
     "friendlyName": "Editor",