@progress/kendo-react-data-tools 5.5.1-dev.202207141327 → 5.6.0-dev.202208040930

package/dist/npm/pager/Pager.js

@@ -122,7 +122,7 @@ var Pager = /** @class */ (function (_super) {
         var intlService = (0, kendo_react_intl_1.provideIntlService)(this);
         var currentPage = Math.floor(skip / take) + 1;
         var changer = this.props.type === 'numeric' ?
-            (React.createElement(PagerNumericButtons_1.PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage })) : (React.createElement(PagerInput_1.PagerInput, { currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap }));
+            (React.createElement(PagerNumericButtons_1.PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap })) : (React.createElement(PagerInput_1.PagerInput, { currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap }));
         var firstPageMessage = messagesMap ? messagesMap(messages_1.pagerFirstPage) :
             ({ messageKey: messages_1.pagerFirstPage, defaultMessage: messages_1.messages[messages_1.pagerFirstPage] });
         var previousPageMessage = messagesMap ? messagesMap(messages_1.pagerPreviousPage) :
@@ -133,12 +133,16 @@ var Pager = /** @class */ (function (_super) {
             ({ messageKey: messages_1.pagerLastPage, defaultMessage: messages_1.messages[messages_1.pagerLastPage] });
         var infoMessage = messagesMap ? messagesMap(messages_1.pagerInfo) :
             ({ messageKey: messages_1.pagerInfo, defaultMessage: messages_1.messages[messages_1.pagerInfo] });
+        var ariaKeyshortcutsMessage = messagesMap ? messagesMap(messages_1.pagerAriaKeyshortcuts) :
+            ({ messageKey: messages_1.pagerAriaKeyshortcuts, defaultMessage: messages_1.messages[messages_1.pagerAriaKeyshortcuts] });
+        var ariaLabelMessage = messagesMap ? messagesMap(messages_1.pagerAriaLabel) :
+            ({ messageKey: messages_1.pagerAriaLabel, defaultMessage: messages_1.messages[messages_1.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_1.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
@@ -147,7 +151,7 @@ var Pager = /** @class */ (function (_super) {
             Math.min(skip + take, total),
             total
         ])));
-        return (React.createElement("div", { className: (0, kendo_react_common_1.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: (0, kendo_react_common_1.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,
@@ -156,12 +160,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/npm/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

package/dist/npm/pager/PagerNumericButtons.js

@@ -18,6 +18,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PagerNumericButtons = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var messages_1 = require("../messages");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var dots = '...';
 /**
  * @hidden
@@ -38,21 +40,26 @@ var PagerNumericButtons = /** @class */ (function (_super) {
     }
     PagerNumericButtons.prototype.render = function () {
         var _this = this;
+        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var prevDots = this.start > 1 && this.renderDots(this.start - 1);
         var postDots = this.end < this.props.totalPages && this.renderDots(this.end + 1);
         var prevOptionDots = this.start > 1 && this.renderOptionDots(this.start - 1);
         var postOptionDots = this.end < this.props.totalPages && this.renderOptionDots(this.end + 1);
+        var mobileSelectMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerMobileSelect) :
+            ({ messageKey: messages_1.pagerMobileSelect, defaultMessage: messages_1.messages[messages_1.pagerMobileSelect] });
+        var pageNumberLabelMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerPageNumberLabel) :
+            ({ messageKey: messages_1.pagerPageNumberLabel, defaultMessage: messages_1.messages[messages_1.pagerPageNumberLabel] });
         var buttons = [];
         for (var idx = this.start; idx <= this.end; idx++) {
             buttons.push(idx);
         }
         var numerics = buttons.map(function (page) { return (React.createElement("li", { key: page },
-            React.createElement("a", { href: "#", onClick: function (e) { return _this.handlePageChange(e, page); }, className: (0, kendo_react_common_1.classNames)('k-link', {
+            React.createElement("a", { role: "button", "aria-label": localizationService.toLanguageString(pageNumberLabelMessage.messageKey, pageNumberLabelMessage.defaultMessage) + ' ' + page, "aria-current": _this.props.currentPage === page ? true : undefined, href: "#", onClick: function (e) { return _this.handlePageChange(e, page); }, className: (0, kendo_react_common_1.classNames)('k-link', {
                     'k-selected': _this.props.currentPage === page
                 }) }, page))); });
         var options = buttons.map(function (page) { return (React.createElement("option", { key: page, className: (0, kendo_react_common_1.classNames)('k-link') }, page)); });
         return (React.createElement("div", { className: "k-pager-numbers-wrap" },
-            React.createElement("select", { className: "k-dropdown", value: this.props.currentPage, onChange: function (e) { return _this.handleSelectPageChange(e); } },
+            React.createElement("select", { className: "k-dropdown", "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: function (e) { return _this.handleSelectPageChange(e); } },
                 prevOptionDots,
                 options,
                 postOptionDots),

package/dist/npm/pager/PagerPageSizes.js

@@ -42,8 +42,10 @@ var PagerPageSizes = /** @class */ (function (_super) {
         }
         var itemPerPageMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerItemPerPage) :
             ({ messageKey: messages_1.pagerItemPerPage, defaultMessage: messages_1.messages[messages_1.pagerItemPerPage] });
+        var pageSelectionMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerPageSelection) :
+            ({ messageKey: messages_1.pagerPageSelection, defaultMessage: messages_1.messages[messages_1.pagerPageSelection] });
         return (React.createElement("span", { className: "k-pager-sizes k-label" },
-            React.createElement(kendo_react_dropdowns_1.DropDownList, { value: this.props.pageSize, data: sizes, onChange: this.pageSizeChange }),
+            React.createElement(kendo_react_dropdowns_1.DropDownList, { value: this.props.pageSize, data: sizes, onChange: this.pageSizeChange, ariaLabel: (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage) }),
             (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(itemPerPageMessage.messageKey, itemPerPageMessage.defaultMessage)));
     };
     return PagerPageSizes;