terra-paginator - npm Package Compare versions

Comparing version 2.84.0 to 2.85.0

CHANGELOG.md

@@ -5,6 +5,14 @@ # Changelog
 
+## 2.85.0 - (September 19, 2023)
+
+* Added
+  * Added visually hidden text with meaningful contexts to help screen reader users understand when they navigate the pagination.
+
+* Changed
+  * Updated all Paginator reduced views to align with the default views styling.
+
 ## 2.84.0 - (August 18, 2023)
 
 * Changed
-  * Minor dependency version bump
+  * Minor dependency version bump.
 
@@ -11,0 +19,0 @@ ## 2.83.0 - (August 11, 2023)

lib/_PaginatorButton.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
@@ -20,3 +20,3 @@ value: true
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
@@ -23,0 +23,0 @@ var cx = _bind.default.bind(_PaginatorModule.default);

lib/ControlledPaginator.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
@@ -83,3 +83,4 @@ value: true
     _this.state = {
-      showReducedPaginator: false
+      showReducedPaginator: false,
+      selectedPageMessage: ''
     };
@@ -92,2 +93,6 @@ return _this;
       var _this2 = this;
+      var _this$props = this.props,
+        intl = _this$props.intl,
+        itemCountPerPage = _this$props.itemCountPerPage,
+        totalCount = _this$props.totalCount;
       return function (event) {
@@ -101,3 +106,21 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         }
+        var message;
+        if (totalCount && itemCountPerPage) {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelectedWithCount'
+          }, {
+            pageNumber: index,
+            pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+          });
+        } else {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelected'
+          }, {
+            pageNumber: index
+          });
+        }
         _this2.props.onPageChange(index);
+        _this2.setState({
+          selectedPageMessage: message
+        });
         return false;
@@ -119,7 +142,7 @@ };
     value: function buildPageButtons(totalPages, onClick) {
-      var _this$props = this.props,
-        totalCount = _this$props.totalCount,
-        itemCountPerPage = _this$props.itemCountPerPage,
-        selectedPage = _this$props.selectedPage,
-        intl = _this$props.intl;
+      var _this$props2 = this.props,
+        intl = _this$props2.intl,
+        itemCountPerPage = _this$props2.itemCountPerPage,
+        selectedPage = _this$props2.selectedPage,
+        totalCount = _this$props2.totalCount;
       var pageSequence = (0, _paginationUtils.pageSet)(selectedPage, (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage));
@@ -152,9 +175,9 @@ var pageButtons = [];
       var theme = this.context;
-      var _this$props2 = this.props,
-        selectedPage = _this$props2.selectedPage,
-        intl = _this$props2.intl,
-        totalCount = _this$props2.totalCount,
-        itemCountPerPage = _this$props2.itemCountPerPage,
-        ariaLabelledBy = _this$props2.ariaLabelledBy,
-        ariaLabel = _this$props2.ariaLabel;
+      var _this$props3 = this.props,
+        selectedPage = _this$props3.selectedPage,
+        intl = _this$props3.intl,
+        totalCount = _this$props3.totalCount,
+        itemCountPerPage = _this$props3.itemCountPerPage,
+        ariaLabelledBy = _this$props3.ariaLabelledBy,
+        ariaLabel = _this$props3.ariaLabel;
       var totalPages = (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage);
@@ -164,5 +187,6 @@ var previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1;
       var paginatorAriaLabel = ariaLabel || 'pagination';
+      var renderFirstandLastButton = totalCount > 0;
       var fullViewChildren = /*#__PURE__*/_react.default.createElement("ul", {
         className: cx('list')
-      }, totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -204,3 +228,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      }))), totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -217,9 +241,12 @@ ariaLabel: intl.formatMessage({
       }))));
-      var fullView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var fullView = /*#__PURE__*/_react.default.createElement("nav", {
         className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, fullViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, fullViewChildren);
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, fullViewChildren);
       return fullView;
@@ -231,9 +258,9 @@ }
       var theme = this.context;
-      var _this$props3 = this.props,
-        selectedPage = _this$props3.selectedPage,
-        intl = _this$props3.intl,
-        totalCount = _this$props3.totalCount,
-        itemCountPerPage = _this$props3.itemCountPerPage,
-        ariaLabelledBy = _this$props3.ariaLabelledBy,
-        ariaLabel = _this$props3.ariaLabel;
+      var _this$props4 = this.props,
+        selectedPage = _this$props4.selectedPage,
+        intl = _this$props4.intl,
+        totalCount = _this$props4.totalCount,
+        itemCountPerPage = _this$props4.itemCountPerPage,
+        ariaLabelledBy = _this$props4.ariaLabelledBy,
+        ariaLabel = _this$props4.ariaLabel;
       var totalPages = (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage);
@@ -243,3 +270,10 @@ var previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1;
       var paginatorAriaLabel = ariaLabel || 'pagination';
-      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      var renderFirstandLastButton = totalCount > 0;
+      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, totalCount && intl.formatMessage({
+        id: 'Terra.paginator.pageIndex'
+      }, {
+        pageNumber: selectedPage
+      })), /*#__PURE__*/_react.default.createElement("ul", {
+        className: cx('list')
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -255,3 +289,3 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.first'
-      })), /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -269,7 +303,3 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.previous'
-      })), totalCount && intl.formatMessage({
-        id: 'Terra.paginator.pageIndex'
-      }, {
-        pageNumber: selectedPage
-      }), /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -289,3 +319,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      })), totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -301,10 +331,13 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.last'
-      })));
-      var reducedView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, reducedViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, reducedViewChildren);
+      })))));
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var reducedView = /*#__PURE__*/_react.default.createElement("nav", {
+        className: cx('paginator', theme.className),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, reducedViewChildren);
       return reducedView;
@@ -311,0 +344,0 @@ }

lib/ControlledProgressivePaginator.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
@@ -85,3 +85,4 @@ value: true
     _this.state = {
-      showReducedPaginator: false
+      showReducedPaginator: false,
+      selectedPageMessage: ''
     };
@@ -94,2 +95,6 @@ return _this;
       var _this2 = this;
+      var _this$props = this.props,
+        intl = _this$props.intl,
+        itemCountPerPage = _this$props.itemCountPerPage,
+        totalCount = _this$props.totalCount;
       return function (event) {
@@ -100,2 +105,20 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         _this2.props.onPageChange(index);
+        var message;
+        if (totalCount && itemCountPerPage) {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelectedWithCount'
+          }, {
+            pageNumber: index,
+            pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+          });
+        } else {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelected'
+          }, {
+            pageNumber: index
+          });
+        }
+        _this2.setState({
+          selectedPageMessage: message
+        });
       };
@@ -117,10 +140,10 @@ }
       var theme = this.context;
-      var _this$props = this.props,
-        selectedPage = _this$props.selectedPage,
-        intl = _this$props.intl,
-        totalCount = _this$props.totalCount,
-        itemCountPerPage = _this$props.itemCountPerPage,
-        ariaLabelledBy = _this$props.ariaLabelledBy,
-        ariaLabel = _this$props.ariaLabel,
-        pageLabel = _this$props.pageLabel;
+      var _this$props2 = this.props,
+        selectedPage = _this$props2.selectedPage,
+        intl = _this$props2.intl,
+        totalCount = _this$props2.totalCount,
+        itemCountPerPage = _this$props2.itemCountPerPage,
+        ariaLabelledBy = _this$props2.ariaLabelledBy,
+        ariaLabel = _this$props2.ariaLabel,
+        pageLabel = _this$props2.pageLabel;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -130,2 +153,3 @@ var previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1;
       var paginatorAriaLabel = ariaLabel || 'pagination';
+      var renderFirstandLastButton = totalCount > 0;
       var _getPageLabel = (0, _PageLabel.default)(pageLabel, selectedPage, totalPages),
@@ -138,3 +162,3 @@ messageId = _getPageLabel.messageId,
         className: cx('progressive-list')
-      }, totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -176,3 +200,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      }))), totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -189,9 +213,12 @@ ariaLabel: intl.formatMessage({
       })))));
-      var fullView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var fullView = /*#__PURE__*/_react.default.createElement("nav", {
         className: cx('paginator', 'progressive', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, fullViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', 'progressive', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, fullViewChildren);
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, fullViewChildren);
       return fullView;
@@ -203,10 +230,10 @@ }
       var theme = this.context;
-      var _this$props2 = this.props,
-        selectedPage = _this$props2.selectedPage,
-        intl = _this$props2.intl,
-        totalCount = _this$props2.totalCount,
-        itemCountPerPage = _this$props2.itemCountPerPage,
-        ariaLabelledBy = _this$props2.ariaLabelledBy,
-        ariaLabel = _this$props2.ariaLabel,
-        pageLabel = _this$props2.pageLabel;
+      var _this$props3 = this.props,
+        selectedPage = _this$props3.selectedPage,
+        intl = _this$props3.intl,
+        totalCount = _this$props3.totalCount,
+        itemCountPerPage = _this$props3.itemCountPerPage,
+        ariaLabelledBy = _this$props3.ariaLabelledBy,
+        ariaLabel = _this$props3.ariaLabel,
+        pageLabel = _this$props3.pageLabel;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -216,6 +243,11 @@ var previousPageIndex = selectedPage === 1 ? 1 : selectedPage - 1;
       var paginatorAriaLabel = ariaLabel || 'pagination';
+      var renderFirstandLastButton = totalCount > 0;
       var _getPageLabel2 = (0, _PageLabel.default)(pageLabel, selectedPage, totalPages),
         messageId = _getPageLabel2.messageId,
         messageAttributes = _getPageLabel2.messageAttributes;
-      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
+        id: messageId
+      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("ul", {
+        className: cx('progressive-list')
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -231,3 +263,3 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.first'
-      })), /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -247,5 +279,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      }))), /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
-        id: messageId
-      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -265,3 +295,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      })), totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -277,10 +307,13 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.last'
-      }))));
-      var reducedView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, reducedViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, reducedViewChildren);
+      })))));
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var reducedView = /*#__PURE__*/_react.default.createElement("nav", {
+        className: cx('paginator', 'progressvie', theme.className),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, reducedViewChildren);
       return reducedView;
@@ -287,0 +320,0 @@ }

lib/Paginator.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
@@ -85,3 +85,4 @@ value: true
       pageSequence: selectedPage && totalCount ? (0, _paginationUtils.pageSet)(selectedPage, (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)) : undefined,
-      showReducedPaginator: false
+      showReducedPaginator: false,
+      selectedPageMessage: ''
     };
@@ -98,2 +99,6 @@ _this.handlePageChange = _this.handlePageChange.bind(_assertThisInitialized(_this));
       var _this2 = this;
+      var _this$props2 = this.props,
+        intl = _this$props2.intl,
+        itemCountPerPage = _this$props2.itemCountPerPage,
+        totalCount = _this$props2.totalCount;
       return function (event) {
@@ -107,6 +112,22 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         }
+        var message;
+        if (totalCount && itemCountPerPage) {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelectedWithCount'
+          }, {
+            pageNumber: index,
+            pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+          });
+        } else {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelected'
+          }, {
+            pageNumber: index
+          });
+        }
         _this2.props.onPageChange(index);
         _this2.setState({
           selectedPage: index,
-          pageSequence: (0, _paginationUtils.pageSet)(index, (0, _paginationUtils.calculatePages)(_this2.props.totalCount, _this2.props.itemCountPerPage))
+          pageSequence: (0, _paginationUtils.pageSet)(index, (0, _paginationUtils.calculatePages)(_this2.props.totalCount, _this2.props.itemCountPerPage)),
+          selectedPageMessage: message
         });
@@ -159,8 +180,8 @@ return false;
       var theme = this.context;
-      var _this$props2 = this.props,
-        intl = _this$props2.intl,
-        totalCount = _this$props2.totalCount,
-        itemCountPerPage = _this$props2.itemCountPerPage,
-        ariaLabelledBy = _this$props2.ariaLabelledBy,
-        ariaLabel = _this$props2.ariaLabel;
+      var _this$props3 = this.props,
+        intl = _this$props3.intl,
+        totalCount = _this$props3.totalCount,
+        itemCountPerPage = _this$props3.itemCountPerPage,
+        ariaLabelledBy = _this$props3.ariaLabelledBy,
+        ariaLabel = _this$props3.ariaLabel;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -171,5 +192,6 @@ var selectedPage = this.state.selectedPage;
       var paginatorAriaLabel = ariaLabel || 'pagination';
+      var renderFirstandLastButton = totalCount > 0;
       var fullViewChildren = /*#__PURE__*/_react.default.createElement("ul", {
         className: cx('list')
-      }, totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -211,3 +233,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      }))), totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -224,9 +246,12 @@ ariaLabel: intl.formatMessage({
       }))));
-      var fullView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var fullView = /*#__PURE__*/_react.default.createElement("nav", {
         className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, fullViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, fullViewChildren);
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, fullViewChildren);
       return fullView;
@@ -238,8 +263,8 @@ }
       var theme = this.context;
-      var _this$props3 = this.props,
-        intl = _this$props3.intl,
-        totalCount = _this$props3.totalCount,
-        itemCountPerPage = _this$props3.itemCountPerPage,
-        ariaLabelledBy = _this$props3.ariaLabelledBy,
-        ariaLabel = _this$props3.ariaLabel;
+      var _this$props4 = this.props,
+        intl = _this$props4.intl,
+        totalCount = _this$props4.totalCount,
+        itemCountPerPage = _this$props4.itemCountPerPage,
+        ariaLabelledBy = _this$props4.ariaLabelledBy,
+        ariaLabel = _this$props4.ariaLabel;
       var totalPages = this.props.totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -250,3 +275,10 @@ var selectedPage = this.state.selectedPage;
       var paginatorAriaLabel = ariaLabel || 'pagination';
-      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      var renderFirstandLastButton = totalCount > 0;
+      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, totalCount && intl.formatMessage({
+        id: 'Terra.paginator.pageIndex'
+      }, {
+        pageNumber: selectedPage
+      })), /*#__PURE__*/_react.default.createElement("ul", {
+        className: cx('list')
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -262,3 +294,3 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.first'
-      })), /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -278,7 +310,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      })), totalCount && intl.formatMessage({
-        id: 'Terra.paginator.pageIndex'
-      }, {
-        pageNumber: selectedPage
-      }), /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -298,3 +326,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      })), totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -310,10 +338,13 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.last'
-      })));
-      var reducedView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, reducedViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', !totalCount && 'pageless', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, reducedViewChildren);
+      })))));
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var reducedView = /*#__PURE__*/_react.default.createElement("nav", {
+        className: cx('paginator', theme.className),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, reducedViewChildren);
       return reducedView;
@@ -320,0 +351,0 @@ }

lib/ProgressivePaginator.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
@@ -83,3 +83,4 @@ value: true
       selectedPage: selectedPage || 1,
-      showReducedPaginator: false
+      showReducedPaginator: false,
+      selectedPageMessage: ''
     };
@@ -96,2 +97,6 @@ _this.handlePageChange = _this.handlePageChange.bind(_assertThisInitialized(_this));
       var _this2 = this;
+      var _this$props = this.props,
+        intl = _this$props.intl,
+        itemCountPerPage = _this$props.itemCountPerPage,
+        totalCount = _this$props.totalCount;
       return function (event) {
@@ -102,4 +107,20 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         _this2.props.onPageChange(index);
+        var message;
+        if (totalCount && itemCountPerPage) {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelectedWithCount'
+          }, {
+            pageNumber: index,
+            pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+          });
+        } else {
+          message = intl.formatMessage({
+            id: 'Terra.paginator.pageSelected'
+          }, {
+            pageNumber: index
+          });
+        }
         _this2.setState({
-          selectedPage: index
+          selectedPage: index,
+          selectedPageMessage: message
         });
@@ -122,9 +143,9 @@ };
       var theme = this.context;
-      var _this$props = this.props,
-        intl = _this$props.intl,
-        totalCount = _this$props.totalCount,
-        itemCountPerPage = _this$props.itemCountPerPage,
-        ariaLabelledBy = _this$props.ariaLabelledBy,
-        ariaLabel = _this$props.ariaLabel,
-        pageLabel = _this$props.pageLabel;
+      var _this$props2 = this.props,
+        intl = _this$props2.intl,
+        totalCount = _this$props2.totalCount,
+        itemCountPerPage = _this$props2.itemCountPerPage,
+        ariaLabelledBy = _this$props2.ariaLabelledBy,
+        ariaLabel = _this$props2.ariaLabel,
+        pageLabel = _this$props2.pageLabel;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -135,2 +156,3 @@ var selectedPage = this.state.selectedPage;
       var paginatorAriaLabel = ariaLabel || 'pagination';
+      var renderFirstandLastButton = totalCount > 0;
       var _getPageLabel = (0, _PageLabel.default)(pageLabel, selectedPage, totalPages),
@@ -143,3 +165,3 @@ messageId = _getPageLabel.messageId,
         className: cx('progressive-list')
-      }, totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -181,3 +203,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      }))), totalCount && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -194,9 +216,12 @@ ariaLabel: intl.formatMessage({
       })))));
-      var fullView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var fullView = /*#__PURE__*/_react.default.createElement("nav", {
         className: cx('paginator', 'progressive', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, fullViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', 'progressive', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, fullViewChildren);
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, fullViewChildren);
       return fullView;
@@ -208,9 +233,9 @@ }
       var theme = this.context;
-      var _this$props2 = this.props,
-        intl = _this$props2.intl,
-        totalCount = _this$props2.totalCount,
-        itemCountPerPage = _this$props2.itemCountPerPage,
-        ariaLabelledBy = _this$props2.ariaLabelledBy,
-        ariaLabel = _this$props2.ariaLabel,
-        pageLabel = _this$props2.pageLabel;
+      var _this$props3 = this.props,
+        intl = _this$props3.intl,
+        totalCount = _this$props3.totalCount,
+        itemCountPerPage = _this$props3.itemCountPerPage,
+        ariaLabelledBy = _this$props3.ariaLabelledBy,
+        ariaLabel = _this$props3.ariaLabel,
+        pageLabel = _this$props3.pageLabel;
       var totalPages = totalCount ? (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage) : 0;
@@ -221,6 +246,11 @@ var selectedPage = this.state.selectedPage;
       var paginatorAriaLabel = ariaLabel || 'pagination';
+      var renderFirstandLastButton = totalCount > 0;
       var _getPageLabel2 = (0, _PageLabel.default)(pageLabel, selectedPage, totalPages),
         messageId = _getPageLabel2.messageId,
         messageAttributes = _getPageLabel2.messageAttributes;
-      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
+        id: messageId
+      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("ul", {
+        className: cx('progressive-list')
+      }, renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -236,3 +266,3 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.first'
-      })), /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === 1,
@@ -252,5 +282,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      }))), /*#__PURE__*/_react.default.createElement("div", null, intl.formatMessage({
-        id: messageId
-      }, messageAttributes)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -270,3 +298,3 @@ ariaLabel: intl.formatMessage({
         className: cx('icon')
-      })), totalCount && /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
+      }))), renderFirstandLastButton && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_PaginatorButton.default, {
         ariaDisabled: selectedPage === totalPages,
@@ -282,10 +310,13 @@ ariaLabel: intl.formatMessage({
         id: 'Terra.paginator.last'
-      }))));
-      var reducedView = ariaLabelledBy ? /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', theme.className),
-        "aria-labelledby": ariaLabelledBy
-      }, reducedViewChildren) : /*#__PURE__*/_react.default.createElement("nav", {
-        className: cx('paginator', theme.className),
-        "aria-label": paginatorAriaLabel
-      }, reducedViewChildren);
+      })))));
+      var navigationMessage = /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        text: this.state.selectedPageMessage
+      });
+      var reducedView = /*#__PURE__*/_react.default.createElement("nav", {
+        className: cx('paginator', 'progressive', theme.className),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabelledBy ? undefined : paginatorAriaLabel
+      }, navigationMessage, reducedViewChildren);
       return reducedView;
@@ -292,0 +323,0 @@ }

package.json

 {
   "name": "terra-paginator",
   "main": "lib/Paginator.js",
-  "version": "2.84.0",
+  "version": "2.85.0",
   "description": "Paginator to be used for data sets of known and unknown size. Provides first, last, previous, next, and paged functionality.",
@@ -52,3 +52,3 @@ "repository": {
   },
-  "gitHead": "f835d737f6862fcc7953ca61840c2959b21e675c"
+  "gitHead": "04fcccf72b43ef5be7bb27d6bec329f762571e47"
 }

src/ControlledPaginator.jsx

@@ -60,2 +60,3 @@ import React from 'react';
       showReducedPaginator: false,
+      selectedPageMessage: '',
     };
@@ -65,2 +66,8 @@ }
   handlePageChange(index) {
+    const {
+      intl,
+      itemCountPerPage,
+      totalCount,
+    } = this.props;
+
     return (event) => {
@@ -77,3 +84,11 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
 
+      let message;
+      if (totalCount && itemCountPerPage) {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+      } else {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
+      }
+
       this.props.onPageChange(index);
+      this.setState({ selectedPageMessage: message });
 
@@ -93,6 +108,6 @@ return false;
     const {
-      totalCount,
+      intl,
       itemCountPerPage,
       selectedPage,
-      intl,
+      totalCount,
     } = this.props;
@@ -145,2 +160,3 @@ const pageSequence = pageSet(selectedPage, calculatePages(totalCount, itemCountPerPage));
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
@@ -150,3 +166,3 @@ const fullViewChildren = (
         {
-          totalCount && (
+          renderFirstandLastButton && (
             <li>
@@ -194,3 +210,3 @@ <PaginatorButton
         {
-          totalCount && (
+          renderFirstandLastButton && (
             <li>
@@ -213,14 +229,17 @@ <PaginatorButton
 
-    const fullView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {fullViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-label={paginatorAriaLabel}>
-          {fullViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const fullView = (
+      <nav
+        className={cx('paginator', !totalCount && 'pageless', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {fullViewChildren}
+      </nav>
+    );
+
     return fullView;
@@ -243,71 +262,89 @@ }
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
     const reducedViewChildren = (
       <>
-        {
-          totalCount && (
-          <PaginatorButton
-            ariaDisabled={selectedPage === 1}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
-            className={cx(['nav-link', 'left-controls', selectedPage === 1 && 'is-disabled'])}
-            disabled={selectedPage === 1}
-            onClick={this.handlePageChange(1)}
-            onKeyDown={this.handlePageChange(1)}
-          >
-            {intl.formatMessage({ id: 'Terra.paginator.first' })}
-          </PaginatorButton>
-          )
-        }
-        <PaginatorButton
-          ariaDisabled={selectedPage === 1}
-          ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
-          className={cx(['nav-link', 'left-controls', 'previous', selectedPage === 1 && 'is-disabled'])}
-          disabled={selectedPage === 1}
-          onClick={this.handlePageChange(previousPageIndex)}
-          onKeyDown={this.handlePageChange(previousPageIndex)}
-        >
-          <span className={cx('icon')} />
-          {intl.formatMessage({ id: 'Terra.paginator.previous' })}
-        </PaginatorButton>
-        {totalCount && intl.formatMessage({ id: 'Terra.paginator.pageIndex' }, { pageNumber: selectedPage })}
-        <PaginatorButton
-          ariaDisabled={selectedPage === totalPages}
-          ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
-          className={cx(['nav-link', 'right-controls', 'next', 'icon-only', selectedPage === totalPages && 'is-disabled'])}
-          disabled={selectedPage === totalPages}
-          onClick={this.handlePageChange(nextPageIndex)}
-          onKeyDown={this.handlePageChange(nextPageIndex)}
-        >
-          <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
-          <span className={cx('icon')} />
-        </PaginatorButton>
-        {
-          totalCount && (
-          <PaginatorButton
-            ariaDisabled={selectedPage === totalPages}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
-            className={cx(['nav-link', 'right-controls', selectedPage === totalPages && 'is-disabled'])}
-            disabled={selectedPage === totalPages}
-            onClick={this.handlePageChange(totalPages)}
-            onKeyDown={this.handlePageChange(totalPages)}
-          >
-            {intl.formatMessage({ id: 'Terra.paginator.last' })}
-          </PaginatorButton>
-          )
-        }
+        <div>
+          {
+            totalCount && intl.formatMessage({ id: 'Terra.paginator.pageIndex' }, { pageNumber: selectedPage })
+          }
+        </div>
+        <ul className={cx('list')}>
+          {
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === 1}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
+                  className={cx(['nav-link', 'left-controls', selectedPage === 1 && 'is-disabled'])}
+                  disabled={selectedPage === 1}
+                  onClick={this.handlePageChange(1)}
+                  onKeyDown={this.handlePageChange(1)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.first' })}
+                </PaginatorButton>
+              </li>
+            )
+          }
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === 1}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
+              className={cx(['nav-link', 'left-controls', 'previous', selectedPage === 1 && 'is-disabled'])}
+              disabled={selectedPage === 1}
+              onClick={this.handlePageChange(previousPageIndex)}
+              onKeyDown={this.handlePageChange(previousPageIndex)}
+            >
+              <span className={cx('icon')} />
+              {intl.formatMessage({ id: 'Terra.paginator.previous' })}
+            </PaginatorButton>
+          </li>
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === totalPages}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
+              className={cx(['nav-link', 'right-controls', 'next', 'icon-only', selectedPage === totalPages && 'is-disabled'])}
+              disabled={selectedPage === totalPages}
+              onClick={this.handlePageChange(nextPageIndex)}
+              onKeyDown={this.handlePageChange(nextPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
+          {
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === totalPages}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
+                  className={cx(['nav-link', 'right-controls', selectedPage === totalPages && 'is-disabled'])}
+                  disabled={selectedPage === totalPages}
+                  onClick={this.handlePageChange(totalPages)}
+                  onKeyDown={this.handlePageChange(totalPages)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.last' })}
+                </PaginatorButton>
+              </li>
+            )
+          }
+        </ul>
       </>
     );
 
-    const reducedView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {reducedViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-label={paginatorAriaLabel}>
-          {reducedViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const reducedView = (
+      <nav
+        className={cx('paginator', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {reducedViewChildren}
+      </nav>
+    );
+
     return reducedView;
@@ -314,0 +351,0 @@ }

src/ControlledProgressivePaginator.jsx

@@ -62,2 +62,3 @@ import React from 'react';
       showReducedPaginator: false,
+      selectedPageMessage: '',
     };
@@ -67,2 +68,8 @@ }
   handlePageChange(index) {
+    const {
+      intl,
+      itemCountPerPage,
+      totalCount,
+    } = this.props;
+
     return (event) => {
@@ -74,2 +81,11 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
       this.props.onPageChange(index);
+
+      let message;
+      if (totalCount && itemCountPerPage) {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+      } else {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
+      }
+
+      this.setState({ selectedPageMessage: message });
     };
@@ -100,2 +116,3 @@ }
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
@@ -113,3 +130,3 @@ const { messageId, messageAttributes } = getPageLabel(pageLabel, selectedPage, totalPages);
           {
-            totalCount && (
+            renderFirstandLastButton && (
               <li>
@@ -156,3 +173,3 @@ <PaginatorButton
           {
-            (totalCount) && (
+            renderFirstandLastButton && (
               <li>
@@ -176,14 +193,17 @@ <PaginatorButton
 
-    const fullView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', 'progressive', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {fullViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', 'progressive', theme.className)} aria-label={paginatorAriaLabel}>
-          {fullViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const fullView = (
+      <nav
+        className={cx('paginator', 'progressive', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {fullViewChildren}
+      </nav>
+    );
+
     return fullView;
@@ -207,2 +227,3 @@ }
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
@@ -215,74 +236,83 @@ const { messageId, messageAttributes } = getPageLabel(pageLabel, selectedPage, totalPages);
           {
-            (totalCount) && (
-              <PaginatorButton
-                ariaDisabled={selectedPage === 1}
-                ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
-                className={cx(['nav-link', selectedPage === 1 ? 'is-disabled' : null])}
-                disabled={selectedPage === 1}
-                onClick={this.handlePageChange(1)}
-                onKeyDown={this.handlePageChange(1)}
-              >
-                {intl.formatMessage({ id: 'Terra.paginator.first' })}
-              </PaginatorButton>
-            )
+            intl.formatMessage({ id: messageId }, messageAttributes)
           }
-          <PaginatorButton
-            ariaDisabled={selectedPage === 1}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
-            className={cx(['nav-link', 'previous', 'icon-only', selectedPage === 1 ? 'is-disabled' : null])}
-            disabled={selectedPage === 1}
-            onClick={this.handlePageChange(previousPageIndex)}
-            onKeyDown={this.handlePageChange(previousPageIndex)}
-          >
-            <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.previous' })} />
-            <span className={cx('icon')} />
-          </PaginatorButton>
         </div>
-        <div>
+        <ul className={cx('progressive-list')}>
           {
-            intl.formatMessage({ id: messageId }, messageAttributes)
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === 1}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
+                  className={cx(['nav-link', selectedPage === 1 ? 'is-disabled' : null])}
+                  disabled={selectedPage === 1}
+                  onClick={this.handlePageChange(1)}
+                  onKeyDown={this.handlePageChange(1)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.first' })}
+                </PaginatorButton>
+              </li>
+            )
           }
-        </div>
-        <div>
-          <PaginatorButton
-            ariaDisabled={selectedPage === totalPages}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
-            className={cx(['nav-link', 'next', 'icon-only', selectedPage === totalPages ? 'is-disabled' : null])}
-            disabled={selectedPage === totalPages}
-            onClick={this.handlePageChange(nextPageIndex)}
-            onKeyDown={this.handlePageChange(nextPageIndex)}
-          >
-            <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
-            <span className={cx('icon')} />
-          </PaginatorButton>
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === 1}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
+              className={cx(['nav-link', 'previous', 'icon-only', selectedPage === 1 ? 'is-disabled' : null])}
+              disabled={selectedPage === 1}
+              onClick={this.handlePageChange(previousPageIndex)}
+              onKeyDown={this.handlePageChange(previousPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.previous' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === totalPages}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
+              className={cx(['nav-link', 'next', 'icon-only', selectedPage === totalPages ? 'is-disabled' : null])}
+              disabled={selectedPage === totalPages}
+              onClick={this.handlePageChange(nextPageIndex)}
+              onKeyDown={this.handlePageChange(nextPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
           {
-            (totalCount) && (
-              <PaginatorButton
-                ariaDisabled={selectedPage === totalPages}
-                ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
-                className={cx(['nav-link', selectedPage === totalPages ? 'is-disabled' : null])}
-                disabled={selectedPage === totalPages}
-                onClick={this.handlePageChange(totalPages)}
-                onKeyDown={this.handlePageChange(totalPages)}
-              >
-                {intl.formatMessage({ id: 'Terra.paginator.last' })}
-              </PaginatorButton>
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === totalPages}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
+                  className={cx(['nav-link', selectedPage === totalPages ? 'is-disabled' : null])}
+                  disabled={selectedPage === totalPages}
+                  onClick={this.handlePageChange(totalPages)}
+                  onKeyDown={this.handlePageChange(totalPages)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.last' })}
+                </PaginatorButton>
+              </li>
             )
           }
-        </div>
+        </ul>
       </>
     );
 
-    const reducedView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {reducedViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', theme.className)} aria-label={paginatorAriaLabel}>
-          {reducedViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const reducedView = (
+      <nav
+        className={cx('paginator', 'progressvie', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {reducedViewChildren}
+      </nav>
+    );
+
     return reducedView;
@@ -289,0 +319,0 @@ }

src/Paginator.jsx

@@ -60,2 +60,3 @@ import React from 'react';
       showReducedPaginator: false,
+      selectedPageMessage: '',
     };
@@ -70,2 +71,8 @@
   handlePageChange(index) {
+    const {
+      intl,
+      itemCountPerPage,
+      totalCount,
+    } = this.props;
+
     return (event) => {
@@ -82,2 +89,9 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
 
+      let message;
+      if (totalCount && itemCountPerPage) {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+      } else {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
+      }
+
       this.props.onPageChange(index);
@@ -87,2 +101,3 @@ this.setState({
         pageSequence: pageSet(index, calculatePages(this.props.totalCount, this.props.itemCountPerPage)),
+        selectedPageMessage: message,
       });
@@ -150,2 +165,3 @@
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
@@ -155,3 +171,3 @@ const fullViewChildren = (
         {
-          totalCount && (
+          renderFirstandLastButton && (
             <li>
@@ -199,3 +215,3 @@ <PaginatorButton
         {
-          totalCount && (
+          renderFirstandLastButton && (
             <li>
@@ -218,14 +234,17 @@ <PaginatorButton
 
-    const fullView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {fullViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-label={paginatorAriaLabel}>
-          {fullViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const fullView = (
+      <nav
+        className={cx('paginator', !totalCount && 'pageless', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {fullViewChildren}
+      </nav>
+    );
+
     return fullView;
@@ -248,71 +267,89 @@ }
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
     const reducedViewChildren = (
       <>
-        {
-          totalCount && (
-          <PaginatorButton
-            ariaDisabled={selectedPage === 1}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
-            className={cx(['nav-link', 'left-controls', selectedPage === 1 && 'is-disabled'])}
-            disabled={selectedPage === 1}
-            onClick={this.handlePageChange(1)}
-            onKeyDown={this.handlePageChange(1)}
-          >
-            {intl.formatMessage({ id: 'Terra.paginator.first' })}
-          </PaginatorButton>
-          )
-        }
-        <PaginatorButton
-          ariaDisabled={selectedPage === 1}
-          ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
-          className={cx(['nav-link', 'left-controls', 'previous', 'icon-only', selectedPage === 1 && 'is-disabled'])}
-          disabled={selectedPage === 1}
-          onClick={this.handlePageChange(previousPageIndex)}
-          onKeyDown={this.handlePageChange(previousPageIndex)}
-        >
-          <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.previous' })} />
-          <span className={cx('icon')} />
-        </PaginatorButton>
-        {totalCount && intl.formatMessage({ id: 'Terra.paginator.pageIndex' }, { pageNumber: selectedPage })}
-        <PaginatorButton
-          ariaDisabled={selectedPage === totalPages}
-          ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
-          className={cx(['nav-link', 'right-controls', 'next', 'icon-only', selectedPage === totalPages && 'is-disabled'])}
-          disabled={selectedPage === totalPages}
-          onClick={this.handlePageChange(nextPageIndex)}
-          onKeyDown={this.handlePageChange(nextPageIndex)}
-        >
-          <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
-          <span className={cx('icon')} />
-        </PaginatorButton>
-        {
-          totalCount && (
-          <PaginatorButton
-            ariaDisabled={selectedPage === totalPages}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
-            className={cx(['nav-link', 'right-controls', selectedPage === totalPages && 'is-disabled'])}
-            disabled={selectedPage === totalPages}
-            onClick={this.handlePageChange(totalPages)}
-            onKeyDown={this.handlePageChange(totalPages)}
-          >
-            {intl.formatMessage({ id: 'Terra.paginator.last' })}
-          </PaginatorButton>
-          )
-        }
+        <div>
+          {
+            totalCount && intl.formatMessage({ id: 'Terra.paginator.pageIndex' }, { pageNumber: selectedPage })
+          }
+        </div>
+        <ul className={cx('list')}>
+          {
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === 1}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
+                  className={cx(['nav-link', 'left-controls', selectedPage === 1 && 'is-disabled'])}
+                  disabled={selectedPage === 1}
+                  onClick={this.handlePageChange(1)}
+                  onKeyDown={this.handlePageChange(1)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.first' })}
+                </PaginatorButton>
+              </li>
+            )
+          }
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === 1}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
+              className={cx(['nav-link', 'left-controls', 'previous', 'icon-only', selectedPage === 1 && 'is-disabled'])}
+              disabled={selectedPage === 1}
+              onClick={this.handlePageChange(previousPageIndex)}
+              onKeyDown={this.handlePageChange(previousPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.previous' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === totalPages}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
+              className={cx(['nav-link', 'right-controls', 'next', 'icon-only', selectedPage === totalPages && 'is-disabled'])}
+              disabled={selectedPage === totalPages}
+              onClick={this.handlePageChange(nextPageIndex)}
+              onKeyDown={this.handlePageChange(nextPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
+          {
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === totalPages}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
+                  className={cx(['nav-link', 'right-controls', selectedPage === totalPages && 'is-disabled'])}
+                  disabled={selectedPage === totalPages}
+                  onClick={this.handlePageChange(totalPages)}
+                  onKeyDown={this.handlePageChange(totalPages)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.last' })}
+                </PaginatorButton>
+              </li>
+            )
+          }
+        </ul>
       </>
     );
 
-    const reducedView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {reducedViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', !totalCount && 'pageless', theme.className)} aria-label={paginatorAriaLabel}>
-          {reducedViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const reducedView = (
+      <nav
+        className={cx('paginator', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {reducedViewChildren}
+      </nav>
+    );
+
     return reducedView;
@@ -319,0 +356,0 @@ }

src/ProgressivePaginator.jsx

@@ -61,2 +61,3 @@ import React from 'react';
       showReducedPaginator: false,
+      selectedPageMessage: '',
     };
@@ -71,2 +72,8 @@
   handlePageChange(index) {
+    const {
+      intl,
+      itemCountPerPage,
+      totalCount,
+    } = this.props;
+
     return (event) => {
@@ -78,3 +85,14 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
       this.props.onPageChange(index);
-      this.setState({ selectedPage: index });
+
+      let message;
+      if (totalCount && itemCountPerPage) {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+      } else {
+        message = intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
+      }
+
+      this.setState({
+        selectedPage: index,
+        selectedPageMessage: message,
+      });
     };
@@ -105,2 +123,3 @@ }
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
@@ -118,3 +137,3 @@ const { messageId, messageAttributes } = getPageLabel(pageLabel, selectedPage, totalPages);
           {
-            totalCount && (
+            renderFirstandLastButton && (
               <li>
@@ -161,3 +180,3 @@ <PaginatorButton
           {
-            (totalCount) && (
+            renderFirstandLastButton && (
               <li>
@@ -181,14 +200,17 @@ <PaginatorButton
 
-    const fullView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', 'progressive', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {fullViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', 'progressive', theme.className)} aria-label={paginatorAriaLabel}>
-          {fullViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const fullView = (
+      <nav
+        className={cx('paginator', 'progressive', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {fullViewChildren}
+      </nav>
+    );
+
     return fullView;
@@ -212,2 +234,3 @@ }
     const paginatorAriaLabel = ariaLabel || 'pagination';
+    const renderFirstandLastButton = totalCount > 0;
 
@@ -220,74 +243,83 @@ const { messageId, messageAttributes } = getPageLabel(pageLabel, selectedPage, totalPages);
           {
-            (totalCount) && (
-              <PaginatorButton
-                ariaDisabled={selectedPage === 1}
-                ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
-                className={cx(['nav-link', selectedPage === 1 ? 'is-disabled' : null])}
-                disabled={selectedPage === 1}
-                onClick={this.handlePageChange(1)}
-                onKeyDown={this.handlePageChange(1)}
-              >
-                {intl.formatMessage({ id: 'Terra.paginator.first' })}
-              </PaginatorButton>
-            )
+            intl.formatMessage({ id: messageId }, messageAttributes)
           }
-          <PaginatorButton
-            ariaDisabled={selectedPage === 1}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
-            className={cx(['nav-link', 'previous', 'icon-only', selectedPage === 1 ? 'is-disabled' : null])}
-            disabled={selectedPage === 1}
-            onClick={this.handlePageChange(previousPageIndex)}
-            onKeyDown={this.handlePageChange(previousPageIndex)}
-          >
-            <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.previous' })} />
-            <span className={cx('icon')} />
-          </PaginatorButton>
         </div>
-        <div>
+        <ul className={cx('progressive-list')}>
           {
-            intl.formatMessage({ id: messageId }, messageAttributes)
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === 1}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.first' })}
+                  className={cx(['nav-link', selectedPage === 1 ? 'is-disabled' : null])}
+                  disabled={selectedPage === 1}
+                  onClick={this.handlePageChange(1)}
+                  onKeyDown={this.handlePageChange(1)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.first' })}
+                </PaginatorButton>
+              </li>
+            )
           }
-        </div>
-        <div>
-          <PaginatorButton
-            ariaDisabled={selectedPage === totalPages}
-            ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
-            className={cx(['nav-link', 'next', 'icon-only', selectedPage === totalPages ? 'is-disabled' : null])}
-            disabled={selectedPage === totalPages}
-            onClick={this.handlePageChange(nextPageIndex)}
-            onKeyDown={this.handlePageChange(nextPageIndex)}
-          >
-            <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
-            <span className={cx('icon')} />
-          </PaginatorButton>
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === 1}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.previous' })}
+              className={cx(['nav-link', 'previous', 'icon-only', selectedPage === 1 ? 'is-disabled' : null])}
+              disabled={selectedPage === 1}
+              onClick={this.handlePageChange(previousPageIndex)}
+              onKeyDown={this.handlePageChange(previousPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.previous' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
+          <li>
+            <PaginatorButton
+              ariaDisabled={selectedPage === totalPages}
+              ariaLabel={intl.formatMessage({ id: 'Terra.paginator.next' })}
+              className={cx(['nav-link', 'next', 'icon-only', selectedPage === totalPages ? 'is-disabled' : null])}
+              disabled={selectedPage === totalPages}
+              onClick={this.handlePageChange(nextPageIndex)}
+              onKeyDown={this.handlePageChange(nextPageIndex)}
+            >
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.paginator.next' })} />
+              <span className={cx('icon')} />
+            </PaginatorButton>
+          </li>
           {
-            (totalCount) && (
-              <PaginatorButton
-                ariaDisabled={selectedPage === totalPages}
-                ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
-                className={cx(['nav-link', selectedPage === totalPages ? 'is-disabled' : null])}
-                disabled={selectedPage === totalPages}
-                onClick={this.handlePageChange(totalPages)}
-                onKeyDown={this.handlePageChange(totalPages)}
-              >
-                {intl.formatMessage({ id: 'Terra.paginator.last' })}
-              </PaginatorButton>
+            renderFirstandLastButton && (
+              <li>
+                <PaginatorButton
+                  ariaDisabled={selectedPage === totalPages}
+                  ariaLabel={intl.formatMessage({ id: 'Terra.paginator.last' })}
+                  className={cx(['nav-link', selectedPage === totalPages ? 'is-disabled' : null])}
+                  disabled={selectedPage === totalPages}
+                  onClick={this.handlePageChange(totalPages)}
+                  onKeyDown={this.handlePageChange(totalPages)}
+                >
+                  {intl.formatMessage({ id: 'Terra.paginator.last' })}
+                </PaginatorButton>
+              </li>
             )
           }
-        </div>
+        </ul>
       </>
     );
 
-    const reducedView = ariaLabelledBy
-      ? (
-        <nav className={cx('paginator', theme.className)} aria-labelledby={ariaLabelledBy}>
-          {reducedViewChildren}
-        </nav>
-      )
-      : (
-        <nav className={cx('paginator', theme.className)} aria-label={paginatorAriaLabel}>
-          {reducedViewChildren}
-        </nav>
-      );
+    const navigationMessage = (
+      <VisuallyHiddenText aria-live="polite" aria-relevant="all" text={this.state.selectedPageMessage} />
+    );
 
+    const reducedView = (
+      <nav
+        className={cx('paginator', 'progressive', theme.className)}
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : paginatorAriaLabel}
+      >
+        {navigationMessage}
+        {reducedViewChildren}
+      </nav>
+    );
+
     return reducedView;
@@ -294,0 +326,0 @@ }

tests/jest/ControlledPaginator.test.jsx

@@ -10,2 +10,3 @@ import React from 'react';
   const defaultRender = <ControlledPaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} />;
+  const renderWithSelectedPage = <ControlledPaginator onPageChange={e => typeof e} selectedPage={2} totalCount={2234} itemCountPerPage={20} />;
   const renderWithHeadingId = <ControlledPaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabelledBy="paginator_header_id" />;
@@ -38,2 +39,11 @@ const renderWithAriaLabel = <ControlledPaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabel="paginator_label" />;
 
+  it('should render a Controlled Paginator with visually hidden text', () => {
+    const wrapper = shallowWithIntl(renderWithSelectedPage).dive();
+    wrapper.setState({ breakpoint: 'tiny' });
+    wrapper.update();
+    wrapper.find('PaginatorButton').first().simulate('click', { nativeEvent: { keyCode: null } });
+    expect(wrapper.find('VisuallyHiddenText').first().prop('text')).toEqual('Terra.paginator.pageSelectedWithCount');
+    expect(wrapper).toMatchSnapshot();
+  });
+
   // Prop Tests
@@ -40,0 +50,0 @@ it('should render a Controlled Paginator with heading id set - Tiny', () => {

tests/jest/ControlledProgressivePaginator.test.jsx

@@ -10,2 +10,3 @@ import React from 'react';
   const defaultRender = <ControlledProgressivePaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} />;
+  const renderWithSelectedPage = <ControlledProgressivePaginator onPageChange={e => typeof e} selectedPage={10} totalCount={2234} itemCountPerPage={20} />;
   const renderWithHeadingId = <ControlledProgressivePaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabelledBy="paginator_header_id" />;
@@ -38,2 +39,11 @@ const renderWithAriaLabel = <ControlledProgressivePaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabel="paginator_label" />;
 
+  it('should render a Controlled ProgressivePaginator with visually hidden text', () => {
+    const wrapper = shallowWithIntl(renderWithSelectedPage).dive();
+    wrapper.setState({ breakpoint: 'tiny' });
+    wrapper.update();
+    wrapper.find('PaginatorButton').first().simulate('click', { nativeEvent: { keyCode: null } });
+    expect(wrapper.find('VisuallyHiddenText').first().prop('text')).toEqual('Terra.paginator.pageSelectedWithCount');
+    expect(wrapper).toMatchSnapshot();
+  });
+
   // Prop Tests
@@ -40,0 +50,0 @@ it('should render a Controlled ProgressivePaginator with heading id - Tiny', () => {

tests/jest/Paginator.test.jsx

@@ -11,2 +11,3 @@ import React from 'react';
   const noPagesRender = <Paginator onPageChange={e => typeof e} />;
+  const renderWithSelectedPage = <Paginator onPageChange={e => typeof e} selectedPage={2} totalCount={2234} itemCountPerPage={20} />;
   const renderWithHeadingId = <Paginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabelledBy="paginator_header_id" />;
@@ -53,2 +54,11 @@ const renderWithAriaLabel = <Paginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabel="paginator_label" />;
 
+  it('should render a default paginator with visually hidden text', () => {
+    const wrapper = shallowWithIntl(renderWithSelectedPage).dive();
+    wrapper.setState({ breakpoint: 'tiny' });
+    wrapper.update();
+    wrapper.find('PaginatorButton').first().simulate('click', { nativeEvent: { keyCode: null } });
+    expect(wrapper.find('VisuallyHiddenText').first().prop('text')).toEqual('Terra.paginator.pageSelectedWithCount');
+    expect(wrapper).toMatchSnapshot();
+  });
+
   // Prop Tests
@@ -55,0 +65,0 @@ it('should render a default paginator with heading id set - Tiny', () => {

tests/jest/ProgressivePaginator.test.jsx

@@ -10,2 +10,3 @@ import React from 'react';
   const defaultRender = <ProgressivePaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} />;
+  const renderWithSelectedPage = <ProgressivePaginator onPageChange={e => typeof e} selectedPage={2} totalCount={2234} itemCountPerPage={20} />;
   const renderWithHeadingId = <ProgressivePaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabelledBy="paginator_header_id" />;
@@ -38,2 +39,11 @@ const renderWithAriaLabel = <ProgressivePaginator onPageChange={e => typeof e} selectedPage={1} totalCount={2234} itemCountPerPage={20} ariaLabel="paginator_label" />;
 
+  it('should render a default ProgressivePaginator with visually hidden text', () => {
+    const wrapper = shallowWithIntl(renderWithSelectedPage).dive();
+    wrapper.setState({ breakpoint: 'tiny' });
+    wrapper.update();
+    wrapper.find('PaginatorButton').first().simulate('click', { nativeEvent: { keyCode: null } });
+    expect(wrapper.find('VisuallyHiddenText').first().prop('text')).toEqual('Terra.paginator.pageSelectedWithCount');
+    expect(wrapper).toMatchSnapshot();
+  });
+
   // Prop Tests
@@ -40,0 +50,0 @@ it('should render a default ProgressivePaginator with heading id set - Tiny', () => {

translations/de.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Seite {pageNumber}",
+  "Terra.paginator.pageSelected": "Seite {pageNumber} ist ausgewählt.",
+  "Terra.paginator.pageSelectedWithCount": "Seite {pageNumber} von {pageNumberTotal} ist ausgewählt.",
   "Terra.paginator.pageCount": "Seite {pageNumber} von {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/en-GB.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Page {pageNumber}",
+  "Terra.paginator.pageSelected": "Page {pageNumber} selected",
+  "Terra.paginator.pageSelectedWithCount": "Page {pageNumber} of {pageNumberTotal} is selected",
   "Terra.paginator.pageCount": "Page {pageNumber} of {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/en.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Page {pageNumber}",
+  "Terra.paginator.pageSelected": "Page {pageNumber} selected",
+  "Terra.paginator.pageSelectedWithCount": "Page {pageNumber} of {pageNumberTotal} is selected",
   "Terra.paginator.pageCount": "Page {pageNumber} of {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/es.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Página {pageNumber}",
+  "Terra.paginator.pageSelected": "Página {pageNumber} seleccionada",
+  "Terra.paginator.pageSelectedWithCount": "La página {pageNumber} de {pageNumberTotal} está seleccionada",
   "Terra.paginator.pageCount": "Página {pageNumber} de {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/fr.json

 {
-  "Terra.paginator.previous": "Précédent",
-  "Terra.paginator.next": "Suivant",
-  "Terra.paginator.first": "Premier",
-  "Terra.paginator.last": "Dernier",
+  "Terra.paginator.previous": "Précédente",
+  "Terra.paginator.next": "Suivante",
+  "Terra.paginator.first": "Première",
+  "Terra.paginator.last": "Dernière",
   "Terra.paginator.pageIndex": "Page {pageNumber}",
-  "Terra.paginator.pageCount": "Page {pageNumber} sur {pageNumberTotal}",
+  "Terra.paginator.pageSelected": "Page {pageNumber} sélectionnée",
+  "Terra.paginator.pageSelectedWithCount": "La page {pageNumber} sur {pageNumberTotal} page(s) est sélectionnée.",
+  "Terra.paginator.pageCount": "Page {pageNumber} sur {pageNumberTotal} page(s)",
   "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",
-  "Terra.paginator.pageCountWithLabel": "{pageLabel} {pageNumber} sur {pageNumberTotal}"
+  "Terra.paginator.pageCountWithLabel": "{pageLabel} {pageNumber} sur {pageNumberTotal} page(s)"
 }

translations/nl-BE.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Pagina {pageNumber}",
+  "Terra.paginator.pageSelected": "Pagina {pageNumber} geselecteerd",
+  "Terra.paginator.pageSelectedWithCount": "Pagina {pageNumber} van {pageNumberTotal} is geselecteerd",
   "Terra.paginator.pageCount": "Pagina {pageNumber} van {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/pt-BR.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Página {pageNumber}",
+  "Terra.paginator.pageSelected": "Página {pageNumber} selecionada",
+  "Terra.paginator.pageSelectedWithCount": "Página {pageNumber} de {pageNumberTotal} selecionada",
   "Terra.paginator.pageCount": "Página {pageNumber} de {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/sv.json

@@ -7,2 +7,4 @@ {
   "Terra.paginator.pageIndex": "Sida {pageNumber}",
+  "Terra.paginator.pageSelected": "Sida {pageNumber} har valts",
+  "Terra.paginator.pageSelectedWithCount": "Sida {pageNumber} av {pageNumberTotal} har valts",
   "Terra.paginator.pageCount": "Sida {pageNumber} av {pageNumberTotal}",
@@ -9,0 +11,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

No alert changes

Improved metrics

Total package byte prevSize

1232707

increased by2.8%

Lines of code

3664

increased by8.85%

No dependency changes