@progress/kendo-react-editor 5.6.0-dev.202208090813 → 5.6.0-dev.202208100947

package/dist/es/Editor.d.ts

@@ -40,6 +40,9 @@ export declare class Editor extends React.Component<EditorProps, EditorStateInte
         contentStyle: PropTypes.Requireable<object>;
         dir: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         tools: PropTypes.Requireable<any[]>;
         keyboardNavigation: PropTypes.Requireable<boolean>;

package/dist/es/Editor.js

@@ -35,7 +35,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { ButtonGroup, Toolbar, ToolbarSeparator } from '@progress/kendo-react-buttons';
+import { ButtonGroup, Toolbar, ToolbarSeparator, toolbarButtons } from '@progress/kendo-react-buttons';
 import { classNames } from '@progress/kendo-react-common';
 import { EditorState, Plugin, PluginKey, EditorView, Schema, baseKeymap, keymap, history, dropCursor, gapCursor, getMark, spacesFix, tableEditing, caretColor } from '@progress/kendo-editor-common';
 import { marks, nodes } from './config/schema';
@@ -49,6 +49,8 @@ var link = EditorToolsSettings.link, bold = EditorToolsSettings.bold, italic = E
 import { firefox } from './utils/browser-detection';
 import * as licensing from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
+import { messages, keys } from './messages';
+import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 /**
  * Represents the [KendoReact Editor component]({% slug overview_editor %}).
  *
@@ -280,6 +282,7 @@ var Editor = /** @class */ (function (_super) {
     Editor.prototype.render = function () {
         var _this = this;
         var _a = this.props, _b = _a.tools, tools = _b === void 0 ? [] : _b, _c = _a.defaultEditMode, defaultEditMode = _c === void 0 ? 'iframe' : _c, _d = _a.preserveWhitespace, preserveWhitespace = _d === void 0 ? 'full' : _d, style = _a.style, className = _a.className;
+        var localization = provideLocalizationService(this);
         if (this.view) {
             var editorProps = editorPropsKey.getState(this.view.state);
             editorProps.preserveWhitespace = preserveWhitespace;
@@ -299,9 +302,9 @@ var Editor = /** @class */ (function (_super) {
                 (React.createElement("div", { className: "k-editor-content" },
                     React.createElement("iframe", { onLoad: firefox ? function () {
                             _this.initialize();
-                        } : undefined, ref: function (e) { return _this.iframe = e; }, frameBorder: "0", style: contentStyle, className: "k-iframe" }))) :
+                        } : undefined, ref: function (e) { return _this.iframe = e; }, frameBorder: "0", title: localization.toLanguageString(keys.iframeTitle, messages[keys.iframeTitle]), style: contentStyle, className: "k-iframe" }))) :
                 (React.createElement("div", { style: contentStyle, className: "k-editor-content" },
-                    React.createElement("div", { ref: function (e) { return _this._contentElement = e; }, suppressContentEditableWarning: true }))),
+                    React.createElement("div", { ref: function (e) { return _this._contentElement = e; }, suppressContentEditableWarning: true, role: "textbox", "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-label": this.props.ariaLabel }))),
             this.renderDialog(EditorDialogs.InsertLinkDialog, link, 'linkDialog')));
     };
     Editor.prototype.initialize = function () {
@@ -370,6 +373,17 @@ var Editor = /** @class */ (function (_super) {
                     }
                 }
                 return !linkDialog;
+            }, 'Alt-F10': function () {
+                var _a;
+                var toolbar = (_a = _this.element) === null || _a === void 0 ? void 0 : _a.querySelector('.k-toolbar');
+                if (toolbar) {
+                    var button = toolbar.querySelector(toolbarButtons.join(','));
+                    if (button) {
+                        button.focus();
+                        return true;
+                    }
+                }
+                return false;
             } });
         var _b = this.props, _c = _b.defaultContent, defaultContent = _c === void 0 ? '' : _c, value = _b.value, onMount = _b.onMount;
         var doc = (value && typeof value !== 'string') ? value :
@@ -403,6 +417,9 @@ var Editor = /** @class */ (function (_super) {
         contentStyle: PropTypes.object,
         dir: PropTypes.string,
         className: PropTypes.string,
+        ariaDescribedBy: PropTypes.string,
+        ariaLabelledBy: PropTypes.string,
+        ariaLabel: PropTypes.string,
         style: PropTypes.object,
         tools: PropTypes.arrayOf(PropTypes.any),
         keyboardNavigation: PropTypes.bool,
@@ -418,3 +435,4 @@ var Editor = /** @class */ (function (_super) {
     return Editor;
 }(React.Component));
 export { Editor };
+registerForLocalization(Editor);

package/dist/es/EditorProps.d.ts

@@ -128,6 +128,18 @@ export interface EditorProps {
      * Sets styles to the Editor.
      */
     style?: React.CSSProperties;
+    /**
+     * 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;
     /**
      * Specifies if the Editor will be resizable.
      */

package/dist/es/messages/index.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/index.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-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1660031856,
+    publishDate: 1660124040,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/tools/fontStyle.js

@@ -80,7 +80,7 @@ export var FontStyleToolNS;
                     defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages[defaultItem.localizationKey]) : defaultItem.text;
                 }
                 var value = new Set(styles).size === 1 ? styles[0] : null;
-                var dropdown = (React.createElement(DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, data: items, defaultItem: defaultItem, itemRender: itemRender, textField: "text", dataItemKey: "value", onChange: this.onChange, style: userSelectNone, leftRightKeysNavigation: false }, ddlProps)));
+                var dropdown = (React.createElement(DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, data: items, defaultItem: defaultItem, itemRender: itemRender, textField: "text", dataItemKey: "value", onChange: this.onChange, style: userSelectNone, leftRightKeysNavigation: false, title: defaultItem.text }, ddlProps)));
                 return render ? render.call(undefined, dropdown, { view: view }) : dropdown;
             };
             return DropDownListTool;

package/dist/es/tools/formatBlock.js

@@ -78,7 +78,7 @@ export var FormatBlockToolNS;
                     defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages[defaultItem.localizationKey]) : defaultItem.text;
                 }
                 var value = new Set(formats).size === 1 ? formats[0] : null;
-                var dropdown = (React.createElement(DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, onChange: this.onChange, itemRender: itemRender, data: items, defaultItem: defaultItem, textField: "text", dataItemKey: "value", style: userSelectNone, leftRightKeysNavigation: false }, ddlProps)));
+                var dropdown = (React.createElement(DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, onChange: this.onChange, itemRender: itemRender, data: items, defaultItem: defaultItem, textField: "text", dataItemKey: "value", style: userSelectNone, leftRightKeysNavigation: false, title: defaultItem.text }, ddlProps)));
                 return render ? render.call(undefined, dropdown, { view: view }) : dropdown;
             };
             return FormatBlockDropDownList;

package/dist/npm/Editor.d.ts

@@ -40,6 +40,9 @@ export declare class Editor extends React.Component<EditorProps, EditorStateInte
         contentStyle: PropTypes.Requireable<object>;
         dir: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         tools: PropTypes.Requireable<any[]>;
         keyboardNavigation: PropTypes.Requireable<boolean>;

package/dist/npm/Editor.js

@@ -52,6 +52,8 @@ var link = toolsSettings_1.EditorToolsSettings.link, bold = toolsSettings_1.Edit
 var browser_detection_1 = require("./utils/browser-detection");
 var licensing = require("@progress/kendo-licensing");
 var package_metadata_1 = require("./package-metadata");
+var messages_1 = require("./messages");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 /**
  * Represents the [KendoReact Editor component]({% slug overview_editor %}).
  *
@@ -283,6 +285,7 @@ var Editor = /** @class */ (function (_super) {
     Editor.prototype.render = function () {
         var _this = this;
         var _a = this.props, _b = _a.tools, tools = _b === void 0 ? [] : _b, _c = _a.defaultEditMode, defaultEditMode = _c === void 0 ? 'iframe' : _c, _d = _a.preserveWhitespace, preserveWhitespace = _d === void 0 ? 'full' : _d, style = _a.style, className = _a.className;
+        var localization = (0, kendo_react_intl_1.provideLocalizationService)(this);
         if (this.view) {
             var editorProps = props_key_1.editorPropsKey.getState(this.view.state);
             editorProps.preserveWhitespace = preserveWhitespace;
@@ -302,9 +305,9 @@ var Editor = /** @class */ (function (_super) {
                 (React.createElement("div", { className: "k-editor-content" },
                     React.createElement("iframe", { onLoad: browser_detection_1.firefox ? function () {
                             _this.initialize();
-                        } : undefined, ref: function (e) { return _this.iframe = e; }, frameBorder: "0", style: contentStyle, className: "k-iframe" }))) :
+                        } : undefined, ref: function (e) { return _this.iframe = e; }, frameBorder: "0", title: localization.toLanguageString(messages_1.keys.iframeTitle, messages_1.messages[messages_1.keys.iframeTitle]), style: contentStyle, className: "k-iframe" }))) :
                 (React.createElement("div", { style: contentStyle, className: "k-editor-content" },
-                    React.createElement("div", { ref: function (e) { return _this._contentElement = e; }, suppressContentEditableWarning: true }))),
+                    React.createElement("div", { ref: function (e) { return _this._contentElement = e; }, suppressContentEditableWarning: true, role: "textbox", "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-label": this.props.ariaLabel }))),
             this.renderDialog(main_1.EditorDialogs.InsertLinkDialog, link, 'linkDialog')));
     };
     Editor.prototype.initialize = function () {
@@ -373,6 +376,17 @@ var Editor = /** @class */ (function (_super) {
                     }
                 }
                 return !linkDialog;
+            }, 'Alt-F10': function () {
+                var _a;
+                var toolbar = (_a = _this.element) === null || _a === void 0 ? void 0 : _a.querySelector('.k-toolbar');
+                if (toolbar) {
+                    var button = toolbar.querySelector(kendo_react_buttons_1.toolbarButtons.join(','));
+                    if (button) {
+                        button.focus();
+                        return true;
+                    }
+                }
+                return false;
             } });
         var _b = this.props, _c = _b.defaultContent, defaultContent = _c === void 0 ? '' : _c, value = _b.value, onMount = _b.onMount;
         var doc = (value && typeof value !== 'string') ? value :
@@ -406,6 +420,9 @@ var Editor = /** @class */ (function (_super) {
         contentStyle: PropTypes.object,
         dir: PropTypes.string,
         className: PropTypes.string,
+        ariaDescribedBy: PropTypes.string,
+        ariaLabelledBy: PropTypes.string,
+        ariaLabel: PropTypes.string,
         style: PropTypes.object,
         tools: PropTypes.arrayOf(PropTypes.any),
         keyboardNavigation: PropTypes.bool,
@@ -421,3 +438,4 @@ var Editor = /** @class */ (function (_super) {
     return Editor;
 }(React.Component));
 exports.Editor = Editor;
+(0, kendo_react_intl_1.registerForLocalization)(Editor);

package/dist/npm/EditorProps.d.ts

@@ -128,6 +128,18 @@ export interface EditorProps {
      * Sets styles to the Editor.
      */
     style?: React.CSSProperties;
+    /**
+     * 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;
     /**
      * Specifies if the Editor will be resizable.
      */

package/dist/npm/messages/index.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/index.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-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1660031856,
+    publishDate: 1660124040,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/tools/fontStyle.js

@@ -83,7 +83,7 @@ var FontStyleToolNS;
                     defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages_1.messages[defaultItem.localizationKey]) : defaultItem.text;
                 }
                 var value = new Set(styles).size === 1 ? styles[0] : null;
-                var dropdown = (React.createElement(kendo_react_dropdowns_1.DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, data: items, defaultItem: defaultItem, itemRender: utils_1.itemRender, textField: "text", dataItemKey: "value", onChange: this.onChange, style: utils_1.userSelectNone, leftRightKeysNavigation: false }, ddlProps)));
+                var dropdown = (React.createElement(kendo_react_dropdowns_1.DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, data: items, defaultItem: defaultItem, itemRender: utils_1.itemRender, textField: "text", dataItemKey: "value", onChange: this.onChange, style: utils_1.userSelectNone, leftRightKeysNavigation: false, title: defaultItem.text }, ddlProps)));
                 return render ? render.call(undefined, dropdown, { view: view }) : dropdown;
             };
             return DropDownListTool;

package/dist/npm/tools/formatBlock.js

@@ -81,7 +81,7 @@ var FormatBlockToolNS;
                     defaultItem.text = defaultItem.localizationKey ? localization.toLanguageString(defaultItem.localizationKey, messages_1.messages[defaultItem.localizationKey]) : defaultItem.text;
                 }
                 var value = new Set(formats).size === 1 ? formats[0] : null;
-                var dropdown = (React.createElement(kendo_react_dropdowns_1.DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, onChange: this.onChange, itemRender: utils_1.itemRender, data: items, defaultItem: defaultItem, textField: "text", dataItemKey: "value", style: utils_1.userSelectNone, leftRightKeysNavigation: false }, ddlProps)));
+                var dropdown = (React.createElement(kendo_react_dropdowns_1.DropDownList, __assign({ value: value ? items.find(function (i) { return i.value === value; }) : value, onChange: this.onChange, itemRender: utils_1.itemRender, data: items, defaultItem: defaultItem, textField: "text", dataItemKey: "value", style: utils_1.userSelectNone, leftRightKeysNavigation: false, title: defaultItem.text }, ddlProps)));
                 return render ? render.call(undefined, dropdown, { view: view }) : dropdown;
             };
             return FormatBlockDropDownList;