@progress/kendo-react-data-tools 5.5.1-dev.202207140841 → 5.5.1-dev.202207252139

package/dist/es/filter/Expression.d.ts

@@ -22,6 +22,7 @@ export interface ExpressionRemoveEvent extends BaseEvent<Expression> {
 export interface ExpressionProps {
     filter: FilterDescriptor;
     fields: Array<FieldSettings>;
+    ariaLabel?: string;
     onChange: (event: ExpressionChangeEvent) => void;
     onRemove: (event: ExpressionRemoveEvent) => void;
 }
@@ -32,6 +33,7 @@ export declare class Expression extends React.Component<ExpressionProps> {
     static propTypes: {
         filter: PropTypes.Validator<object>;
         fields: PropTypes.Validator<any[]>;
+        ariaLabel: PropTypes.Requireable<string>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
         onRemove: PropTypes.Validator<(...args: any[]) => any>;
     };

package/dist/es/filter/Expression.js

@@ -41,7 +41,7 @@ import { Button, Toolbar, ToolbarItem } from '@progress/kendo-react-buttons';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
 import { unaryOperator, stringOperator } from './operators';
-import { messages, filterClose } from '../messages';
+import { messages, filterClose, filterExpressionAriaLabel, filterExpressionDropdownAriaLabel, filterExpressionOperatorDropdownAriaLabel } from '../messages';
 var setInitialValue = function (filter) {
     if (filter.value === undefined && !unaryOperator(filter.operator)) {
         filter.value = stringOperator(filter.operator) ? '' : null;
@@ -112,17 +112,17 @@ var Expression = /** @class */ (function (_super) {
         return _this;
     }
     Expression.prototype.render = function () {
-        var _a = this.props, fields = _a.fields, filter = _a.filter;
-        var field = fields.find(function (f) { return f.name === filter.field; });
         var locService = provideLocalizationService(this);
+        var _a = this.props, fields = _a.fields, filter = _a.filter, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? locService.toLanguageString(filterExpressionAriaLabel, messages[filterExpressionAriaLabel]) : _b;
+        var field = fields.find(function (f) { return f.name === filter.field; });
         var operators = ((field && field.operators) || [])
             .map(function (o) { return (__assign(__assign({}, o), { text: locService.toLanguageString(o.text, messages[o.text] || o.text) })); });
-        return (React.createElement("div", { className: "k-filter-toolbar" },
-            React.createElement(Toolbar, { keyboardNavigation: false },
+        return (React.createElement("div", { className: "k-filter-toolbar", role: "group", "aria-label": ariaLabel },
+            React.createElement(Toolbar, { keyboardNavigation: false, role: "" },
                 React.createElement(ToolbarItem, { className: "k-filter-field" },
-                    React.createElement(DropDownList, { className: "k-filter-dropdown", data: fields, textField: "label", value: fields.find(function (f) { return f.name === filter.field; }), onChange: this.onFieldChange })),
+                    React.createElement(DropDownList, { className: "k-filter-dropdown", data: fields, textField: "label", value: fields.find(function (f) { return f.name === filter.field; }), onChange: this.onFieldChange, ariaLabel: locService.toLanguageString(filterExpressionDropdownAriaLabel, messages[filterExpressionDropdownAriaLabel]) })),
                 React.createElement(ToolbarItem, { className: "k-filter-operator" },
-                    React.createElement(DropDownList, { data: operators, textField: "text", value: operators.find(function (o) { return o.operator === filter.operator; }), onChange: this.onOperatorChange })),
+                    React.createElement(DropDownList, { data: operators, textField: "text", value: operators.find(function (o) { return o.operator === filter.operator; }), onChange: this.onOperatorChange, ariaLabel: locService.toLanguageString(filterExpressionOperatorDropdownAriaLabel, messages[filterExpressionOperatorDropdownAriaLabel]) })),
                 React.createElement(ToolbarItem, { className: "k-filter-value" }, field && React.createElement(field.filter, { filter: filter, onFilterChange: this.onInputChange })),
                 React.createElement(ToolbarItem, null,
                     React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onFilterRemove })))));
@@ -130,6 +130,7 @@ var Expression = /** @class */ (function (_super) {
     Expression.propTypes = {
         filter: PropTypes.object.isRequired,
         fields: PropTypes.array.isRequired,
+        ariaLabel: PropTypes.string,
         onChange: PropTypes.func.isRequired,
         onRemove: PropTypes.func.isRequired
     };

package/dist/es/filter/Filter.d.ts

@@ -32,6 +32,14 @@ export interface FilterProps {
      * The composite filter descriptor value.
      */
     value: CompositeFilterDescriptor;
+    /**
+     * Represents the aria-label prop of the Filter's underlying Group component.
+     */
+    ariaLabelGroup?: string;
+    /**
+     * Represents the aria-label prop of the Filter's underlying Expression component.
+     */
+    ariaLabelExpression?: string;
     /**
      * The Filter onChange event.
      */
@@ -52,6 +60,8 @@ export declare class Filter extends React.Component<FilterProps> {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         fields: (props: FilterProps, propName: string) => Error | null;
+        ariaLabelGroup: PropTypes.Requireable<string>;
+        ariaLabelExpression: PropTypes.Requireable<string>;
         value: PropTypes.Validator<object>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
     };

package/dist/es/filter/Filter.js

@@ -64,7 +64,7 @@ var Filter = /** @class */ (function (_super) {
         return (React.createElement("div", { className: 'k-widget k-filter' + (this.props.className ? ' ' + this.props.className : ''), style: this.props.style },
             React.createElement("ul", { className: "k-filter-container" },
                 React.createElement("li", { className: "k-filter-group-main" },
-                    React.createElement(Group, { filter: this.props.value, fields: this.props.fields, onChange: this.onFilterChange, onRemove: this.onGroupRemove, defaultGroupFilter: this.props.defaultGroupFilter || { logic: 'and', filters: [] } })))));
+                    React.createElement(Group, { filter: this.props.value, fields: this.props.fields, ariaLabel: this.props.ariaLabelGroup, ariaLabelExpression: this.props.ariaLabelExpression, onChange: this.onFilterChange, onRemove: this.onGroupRemove, defaultGroupFilter: this.props.defaultGroupFilter || { logic: 'and', filters: [] } })))));
     };
     /**
      * @hidden
@@ -88,6 +88,8 @@ var Filter = /** @class */ (function (_super) {
             }
             return null;
         },
+        ariaLabelGroup: PropTypes.string,
+        ariaLabelExpression: PropTypes.string,
         value: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired
     };

package/dist/es/filter/Group.d.ts

@@ -22,6 +22,8 @@ export interface GroupRemoveEvent extends BaseEvent<Group> {
 export interface GroupProps {
     filter: CompositeFilterDescriptor;
     fields: Array<FieldSettings>;
+    ariaLabel?: string;
+    ariaLabelExpression?: string;
     onChange: (event: GroupChangeEvent) => void;
     onRemove: (event: GroupRemoveEvent) => void;
     defaultGroupFilter: CompositeFilterDescriptor;
@@ -33,6 +35,8 @@ export declare class Group extends React.Component<GroupProps> {
     static propTypes: {
         filter: PropTypes.Validator<object>;
         fields: PropTypes.Validator<any[]>;
+        ariaLabel: PropTypes.Requireable<string>;
+        ariaLabelExpression: PropTypes.Requireable<string>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
         onRemove: PropTypes.Validator<(...args: any[]) => any>;
         defaultGroupFilter: PropTypes.Validator<object>;

package/dist/es/filter/Group.js

@@ -40,7 +40,7 @@ import { Button, Toolbar, ToolbarItem, ButtonGroup } from '@progress/kendo-react
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
 import { Expression } from './Expression';
 import { stringOperator } from './operators';
-import { messages, filterAndLogic, filterOrLogic, filterAddExpression, filterAddGroup, filterClose } from '../messages';
+import { messages, filterAndLogic, filterOrLogic, filterAddExpression, filterAddGroup, filterClose, filterGroupAriaLabel } from '../messages';
 /**
  * @hidden
  */
@@ -129,11 +129,11 @@ var Group = /** @class */ (function (_super) {
     }
     Group.prototype.render = function () {
         var _this = this;
-        var _a = this.props, fields = _a.fields, filter = _a.filter;
         var locService = provideLocalizationService(this);
+        var _a = this.props, fields = _a.fields, filter = _a.filter, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? locService.toLanguageString(filterGroupAriaLabel, messages[filterGroupAriaLabel]) : _b;
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "k-filter-toolbar" },
-                React.createElement(Toolbar, { keyboardNavigation: false },
+            React.createElement("div", { className: "k-filter-toolbar", role: "toolbar", "aria-label": ariaLabel },
+                React.createElement(Toolbar, { keyboardNavigation: false, role: "" },
                     React.createElement(ToolbarItem, null,
                         React.createElement(ButtonGroup, null,
                             React.createElement(Button, { togglable: true, onClick: this.onLogicAnd, selected: filter.logic === 'and', type: "button" }, locService.toLanguageString(filterAndLogic, messages[filterAndLogic])),
@@ -146,14 +146,16 @@ var Group = /** @class */ (function (_super) {
                         React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onGroupRemove })))),
             filter.filters.length > 0 && (React.createElement("ul", { className: "k-filter-lines" }, filter.filters.map(function (f, idx) {
                 return (React.createElement("li", { key: idx, className: "k-filter-item" }, isCompositeFilterDescriptor(f) ?
-                    React.createElement(Group, { filter: f, fields: fields, onChange: _this.onChange, onRemove: _this.onRemove, defaultGroupFilter: _this.props.defaultGroupFilter })
+                    React.createElement(Group, { filter: f, fields: fields, onChange: _this.onChange, onRemove: _this.onRemove, defaultGroupFilter: _this.props.defaultGroupFilter, ariaLabel: _this.props.ariaLabel, ariaLabelExpression: _this.props.ariaLabelExpression })
                     :
-                        React.createElement(Expression, { filter: f, fields: fields, onChange: _this.onChange, onRemove: _this.onRemove })));
+                        React.createElement(Expression, { filter: f, fields: fields, ariaLabel: _this.props.ariaLabelExpression, onChange: _this.onChange, onRemove: _this.onRemove })));
             })))));
     };
     Group.propTypes = {
         filter: PropTypes.object.isRequired,
         fields: PropTypes.array.isRequired,
+        ariaLabel: PropTypes.string,
+        ariaLabelExpression: PropTypes.string,
         onChange: PropTypes.func.isRequired,
         onRemove: PropTypes.func.isRequired,
         defaultGroupFilter: PropTypes.object.isRequired

package/dist/es/filter/filters/BooleanFilter.d.ts

@@ -32,6 +32,7 @@ export declare class BooleanFilter extends React.Component<BooleanFilterProps> {
             text: PropTypes.Requireable<string>;
             value: PropTypes.Requireable<any>;
         }> | null | undefined)[]>;
+        ariaLabel: PropTypes.Requireable<string>;
         defaultItem: PropTypes.Requireable<any>;
     };
     private data;

package/dist/es/filter/filters/BooleanFilter.js

@@ -31,7 +31,7 @@ var BooleanFilter = /** @class */ (function (_super) {
      * @hidden
      */
     BooleanFilter.prototype.render = function () {
-        return (React.createElement(EnumFilter, { filter: this.props.filter, onFilterChange: this.props.onFilterChange, data: this.props.data || this.data, defaultItem: this.props.defaultItem }));
+        return (React.createElement(EnumFilter, { filter: this.props.filter, onFilterChange: this.props.onFilterChange, data: this.props.data || this.data, defaultItem: this.props.defaultItem, ariaLabel: this.props.ariaLabel }));
     };
     /**
      * @hidden
@@ -40,6 +40,7 @@ var BooleanFilter = /** @class */ (function (_super) {
         filter: PropTypes.object.isRequired,
         onFilterChange: PropTypes.func.isRequired,
         data: PropTypes.arrayOf(PropTypes.shape({ text: PropTypes.string, value: PropTypes.any })),
+        ariaLabel: PropTypes.string,
         defaultItem: PropTypes.any
     };
     return BooleanFilter;

package/dist/es/filter/filters/DateFilter.d.ts

@@ -16,6 +16,7 @@ export declare class DateFilter extends React.Component<DateFilterProps> {
     static propTypes: {
         filter: PropTypes.Validator<object>;
         onFilterChange: PropTypes.Validator<(...args: any[]) => any>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/es/filter/filters/DateFilter.js

@@ -46,14 +46,15 @@ var DateFilter = /** @class */ (function (_super) {
      */
     DateFilter.prototype.render = function () {
         var filter = this.props.filter;
-        return (React.createElement(DatePicker, { value: filter.value || null, onChange: this.onChange }));
+        return (React.createElement(DatePicker, { value: filter.value || null, onChange: this.onChange, ariaLabel: this.props.ariaLabel }));
     };
     /**
      * @hidden
      */
     DateFilter.propTypes = {
         filter: PropTypes.object.isRequired,
-        onFilterChange: PropTypes.func.isRequired
+        onFilterChange: PropTypes.func.isRequired,
+        ariaLabel: PropTypes.string
     };
     return DateFilter;
 }(React.Component));

package/dist/es/filter/filters/EnumFilter.d.ts

@@ -33,6 +33,7 @@ export declare class EnumFilter extends React.Component<EnumFilterProps> {
             value: PropTypes.Requireable<any>;
         }> | null | undefined)[]>;
         defaultItem: PropTypes.Requireable<any>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/es/filter/filters/EnumFilter.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
-import { messages } from './../../messages';
+import { messages, filterEnumFilterDropdownAriaLabel } from './../../messages';
 /**
  * The EnumFilter component used for editing the value of FilterDescriptor object.
  * It renders a DropDownList and allows you to choose a value from the predefined list.
@@ -49,9 +49,9 @@ var EnumFilter = /** @class */ (function (_super) {
      */
     EnumFilter.prototype.render = function () {
         var locService = provideLocalizationService(this);
-        var _a = this.props, filter = _a.filter, _b = _a.data, data = _b === void 0 ? [] : _b, defaultItem = _a.defaultItem;
+        var _a = this.props, filter = _a.filter, _b = _a.data, data = _b === void 0 ? [] : _b, defaultItem = _a.defaultItem, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? locService.toLanguageString(filterEnumFilterDropdownAriaLabel, messages[filterEnumFilterDropdownAriaLabel]) : _c;
         var locData = data.map(function (item) { return (__assign(__assign({}, item), { text: locService.toLanguageString(item.text, messages[item.text] || item.text) })); });
-        return (React.createElement(DropDownList, { value: locData.find(function (i) { return i.value === filter.value; }) || null, onChange: this.onChange, defaultItem: defaultItem, data: locData, textField: "text" }));
+        return (React.createElement(DropDownList, { value: locData.find(function (i) { return i.value === filter.value; }) || null, onChange: this.onChange, defaultItem: defaultItem, data: locData, textField: "text", ariaLabel: ariaLabel }));
     };
     /**
      * @hidden
@@ -60,7 +60,8 @@ var EnumFilter = /** @class */ (function (_super) {
         filter: PropTypes.object.isRequired,
         onFilterChange: PropTypes.func.isRequired,
         data: PropTypes.arrayOf(PropTypes.shape({ text: PropTypes.string, value: PropTypes.any })),
-        defaultItem: PropTypes.any
+        defaultItem: PropTypes.any,
+        ariaLabel: PropTypes.string
     };
     return EnumFilter;
 }(React.Component));

package/dist/es/filter/filters/NumericFilter.js

@@ -27,6 +27,8 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { NumericTextBox } from '@progress/kendo-react-inputs';
+import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { messages, filterNumericFilterAriaLabel } from '../../messages';
 /**
  * The NumericFilter component used for editing numeric value of FilterDescriptor object.
  */
@@ -45,8 +47,9 @@ var NumericFilter = /** @class */ (function (_super) {
      * @hidden
      */
     NumericFilter.prototype.render = function () {
-        var filter = this.props.filter;
-        return (React.createElement(NumericTextBox, { value: typeof filter.value === 'number' ? filter.value : null, onChange: this.onChange }));
+        var locService = provideLocalizationService(this);
+        var _a = this.props, filter = _a.filter, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? locService.toLanguageString(filterNumericFilterAriaLabel, messages[filterNumericFilterAriaLabel]) : _b;
+        return (React.createElement(NumericTextBox, { value: typeof filter.value === 'number' ? filter.value : null, onChange: this.onChange, ariaLabel: ariaLabel }));
     };
     /**
      * @hidden
@@ -58,3 +61,4 @@ var NumericFilter = /** @class */ (function (_super) {
     return NumericFilter;
 }(React.Component));
 export { NumericFilter };
+registerForLocalization(NumericFilter);

package/dist/es/filter/filters/TextFilter.d.ts

@@ -15,6 +15,10 @@ export interface TextFilterProps {
     onFilterChange: (event: {
         nextFilter: FilterDescriptor;
     }) => void;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
 }
 /**
  * The TextFilter component used for editing text value of FilterDescriptor object.
@@ -26,6 +30,7 @@ export declare class TextFilter extends React.Component<TextFilterProps> {
     static propTypes: {
         filter: PropTypes.Validator<object>;
         onFilterChange: PropTypes.Validator<(...args: any[]) => any>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/es/filter/filters/TextFilter.js

@@ -27,6 +27,8 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Input } from '@progress/kendo-react-inputs';
+import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { messages, filterTextFilterAriaLabel } from '../../messages';
 /**
  * The TextFilter component used for editing text value of FilterDescriptor object.
  */
@@ -45,15 +47,19 @@ var TextFilter = /** @class */ (function (_super) {
      * @hidden
      */
     TextFilter.prototype.render = function () {
-        return (React.createElement(Input, { value: this.props.filter.value || '', onChange: this.onChange }));
+        var locService = provideLocalizationService(this);
+        var _a = this.props.ariaLabel, ariaLabel = _a === void 0 ? locService.toLanguageString(filterTextFilterAriaLabel, messages[filterTextFilterAriaLabel]) : _a;
+        return (React.createElement(Input, { value: this.props.filter.value || '', onChange: this.onChange, ariaLabel: ariaLabel }));
     };
     /**
      * @hidden
      */
     TextFilter.propTypes = {
         filter: PropTypes.object.isRequired,
-        onFilterChange: PropTypes.func.isRequired
+        onFilterChange: PropTypes.func.isRequired,
+        ariaLabel: PropTypes.string
     };
     return TextFilter;
 }(React.Component));
 export { TextFilter };
+registerForLocalization(TextFilter);

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

@@ -22,6 +22,10 @@ export declare const pagerLastPage = "pager.lastPage";
  * @hidden
  */
 export declare const pagerItemPerPage = "pager.itemsPerPage";
+/**
+ * @hidden
+ */
+export declare const pagerPageSelection = "pager.pageSelection";
 /**
  * @hidden
  */
@@ -34,6 +38,22 @@ export declare const pagerOf = "pager.of";
  * @hidden
  */
 export declare const pagerTotalPages = "pager.totalPages";
+/**
+ * @hidden
+ */
+export declare const pagerPageNumberLabel = "pager.pageLabel";
+/**
+ * @hidden
+ */
+export declare const pagerAriaKeyshortcuts = "pager.ariaKeyshortcuts";
+/**
+ * @hidden
+ */
+export declare const pagerAriaLabel = "pager.ariaLabel";
+/**
+ * @hidden
+ */
+export declare const pagerMobileSelect = "pager.mobileSelect";
 /**
  * @hidden
  */
@@ -134,6 +154,34 @@ export declare const filterAddGroup = "filter.addGroup";
  * @hidden
  */
 export declare const filterClose = "filter.close";
+/**
+ * @hidden
+ */
+export declare const filterGroupAriaLabel = "filter.groupAriaLabel";
+/**
+ * @hidden
+ */
+export declare const filterExpressionAriaLabel = "filter.expressionAriaLabel";
+/**
+ * @hidden
+ */
+export declare const filterExpressionDropdownAriaLabel = "filter.expressionDropdownAriaLabel";
+/**
+ * @hidden
+ */
+export declare const filterExpressionOperatorDropdownAriaLabel = "filter.expressionOperatorDropdownAriaLabel";
+/**
+ * @hidden
+ */
+export declare const filterEnumFilterDropdownAriaLabel = "filter.enumFilterDropdownAriaLabel";
+/**
+ * @hidden
+ */
+export declare const filterNumericFilterAriaLabel = "filter.numericFilterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const filterTextFilterAriaLabel = "filter.textFilterAriaLabel";
 /**
  * @hidden
  */
@@ -251,6 +299,7 @@ export declare const filterAriaLabel = "filter.ariaLabel";
  */
 export declare const messages: {
     "pager.itemsPerPage": string;
+    "pager.pageSelection": string;
     "pager.info": string;
     "pager.firstPage": string;
     "pager.previousPage": string;
@@ -259,6 +308,10 @@ export declare const messages: {
     "pager.page": string;
     "pager.of": string;
     "pager.totalPages": string;
+    "pager.pageLabel": string;
+    "pager.ariaKeyshortcuts": string;
+    "pager.ariaLabel": string;
+    "pager.mobileSelect": string;
     "sort.ariaLabel": string;
     "filter.ariaLabel": string;
     "filter.eqOperator": string;
@@ -286,6 +339,13 @@ export declare const messages: {
     "filter.addExpression": string;
     "filter.addGroup": string;
     "filter.close": string;
+    "filter.groupAriaLabel": string;
+    "filter.expressionAriaLabel": string;
+    "filter.expressionDropdownAriaLabel": string;
+    "filter.expressionOperatorDropdownAriaLabel": string;
+    "filter.enumFilterDropdownAriaLabel": string;
+    "filter.numericFilterAriaLabel": string;
+    "filter.textFilterAriaLabel": string;
     "columnMenu.filterClearButton": string;
     "columnMenu.filterSubmitButton": string;
     "columnMenu.filterTitle": string;

package/dist/es/messages/index.js

@@ -23,6 +23,10 @@ export var pagerLastPage = 'pager.lastPage';
  * @hidden
  */
 export var pagerItemPerPage = 'pager.itemsPerPage';
+/**
+ * @hidden
+ */
+export var pagerPageSelection = 'pager.pageSelection';
 /**
  * @hidden
  */
@@ -35,6 +39,22 @@ export var pagerOf = 'pager.of';
  * @hidden
  */
 export var pagerTotalPages = 'pager.totalPages';
+/**
+ * @hidden
+ */
+export var pagerPageNumberLabel = 'pager.pageLabel';
+/**
+ * @hidden
+ */
+export var pagerAriaKeyshortcuts = 'pager.ariaKeyshortcuts';
+/**
+ * @hidden
+ */
+export var pagerAriaLabel = 'pager.ariaLabel';
+/**
+ * @hidden
+ */
+export var pagerMobileSelect = 'pager.mobileSelect';
 /**
  * @hidden
  */
@@ -135,6 +155,34 @@ export var filterAddGroup = 'filter.addGroup';
  * @hidden
  */
 export var filterClose = 'filter.close';
+/**
+ * @hidden
+ */
+export var filterGroupAriaLabel = 'filter.groupAriaLabel';
+/**
+ * @hidden
+ */
+export var filterExpressionAriaLabel = 'filter.expressionAriaLabel';
+/**
+ * @hidden
+ */
+export var filterExpressionDropdownAriaLabel = 'filter.expressionDropdownAriaLabel';
+/**
+ * @hidden
+ */
+export var filterExpressionOperatorDropdownAriaLabel = 'filter.expressionOperatorDropdownAriaLabel';
+/**
+ * @hidden
+ */
+export var filterEnumFilterDropdownAriaLabel = 'filter.enumFilterDropdownAriaLabel';
+/**
+ * @hidden
+ */
+export var filterNumericFilterAriaLabel = 'filter.numericFilterAriaLabel';
+/**
+ * @hidden
+ */
+export var filterTextFilterAriaLabel = 'filter.textFilterAriaLabel';
 /**
  * @hidden
  */
@@ -252,6 +300,7 @@ export var filterAriaLabel = 'filter.ariaLabel';
  */
 export var messages = (_a = {},
     _a[pagerItemPerPage] = 'items per page',
+    _a[pagerPageSelection] = 'Select page',
     _a[pagerInfo] = '{0} - {1} of {2} items',
     _a[pagerFirstPage] = 'Go to the first page',
     _a[pagerPreviousPage] = 'Go to the previous page',
@@ -260,6 +309,10 @@ export var messages = (_a = {},
     _a[pagerPage] = 'Page',
     _a[pagerOf] = 'Of',
     _a[pagerTotalPages] = '{0}',
+    _a[pagerPageNumberLabel] = 'Page',
+    _a[pagerAriaKeyshortcuts] = 'Enter ArrowRight ArrowLeft',
+    _a[pagerAriaLabel] = 'Pager',
+    _a[pagerMobileSelect] = 'Select',
     _a[sortAriaLabel] = 'Sortable',
     _a[filterAriaLabel] = 'Filter',
     _a[filterEqOperator] = 'Is equal to',
@@ -287,6 +340,13 @@ export var messages = (_a = {},
     _a[filterAddExpression] = 'Add Expression',
     _a[filterAddGroup] = 'Add Group',
     _a[filterClose] = 'Close',
+    _a[filterGroupAriaLabel] = 'Filter toolbar',
+    _a[filterExpressionAriaLabel] = 'Filter expression row',
+    _a[filterExpressionDropdownAriaLabel] = 'Filter dropdown',
+    _a[filterExpressionOperatorDropdownAriaLabel] = 'Filter operator dropdown',
+    _a[filterEnumFilterDropdownAriaLabel] = 'Select True/False',
+    _a[filterNumericFilterAriaLabel] = 'Enter number',
+    _a[filterTextFilterAriaLabel] = 'Enter number',
     _a[columnMenuFilterClearButton] = 'Clear',
     _a[columnMenuFilterSubmitButton] = 'Filter',
     _a[columnMenuFilterTitle] = 'Filter',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-data-tools',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1657787112,
+    publishDate: 1658784241,
     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/pager/Pager.js

@@ -29,7 +29,7 @@ import * as PropTypes from 'prop-types';
 import { PagerNumericButtons } from './PagerNumericButtons';
 import { PagerInput } from './PagerInput';
 import { PagerPageSizes } from './PagerPageSizes';
-import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPage, pagerInfo } from '../messages';
+import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPage, pagerInfo, pagerAriaKeyshortcuts, pagerAriaLabel } from '../messages';
 import { registerForIntl, registerForLocalization, provideLocalizationService, provideIntlService } from '@progress/kendo-react-intl';
 import { classNames } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
@@ -119,7 +119,7 @@ var Pager = /** @class */ (function (_super) {
         var intlService = provideIntlService(this);
         var currentPage = Math.floor(skip / take) + 1;
         var changer = this.props.type === 'numeric' ?
-            (React.createElement(PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage })) : (React.createElement(PagerInput, { currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap }));
+            (React.createElement(PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap })) : (React.createElement(PagerInput, { currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap }));
         var firstPageMessage = messagesMap ? messagesMap(pagerFirstPage) :
             ({ messageKey: pagerFirstPage, defaultMessage: messages[pagerFirstPage] });
         var previousPageMessage = messagesMap ? messagesMap(pagerPreviousPage) :
@@ -130,12 +130,16 @@ var Pager = /** @class */ (function (_super) {
             ({ messageKey: pagerLastPage, defaultMessage: messages[pagerLastPage] });
         var infoMessage = messagesMap ? messagesMap(pagerInfo) :
             ({ messageKey: pagerInfo, defaultMessage: messages[pagerInfo] });
+        var ariaKeyshortcutsMessage = messagesMap ? messagesMap(pagerAriaKeyshortcuts) :
+            ({ messageKey: pagerAriaKeyshortcuts, defaultMessage: messages[pagerAriaKeyshortcuts] });
+        var ariaLabelMessage = messagesMap ? messagesMap(pagerAriaLabel) :
+            ({ messageKey: pagerAriaLabel, defaultMessage: messages[pagerAriaLabel] });
         var first, prev, next, last;
         if (this.props.previousNext) {
-            first = this.renderButton(1, 'k-link k-pager-nav k-pager-first' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage), 'k-icon k-i-arrow-end-left');
-            prev = this.renderButton(currentPage - 1, 'k-link k-pager-nav' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage), 'k-icon k-i-arrow-60-left');
-            next = this.renderButton(currentPage + 1, 'k-link k-pager-nav' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage), 'k-icon k-i-arrow-60-right');
-            last = this.renderButton(this.totalPages, 'k-link k-pager-nav k-pager-last' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage), 'k-icon k-i-arrow-end-right');
+            first = this.renderButton(1, 'k-link k-pager-nav k-pager-first' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage), 'k-icon k-i-arrow-end-left', (currentPage === 1 ? true : undefined));
+            prev = this.renderButton(currentPage - 1, 'k-link k-pager-nav' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage), 'k-icon k-i-arrow-60-left', (currentPage === 1 ? true : undefined));
+            next = this.renderButton(currentPage + 1, 'k-link k-pager-nav' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage), 'k-icon k-i-arrow-60-right', (currentPage >= this.totalPages ? true : undefined));
+            last = this.renderButton(this.totalPages, 'k-link k-pager-nav k-pager-last' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage), 'k-icon k-i-arrow-end-right', (currentPage >= this.totalPages ? true : undefined));
         }
         var pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, messagesMap: messagesMap }));
         var info = this.props.info && (React.createElement("div", { className: "k-pager-info k-label" }, intlService
@@ -144,7 +148,7 @@ var Pager = /** @class */ (function (_super) {
             Math.min(skip + take, total),
             total
         ])));
-        return (React.createElement("div", { className: classNames('k-pager-wrap k-pager k-widget', this.props.className), style: this.props.style, role: "navigation", ref: function (element) { return _this._element = element; } },
+        return (React.createElement("div", { className: classNames('k-pager-wrap k-pager k-widget', this.props.className), style: this.props.style, role: "application", "aria-roledescription": "pager", "aria-keyshortcuts": localizationService.toLanguageString(ariaKeyshortcutsMessage.messageKey, ariaKeyshortcutsMessage.defaultMessage), "aria-label": localizationService.toLanguageString(ariaLabelMessage.messageKey, ariaLabelMessage.defaultMessage), ref: function (element) { return _this._element = element; } },
             first,
             prev,
             changer,
@@ -153,12 +157,12 @@ var Pager = /** @class */ (function (_super) {
             pagerPageSizes,
             info));
     };
-    Pager.prototype.renderButton = function (page, className, title, icon) {
+    Pager.prototype.renderButton = function (page, className, title, icon, isDisabled) {
         var _this = this;
         return (React.createElement("a", { onClick: function (e) {
                 e.preventDefault();
                 _this.changePage(page, e);
-            }, href: "#", className: className, title: title },
+            }, href: "#", className: className, title: title, role: "button", "aria-disabled": isDisabled },
             React.createElement("span", { className: icon })));
     };
     Object.defineProperty(Pager.prototype, "totalPages", {

package/dist/es/pager/PagerNumericButtons.d.ts

@@ -7,6 +7,10 @@ export interface PagerNumericButtonsProps {
     totalPages: number;
     currentPage: number;
     pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
+    messagesMap?: (messageKey: string) => ({
+        messageKey: string;
+        defaultMessage: string;
+    });
 }
 /**
  * @hidden