@progress/kendo-vue-editor 3.7.4-dev.202212300853 → 3.7.4-dev.202301091431

package/dist/es/Editor.js

@@ -386,15 +386,26 @@ var EditorVue2 = {
     };
     var renderTool = function renderTool(currentTool, _index) {
       var ct = allTools[currentTool] || currentTool;
+      var getAriaLabel = function getAriaLabel() {
+        var ariaLabel;
+        if (currentTool === 'ForeColor') {
+          ariaLabel = ls.toLanguageString(keys.foregroundColorAriaLabel, messages[keys.foregroundColorAriaLabel]);
+        } else if (currentTool === 'BackColor') {
+          ariaLabel = ls.toLanguageString(keys.backgroundColor, messages[keys.backgroundColor]);
+        }
+        return ariaLabel;
+      };
       if (allTools[currentTool]) {
         toolindex++;
-        var toolProps = __assign({
+        var toolProps = __assign(__assign({
           view: view,
           dir: this.$props.dir,
           key: toolindex,
           updateGuid: this.updateGuid,
           settings: allTools[currentTool].props
-        }, allTools[currentTool].props);
+        }, allTools[currentTool].props), {
+          ariaLabel: getAriaLabel()
+        });
         return h(this.v3 ? markRaw(allTools[currentTool].comp) : allTools[currentTool].comp, this.v3 ? toolProps : {
           props: toolProps
         });
@@ -439,7 +450,7 @@ var EditorVue2 = {
     }, this);
     return h("div", {
       "class": classNames('k-widget k-editor', {
-        'k-editor-resizable': this.$props.resizable
+        'k-resizable': this.$props.resizable
       }),
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -448,6 +459,7 @@ var EditorVue2 = {
     }, [buttons.length > 0 &&
     // @ts-ignore function children
     h(Toolbar, {
+      "class": 'k-editor-toolbar',
       keyboardNavigation: this.$props.keyboardNavigation,
       attrs: this.v3 ? undefined : {
         keyboardNavigation: this.$props.keyboardNavigation
@@ -544,6 +556,7 @@ var EditorVue2 = {
         this.contentElement = iframeDocument_1.createElement('div');
         iframeDocument_1.body.appendChild(this.contentElement);
         this.contentElement.classList.add('k-content');
+        this.contentElement.setAttribute('role', 'main');
       }
       var dom = this.contentElement;
       if (!dom) {

package/dist/es/config/toolsSettings.d.ts

@@ -158,6 +158,10 @@ export declare namespace EditorToolsSettings {
          * The dir of the applied command.
          */
         dir?: String;
+        /**
+         * The ariaLabel of the applied command.
+         */
+        ariaLabel?: String;
     }
     /**
      * The setting of the IndentAction tool.

package/dist/es/dialogs/FindReplace.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import { Window } from '@progress/kendo-vue-dialogs';
 import { TabStrip, TabStripTab } from '@progress/kendo-vue-layout';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
@@ -252,14 +253,18 @@ var FindAndReplaceDialogVue2 = {
         return [h(Icon, {
           name: "chevron-".concat(isRtl ? 'right' : 'left'),
           attrs: _this.v3 ? undefined : {
-            name: "chevron-".concat(isRtl ? 'right' : 'left')
-          }
+            name: "chevron-".concat(isRtl ? 'right' : 'left'),
+            icon: isRtl ? chevronRightIcon : chevronLeftIcon
+          },
+          icon: isRtl ? chevronRightIcon : chevronLeftIcon
         }), localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])];
       } : [h(Icon, {
         name: "chevron-".concat(isRtl ? 'right' : 'left'),
         attrs: _this.v3 ? undefined : {
-          name: "chevron-".concat(isRtl ? 'right' : 'left')
-        }
+          name: "chevron-".concat(isRtl ? 'right' : 'left'),
+          icon: isRtl ? chevronRightIcon : chevronLeftIcon
+        },
+        icon: isRtl ? chevronRightIcon : chevronLeftIcon
       }), localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])]);
       var nextButton =
       // @ts-ignore function children
@@ -278,14 +283,18 @@ var FindAndReplaceDialogVue2 = {
         return [localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]), h(Icon, {
           name: "chevron-".concat(isRtl ? 'left' : 'right'),
           attrs: _this.v3 ? undefined : {
-            name: "chevron-".concat(isRtl ? 'left' : 'right')
-          }
+            name: "chevron-".concat(isRtl ? 'left' : 'right'),
+            icon: isRtl ? chevronLeftIcon : chevronRightIcon
+          },
+          icon: isRtl ? chevronLeftIcon : chevronRightIcon
         })];
       } : [localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]), h(Icon, {
         name: "chevron-".concat(isRtl ? 'left' : 'right'),
         attrs: _this.v3 ? undefined : {
-          name: "chevron-".concat(isRtl ? 'left' : 'right')
-        }
+          name: "chevron-".concat(isRtl ? 'left' : 'right'),
+          icon: isRtl ? chevronLeftIcon : chevronRightIcon
+        },
+        icon: isRtl ? chevronLeftIcon : chevronRightIcon
       })]);
       return h("div", {
         "class": "k-matches-container"

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

@@ -28,6 +28,8 @@ export declare const messages: {
     "editor.pdf": string;
     "editor.foregroundColor": string;
     "editor.backgroundColor": string;
+    "editor.foregroundColorAriaLabel": string;
+    "editor.backgroundColorAriaLabel": string;
     "editor.createTable": string;
     "editor.insertTableHint": string;
     "editor.addRowBefore": string;
@@ -112,6 +114,8 @@ export declare const keys: {
     pdf: string;
     foregroundColor: string;
     backgroundColor: string;
+    foregroundColorAriaLabel: string;
+    backgroundColorAriaLabel: string;
     createTable: string;
     createTableHint: string;
     addRowBefore: string;

package/dist/es/messages/main.js

@@ -55,6 +55,14 @@ var foregroundColor = 'editor.foregroundColor';
  * @hidden
  */
 var backgroundColor = 'editor.backgroundColor';
+/**
+ * @hidden
+ */
+var foregroundColorAriaLabel = 'editor.foregroundColorAriaLabel';
+/**
+ * @hidden
+ */
+var backgroundColorAriaLabel = 'editor.backgroundColorAriaLabel';
 /**
  * @hidden
  */
@@ -345,6 +353,8 @@ export var messages = (_a = {},
     _a[pdf] = 'Export as PDF',
     _a[foregroundColor] = 'Color',
     _a[backgroundColor] = 'Background color',
+    _a[foregroundColorAriaLabel] = 'Set ForeGround color',
+    _a[backgroundColorAriaLabel] = 'Set Background color',
     // Tables
     _a[createTable] = 'Create a table',
     _a[createTableHint] = 'Create a {0} x {1} table',
@@ -435,6 +445,8 @@ export var keys = {
     pdf: pdf,
     foregroundColor: foregroundColor,
     backgroundColor: backgroundColor,
+    foregroundColorAriaLabel: foregroundColorAriaLabel,
+    backgroundColorAriaLabel: backgroundColorAriaLabel,
     createTable: createTable,
     createTableHint: createTableHint,
     addRowBefore: addRowBefore,

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: 1672389771,
+    publishDate: 1673273667,
     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/applyColor.js

@@ -29,7 +29,8 @@ var ApplyColorVue2 = {
     color: String,
     colorPickerProps: Object,
     commandName: String,
-    dir: String
+    dir: String,
+    ariaLabel: String
   },
   inject: {
     kendoLocalizationService: {
@@ -48,7 +49,8 @@ var ApplyColorVue2 = {
     var h = gh || createElement;
     var _a = this.$props,
       colorPickerProps = _a.colorPickerProps,
-      dir = _a.dir;
+      dir = _a.dir,
+      ariaLabel = _a.ariaLabel;
     var titleKey = colorPickerProps.title;
     var localization = provideLocalizationService(this);
     var cpProps = __assign(__assign({}, colorPickerProps), {
@@ -56,7 +58,8 @@ var ApplyColorVue2 = {
       showButtons: false,
       showClearButton: false,
       showPreview: false,
-      title: titleKey ? localization.toLanguageString(titleKey, messages[titleKey]) : titleKey
+      title: titleKey ? localization.toLanguageString(titleKey, messages[titleKey]) : titleKey,
+      ariaLabel: ariaLabel
     });
     var cp = h(ColorPicker, __assign({
       onChange: this.onChange,

package/dist/esm/Editor.js

@@ -386,15 +386,26 @@ var EditorVue2 = {
     };
     var renderTool = function renderTool(currentTool, _index) {
       var ct = allTools[currentTool] || currentTool;
+      var getAriaLabel = function getAriaLabel() {
+        var ariaLabel;
+        if (currentTool === 'ForeColor') {
+          ariaLabel = ls.toLanguageString(keys.foregroundColorAriaLabel, messages[keys.foregroundColorAriaLabel]);
+        } else if (currentTool === 'BackColor') {
+          ariaLabel = ls.toLanguageString(keys.backgroundColor, messages[keys.backgroundColor]);
+        }
+        return ariaLabel;
+      };
       if (allTools[currentTool]) {
         toolindex++;
-        var toolProps = __assign({
+        var toolProps = __assign(__assign({
           view: view,
           dir: this.$props.dir,
           key: toolindex,
           updateGuid: this.updateGuid,
           settings: allTools[currentTool].props
-        }, allTools[currentTool].props);
+        }, allTools[currentTool].props), {
+          ariaLabel: getAriaLabel()
+        });
         return h(this.v3 ? markRaw(allTools[currentTool].comp) : allTools[currentTool].comp, this.v3 ? toolProps : {
           props: toolProps
         });
@@ -439,7 +450,7 @@ var EditorVue2 = {
     }, this);
     return h("div", {
       "class": classNames('k-widget k-editor', {
-        'k-editor-resizable': this.$props.resizable
+        'k-resizable': this.$props.resizable
       }),
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -448,6 +459,7 @@ var EditorVue2 = {
     }, [buttons.length > 0 &&
     // @ts-ignore function children
     h(Toolbar, {
+      "class": 'k-editor-toolbar',
       keyboardNavigation: this.$props.keyboardNavigation,
       attrs: this.v3 ? undefined : {
         keyboardNavigation: this.$props.keyboardNavigation
@@ -544,6 +556,7 @@ var EditorVue2 = {
         this.contentElement = iframeDocument_1.createElement('div');
         iframeDocument_1.body.appendChild(this.contentElement);
         this.contentElement.classList.add('k-content');
+        this.contentElement.setAttribute('role', 'main');
       }
       var dom = this.contentElement;
       if (!dom) {

package/dist/esm/config/toolsSettings.d.ts

@@ -158,6 +158,10 @@ export declare namespace EditorToolsSettings {
          * The dir of the applied command.
          */
         dir?: String;
+        /**
+         * The ariaLabel of the applied command.
+         */
+        ariaLabel?: String;
     }
     /**
      * The setting of the IndentAction tool.

package/dist/esm/dialogs/FindReplace.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import { Window } from '@progress/kendo-vue-dialogs';
 import { TabStrip, TabStripTab } from '@progress/kendo-vue-layout';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
@@ -252,14 +253,18 @@ var FindAndReplaceDialogVue2 = {
         return [h(Icon, {
           name: "chevron-".concat(isRtl ? 'right' : 'left'),
           attrs: _this.v3 ? undefined : {
-            name: "chevron-".concat(isRtl ? 'right' : 'left')
-          }
+            name: "chevron-".concat(isRtl ? 'right' : 'left'),
+            icon: isRtl ? chevronRightIcon : chevronLeftIcon
+          },
+          icon: isRtl ? chevronRightIcon : chevronLeftIcon
         }), localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])];
       } : [h(Icon, {
         name: "chevron-".concat(isRtl ? 'right' : 'left'),
         attrs: _this.v3 ? undefined : {
-          name: "chevron-".concat(isRtl ? 'right' : 'left')
-        }
+          name: "chevron-".concat(isRtl ? 'right' : 'left'),
+          icon: isRtl ? chevronRightIcon : chevronLeftIcon
+        },
+        icon: isRtl ? chevronRightIcon : chevronLeftIcon
       }), localization.toLanguageString(findReplacePrevMatch, messages[findReplacePrevMatch])]);
       var nextButton =
       // @ts-ignore function children
@@ -278,14 +283,18 @@ var FindAndReplaceDialogVue2 = {
         return [localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]), h(Icon, {
           name: "chevron-".concat(isRtl ? 'left' : 'right'),
           attrs: _this.v3 ? undefined : {
-            name: "chevron-".concat(isRtl ? 'left' : 'right')
-          }
+            name: "chevron-".concat(isRtl ? 'left' : 'right'),
+            icon: isRtl ? chevronLeftIcon : chevronRightIcon
+          },
+          icon: isRtl ? chevronLeftIcon : chevronRightIcon
         })];
       } : [localization.toLanguageString(findReplaceNextMatch, messages[findReplaceNextMatch]), h(Icon, {
         name: "chevron-".concat(isRtl ? 'left' : 'right'),
         attrs: _this.v3 ? undefined : {
-          name: "chevron-".concat(isRtl ? 'left' : 'right')
-        }
+          name: "chevron-".concat(isRtl ? 'left' : 'right'),
+          icon: isRtl ? chevronLeftIcon : chevronRightIcon
+        },
+        icon: isRtl ? chevronLeftIcon : chevronRightIcon
       })]);
       return h("div", {
         "class": "k-matches-container"

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

@@ -28,6 +28,8 @@ export declare const messages: {
     "editor.pdf": string;
     "editor.foregroundColor": string;
     "editor.backgroundColor": string;
+    "editor.foregroundColorAriaLabel": string;
+    "editor.backgroundColorAriaLabel": string;
     "editor.createTable": string;
     "editor.insertTableHint": string;
     "editor.addRowBefore": string;
@@ -112,6 +114,8 @@ export declare const keys: {
     pdf: string;
     foregroundColor: string;
     backgroundColor: string;
+    foregroundColorAriaLabel: string;
+    backgroundColorAriaLabel: string;
     createTable: string;
     createTableHint: string;
     addRowBefore: string;

package/dist/esm/messages/main.js

@@ -55,6 +55,14 @@ var foregroundColor = 'editor.foregroundColor';
  * @hidden
  */
 var backgroundColor = 'editor.backgroundColor';
+/**
+ * @hidden
+ */
+var foregroundColorAriaLabel = 'editor.foregroundColorAriaLabel';
+/**
+ * @hidden
+ */
+var backgroundColorAriaLabel = 'editor.backgroundColorAriaLabel';
 /**
  * @hidden
  */
@@ -345,6 +353,8 @@ export var messages = (_a = {},
     _a[pdf] = 'Export as PDF',
     _a[foregroundColor] = 'Color',
     _a[backgroundColor] = 'Background color',
+    _a[foregroundColorAriaLabel] = 'Set ForeGround color',
+    _a[backgroundColorAriaLabel] = 'Set Background color',
     // Tables
     _a[createTable] = 'Create a table',
     _a[createTableHint] = 'Create a {0} x {1} table',
@@ -435,6 +445,8 @@ export var keys = {
     pdf: pdf,
     foregroundColor: foregroundColor,
     backgroundColor: backgroundColor,
+    foregroundColorAriaLabel: foregroundColorAriaLabel,
+    backgroundColorAriaLabel: backgroundColorAriaLabel,
     createTable: createTable,
     createTableHint: createTableHint,
     addRowBefore: addRowBefore,

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: 1672389771,
+    publishDate: 1673273667,
     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/applyColor.js

@@ -29,7 +29,8 @@ var ApplyColorVue2 = {
     color: String,
     colorPickerProps: Object,
     commandName: String,
-    dir: String
+    dir: String,
+    ariaLabel: String
   },
   inject: {
     kendoLocalizationService: {
@@ -48,7 +49,8 @@ var ApplyColorVue2 = {
     var h = gh || createElement;
     var _a = this.$props,
       colorPickerProps = _a.colorPickerProps,
-      dir = _a.dir;
+      dir = _a.dir,
+      ariaLabel = _a.ariaLabel;
     var titleKey = colorPickerProps.title;
     var localization = provideLocalizationService(this);
     var cpProps = __assign(__assign({}, colorPickerProps), {
@@ -56,7 +58,8 @@ var ApplyColorVue2 = {
       showButtons: false,
       showClearButton: false,
       showPreview: false,
-      title: titleKey ? localization.toLanguageString(titleKey, messages[titleKey]) : titleKey
+      title: titleKey ? localization.toLanguageString(titleKey, messages[titleKey]) : titleKey,
+      ariaLabel: ariaLabel
     });
     var cp = h(ColorPicker, __assign({
       onChange: this.onChange,

package/dist/npm/Editor.js

@@ -392,15 +392,26 @@ var EditorVue2 = {
     };
     var renderTool = function renderTool(currentTool, _index) {
       var ct = exports.allTools[currentTool] || currentTool;
+      var getAriaLabel = function getAriaLabel() {
+        var ariaLabel;
+        if (currentTool === 'ForeColor') {
+          ariaLabel = ls.toLanguageString(main_2.keys.foregroundColorAriaLabel, main_2.messages[main_2.keys.foregroundColorAriaLabel]);
+        } else if (currentTool === 'BackColor') {
+          ariaLabel = ls.toLanguageString(main_2.keys.backgroundColor, main_2.messages[main_2.keys.backgroundColor]);
+        }
+        return ariaLabel;
+      };
       if (exports.allTools[currentTool]) {
         toolindex++;
-        var toolProps = __assign({
+        var toolProps = __assign(__assign({
           view: view,
           dir: this.$props.dir,
           key: toolindex,
           updateGuid: this.updateGuid,
           settings: exports.allTools[currentTool].props
-        }, exports.allTools[currentTool].props);
+        }, exports.allTools[currentTool].props), {
+          ariaLabel: getAriaLabel()
+        });
         return h(this.v3 ? markRaw(exports.allTools[currentTool].comp) : exports.allTools[currentTool].comp, this.v3 ? toolProps : {
           props: toolProps
         });
@@ -445,7 +456,7 @@ var EditorVue2 = {
     }, this);
     return h("div", {
       "class": (0, kendo_vue_common_1.classNames)('k-widget k-editor', {
-        'k-editor-resizable': this.$props.resizable
+        'k-resizable': this.$props.resizable
       }),
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -454,6 +465,7 @@ var EditorVue2 = {
     }, [buttons.length > 0 &&
     // @ts-ignore function children
     h(kendo_vue_buttons_1.Toolbar, {
+      "class": 'k-editor-toolbar',
       keyboardNavigation: this.$props.keyboardNavigation,
       attrs: this.v3 ? undefined : {
         keyboardNavigation: this.$props.keyboardNavigation
@@ -550,6 +562,7 @@ var EditorVue2 = {
         this.contentElement = iframeDocument_1.createElement('div');
         iframeDocument_1.body.appendChild(this.contentElement);
         this.contentElement.classList.add('k-content');
+        this.contentElement.setAttribute('role', 'main');
       }
       var dom = this.contentElement;
       if (!dom) {

package/dist/npm/config/toolsSettings.d.ts

@@ -158,6 +158,10 @@ export declare namespace EditorToolsSettings {
          * The dir of the applied command.
          */
         dir?: String;
+        /**
+         * The ariaLabel of the applied command.
+         */
+        ariaLabel?: String;
     }
     /**
      * The setting of the IndentAction tool.

package/dist/npm/dialogs/FindReplace.js

@@ -10,6 +10,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_vue_dialogs_1 = require("@progress/kendo-vue-dialogs");
 var kendo_vue_layout_1 = require("@progress/kendo-vue-layout");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
@@ -258,14 +259,18 @@ var FindAndReplaceDialogVue2 = {
         return [h(kendo_vue_common_1.Icon, {
           name: "chevron-".concat(isRtl ? 'right' : 'left'),
           attrs: _this.v3 ? undefined : {
-            name: "chevron-".concat(isRtl ? 'right' : 'left')
-          }
+            name: "chevron-".concat(isRtl ? 'right' : 'left'),
+            icon: isRtl ? kendo_svg_icons_1.chevronRightIcon : kendo_svg_icons_1.chevronLeftIcon
+          },
+          icon: isRtl ? kendo_svg_icons_1.chevronRightIcon : kendo_svg_icons_1.chevronLeftIcon
         }), localization.toLanguageString(findReplacePrevMatch, main_1.messages[findReplacePrevMatch])];
       } : [h(kendo_vue_common_1.Icon, {
         name: "chevron-".concat(isRtl ? 'right' : 'left'),
         attrs: _this.v3 ? undefined : {
-          name: "chevron-".concat(isRtl ? 'right' : 'left')
-        }
+          name: "chevron-".concat(isRtl ? 'right' : 'left'),
+          icon: isRtl ? kendo_svg_icons_1.chevronRightIcon : kendo_svg_icons_1.chevronLeftIcon
+        },
+        icon: isRtl ? kendo_svg_icons_1.chevronRightIcon : kendo_svg_icons_1.chevronLeftIcon
       }), localization.toLanguageString(findReplacePrevMatch, main_1.messages[findReplacePrevMatch])]);
       var nextButton =
       // @ts-ignore function children
@@ -284,14 +289,18 @@ var FindAndReplaceDialogVue2 = {
         return [localization.toLanguageString(findReplaceNextMatch, main_1.messages[findReplaceNextMatch]), h(kendo_vue_common_1.Icon, {
           name: "chevron-".concat(isRtl ? 'left' : 'right'),
           attrs: _this.v3 ? undefined : {
-            name: "chevron-".concat(isRtl ? 'left' : 'right')
-          }
+            name: "chevron-".concat(isRtl ? 'left' : 'right'),
+            icon: isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon
+          },
+          icon: isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon
         })];
       } : [localization.toLanguageString(findReplaceNextMatch, main_1.messages[findReplaceNextMatch]), h(kendo_vue_common_1.Icon, {
         name: "chevron-".concat(isRtl ? 'left' : 'right'),
         attrs: _this.v3 ? undefined : {
-          name: "chevron-".concat(isRtl ? 'left' : 'right')
-        }
+          name: "chevron-".concat(isRtl ? 'left' : 'right'),
+          icon: isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon
+        },
+        icon: isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon
       })]);
       return h("div", {
         "class": "k-matches-container"

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

@@ -28,6 +28,8 @@ export declare const messages: {
     "editor.pdf": string;
     "editor.foregroundColor": string;
     "editor.backgroundColor": string;
+    "editor.foregroundColorAriaLabel": string;
+    "editor.backgroundColorAriaLabel": string;
     "editor.createTable": string;
     "editor.insertTableHint": string;
     "editor.addRowBefore": string;
@@ -112,6 +114,8 @@ export declare const keys: {
     pdf: string;
     foregroundColor: string;
     backgroundColor: string;
+    foregroundColorAriaLabel: string;
+    backgroundColorAriaLabel: string;
     createTable: string;
     createTableHint: string;
     addRowBefore: string;

package/dist/npm/messages/main.js

@@ -58,6 +58,14 @@ var foregroundColor = 'editor.foregroundColor';
  * @hidden
  */
 var backgroundColor = 'editor.backgroundColor';
+/**
+ * @hidden
+ */
+var foregroundColorAriaLabel = 'editor.foregroundColorAriaLabel';
+/**
+ * @hidden
+ */
+var backgroundColorAriaLabel = 'editor.backgroundColorAriaLabel';
 /**
  * @hidden
  */
@@ -348,6 +356,8 @@ exports.messages = (_a = {},
     _a[pdf] = 'Export as PDF',
     _a[foregroundColor] = 'Color',
     _a[backgroundColor] = 'Background color',
+    _a[foregroundColorAriaLabel] = 'Set ForeGround color',
+    _a[backgroundColorAriaLabel] = 'Set Background color',
     // Tables
     _a[createTable] = 'Create a table',
     _a[createTableHint] = 'Create a {0} x {1} table',
@@ -438,6 +448,8 @@ exports.keys = {
     pdf: pdf,
     foregroundColor: foregroundColor,
     backgroundColor: backgroundColor,
+    foregroundColorAriaLabel: foregroundColorAriaLabel,
+    backgroundColorAriaLabel: backgroundColorAriaLabel,
     createTable: createTable,
     createTableHint: createTableHint,
     addRowBefore: addRowBefore,

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: 1672389771,
+    publishDate: 1673273667,
     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/applyColor.js

@@ -35,7 +35,8 @@ var ApplyColorVue2 = {
     color: String,
     colorPickerProps: Object,
     commandName: String,
-    dir: String
+    dir: String,
+    ariaLabel: String
   },
   inject: {
     kendoLocalizationService: {
@@ -54,7 +55,8 @@ var ApplyColorVue2 = {
     var h = gh || createElement;
     var _a = this.$props,
       colorPickerProps = _a.colorPickerProps,
-      dir = _a.dir;
+      dir = _a.dir,
+      ariaLabel = _a.ariaLabel;
     var titleKey = colorPickerProps.title;
     var localization = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var cpProps = __assign(__assign({}, colorPickerProps), {
@@ -62,7 +64,8 @@ var ApplyColorVue2 = {
       showButtons: false,
       showClearButton: false,
       showPreview: false,
-      title: titleKey ? localization.toLanguageString(titleKey, main_1.messages[titleKey]) : titleKey
+      title: titleKey ? localization.toLanguageString(titleKey, main_1.messages[titleKey]) : titleKey,
+      ariaLabel: ariaLabel
     });
     var cp = h(kendo_vue_inputs_1.ColorPicker, __assign({
       onChange: this.onChange,