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

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: 1669966596,
+    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.