terra-paginator - npm Package Compare versions

Comparing version 2.87.0 to 2.87.1

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog
 
+## 2.87.1 - (November 3, 2023)
+
+* Added
+ * Added VisuallyHiddenText with pageLabel to support screen reader users.
+
 ## 2.87.0 - (October 26, 2023)
@@ -7,0 +12,0 @@

lib/ControlledProgressivePaginator.js

@@ -106,3 +106,5 @@ "use strict";
         itemCountPerPage = _this$props.itemCountPerPage,
-        totalCount = _this$props.totalCount;
+        totalCount = _this$props.totalCount,
+        pageLabel = _this$props.pageLabel,
+        hidePageCount = _this$props.hidePageCount;
       return function (event) {
@@ -115,10 +117,24 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         if (totalCount && itemCountPerPage) {
-          message = intl.formatMessage({
-            id: 'Terra.paginator.pageSelectedWithCount'
+          if (pageLabel && !hidePageCount) {
+            message = intl.formatMessage({
+              id: 'Terra.paginator.customPageSelectedWithCount'
+            }, {
+              pageLabel: pageLabel,
+              pageNumber: index,
+              pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+            });
+          } else {
+            message = intl.formatMessage({
+              id: 'Terra.paginator.pageSelectedWithCount'
+            }, {
+              pageNumber: index,
+              pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+            });
+          }
+        } else {
+          message = pageLabel ? intl.formatMessage({
+            id: 'Terra.paginator.customPageSelected'
           }, {
-            pageNumber: index,
-            pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
-          });
-        } else {
-          message = intl.formatMessage({
+            pageLabel: pageLabel
+          }) : intl.formatMessage({
             id: 'Terra.paginator.pageSelected'
@@ -168,2 +184,7 @@ }, {
       }, messageAttributes));
+      var customPageSelectedMessage = hidePageCount && pageLabel ? intl.formatMessage({
+        id: 'Terra.paginator.customPageSelected'
+      }, {
+        pageLabel: pageLabel
+      }) : undefined;
       var fullViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
@@ -223,3 +244,3 @@ className: cx('progressive-list')
         "aria-relevant": "additions text",
-        text: this.state.selectedPageMessage
+        text: customPageSelectedMessage || this.state.selectedPageMessage
       });
@@ -257,2 +278,7 @@ var fullView = /*#__PURE__*/_react.default.createElement("nav", {
       }, messageAttributes));
+      var customPageSelectedMessage = hidePageCount && pageLabel ? intl.formatMessage({
+        id: 'Terra.paginator.customPageSelected'
+      }, {
+        pageLabel: pageLabel
+      }) : undefined;
       var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
@@ -316,3 +342,3 @@ className: cx('progressive-list')
         "aria-relevant": "additions text",
-        text: this.state.selectedPageMessage
+        text: customPageSelectedMessage || this.state.selectedPageMessage
       });
@@ -319,0 +345,0 @@ var reducedView = /*#__PURE__*/_react.default.createElement("nav", {

lib/ProgressivePaginator.js

@@ -108,3 +108,5 @@ "use strict";
         itemCountPerPage = _this$props.itemCountPerPage,
-        totalCount = _this$props.totalCount;
+        totalCount = _this$props.totalCount,
+        pageLabel = _this$props.pageLabel,
+        hidePageCount = _this$props.hidePageCount;
       return function (event) {
@@ -117,10 +119,24 @@ if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
         if (totalCount && itemCountPerPage) {
-          message = intl.formatMessage({
-            id: 'Terra.paginator.pageSelectedWithCount'
+          if (pageLabel && !hidePageCount) {
+            message = intl.formatMessage({
+              id: 'Terra.paginator.customPageSelectedWithCount'
+            }, {
+              pageLabel: pageLabel,
+              pageNumber: index,
+              pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+            });
+          } else {
+            message = intl.formatMessage({
+              id: 'Terra.paginator.pageSelectedWithCount'
+            }, {
+              pageNumber: index,
+              pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
+            });
+          }
+        } else {
+          message = pageLabel ? intl.formatMessage({
+            id: 'Terra.paginator.customPageSelected'
           }, {
-            pageNumber: index,
-            pageNumberTotal: (0, _paginationUtils.calculatePages)(totalCount, itemCountPerPage)
-          });
-        } else {
-          message = intl.formatMessage({
+            pageLabel: pageLabel
+          }) : intl.formatMessage({
             id: 'Terra.paginator.pageSelected'
@@ -171,2 +187,7 @@ }, {
       }, messageAttributes));
+      var customPageSelectedMessage = hidePageCount && pageLabel ? intl.formatMessage({
+        id: 'Terra.paginator.customPageSelected'
+      }, {
+        pageLabel: pageLabel
+      }) : undefined;
       var fullViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
@@ -226,3 +247,3 @@ className: cx('progressive-list')
         "aria-relevant": "additions text",
-        text: this.state.selectedPageMessage
+        text: customPageSelectedMessage || this.state.selectedPageMessage
       });
@@ -260,2 +281,7 @@ var fullView = /*#__PURE__*/_react.default.createElement("nav", {
       }, messageAttributes));
+      var customPageSelectedMessage = hidePageCount && pageLabel ? intl.formatMessage({
+        id: 'Terra.paginator.customPageSelected'
+      }, {
+        pageLabel: pageLabel
+      }) : undefined;
       var reducedViewChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageDetails, /*#__PURE__*/_react.default.createElement("ul", {
@@ -319,3 +345,3 @@ className: cx('progressive-list')
         "aria-relevant": "additions text",
-        text: this.state.selectedPageMessage
+        text: customPageSelectedMessage || this.state.selectedPageMessage
       });
@@ -322,0 +348,0 @@ var reducedView = /*#__PURE__*/_react.default.createElement("nav", {

package.json

 {
   "name": "terra-paginator",
   "main": "lib/Paginator.js",
-  "version": "2.87.0",
+  "version": "2.87.1",
   "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": "f5abcc44106db761b2dd1c84c46fee2792ae7679"
+  "gitHead": "564aca915640fd451140a206f6492cfc04200140"
 }

src/ControlledProgressivePaginator.jsx

@@ -80,2 +80,4 @@ import React from 'react';
       totalCount,
+      pageLabel,
+      hidePageCount,
     } = this.props;
@@ -92,5 +94,9 @@
       if (totalCount && itemCountPerPage) {
-        message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+        if (pageLabel && !hidePageCount) {
+          message = intl.formatMessage({ id: 'Terra.paginator.customPageSelectedWithCount' }, { pageLabel, pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+        } else {
+          message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+        }
       } else {
-        message = intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
+        message = (pageLabel) ? intl.formatMessage({ id: 'Terra.paginator.customPageSelected' }, { pageLabel }) : intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
       }
@@ -129,2 +135,3 @@
     const pageDetails = (hidePageCount && pageLabel) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
+    const customPageSelectedMessage = (hidePageCount && pageLabel) ? intl.formatMessage({ id: 'Terra.paginator.customPageSelected' }, { pageLabel }) : undefined;
 
@@ -198,3 +205,3 @@ const fullViewChildren = (
     const navigationMessage = (
-      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={this.state.selectedPageMessage} />
+      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={customPageSelectedMessage || this.state.selectedPageMessage} />
     );
@@ -236,2 +243,3 @@
     const pageDetails = (hidePageCount && pageLabel) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
+    const customPageSelectedMessage = (hidePageCount && pageLabel) ? intl.formatMessage({ id: 'Terra.paginator.customPageSelected' }, { pageLabel }) : undefined;
 
@@ -305,3 +313,3 @@ const reducedViewChildren = (
     const navigationMessage = (
-      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={this.state.selectedPageMessage} />
+      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={customPageSelectedMessage || this.state.selectedPageMessage} />
     );
@@ -308,0 +316,0 @@

src/ProgressivePaginator.jsx

@@ -84,2 +84,4 @@ import React from 'react';
       totalCount,
+      pageLabel,
+      hidePageCount,
     } = this.props;
@@ -93,8 +95,11 @@
       this.props.onPageChange(index);
-
       let message;
       if (totalCount && itemCountPerPage) {
-        message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+        if (pageLabel && !hidePageCount) {
+          message = intl.formatMessage({ id: 'Terra.paginator.customPageSelectedWithCount' }, { pageLabel, pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+        } else {
+          message = intl.formatMessage({ id: 'Terra.paginator.pageSelectedWithCount' }, { pageNumber: index, pageNumberTotal: calculatePages(totalCount, itemCountPerPage) });
+        }
       } else {
-        message = intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
+        message = (pageLabel) ? intl.formatMessage({ id: 'Terra.paginator.customPageSelected' }, { pageLabel }) : intl.formatMessage({ id: 'Terra.paginator.pageSelected' }, { pageNumber: index });
       }
@@ -136,2 +141,3 @@
     const pageDetails = (hidePageCount && pageLabel) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
+    const customPageSelectedMessage = (hidePageCount && pageLabel) ? intl.formatMessage({ id: 'Terra.paginator.customPageSelected' }, { pageLabel }) : undefined;
 
@@ -205,3 +211,3 @@ const fullViewChildren = (
     const navigationMessage = (
-      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={this.state.selectedPageMessage} />
+      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={customPageSelectedMessage || this.state.selectedPageMessage} />
     );
@@ -243,2 +249,3 @@
     const pageDetails = (hidePageCount && pageLabel) ? <div>{pageLabel}</div> : <div>{intl.formatMessage({ id: messageId }, messageAttributes)}</div>;
+    const customPageSelectedMessage = (hidePageCount && pageLabel) ? intl.formatMessage({ id: 'Terra.paginator.customPageSelected' }, { pageLabel }) : undefined;
 
@@ -312,3 +319,3 @@ const reducedViewChildren = (
     const navigationMessage = (
-      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={this.state.selectedPageMessage} />
+      <VisuallyHiddenText aria-live="polite" aria-relevant="additions text" text={customPageSelectedMessage || this.state.selectedPageMessage} />
     );
@@ -315,0 +322,0 @@

translations/de.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Seite {pageNumber} ist ausgewählt.",
+  "Terra.paginator.customPageSelected": "{pageLabel} ist ausgewählt.",
   "Terra.paginator.pageSelectedWithCount": "Seite {pageNumber} von {pageNumberTotal} ist ausgewählt.",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} von {pageNumberTotal} ist ausgewählt.",
   "Terra.paginator.pageCount": "Seite {pageNumber} von {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/en-AU.json

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

translations/en-CA.json

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

translations/en-GB.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Page {pageNumber} selected",
+  "Terra.paginator.customPageSelected": "{pageLabel} selected",
   "Terra.paginator.pageSelectedWithCount": "Page {pageNumber} of {pageNumberTotal} is selected",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} of {pageNumberTotal} is selected",
   "Terra.paginator.pageCount": "Page {pageNumber} of {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/en-US.json

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

translations/en.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Page {pageNumber} selected",
+  "Terra.paginator.customPageSelected": "{pageLabel} selected",
   "Terra.paginator.pageSelectedWithCount": "Page {pageNumber} of {pageNumberTotal} is selected",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} of {pageNumberTotal} is selected",
   "Terra.paginator.pageCount": "Page {pageNumber} of {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/es.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Página {pageNumber} seleccionada",
+  "Terra.paginator.customPageSelected": "{pageLabel} seleccionada",
   "Terra.paginator.pageSelectedWithCount": "La página {pageNumber} de {pageNumberTotal} está seleccionada",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} de {pageNumberTotal} está seleccionada",
   "Terra.paginator.pageCount": "Página {pageNumber} de {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/fr.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Page {pageNumber} sélectionnée",
+  "Terra.paginator.customPageSelected": "{pageLabel} sélectionnée",
   "Terra.paginator.pageSelectedWithCount": "La page {pageNumber} sur {pageNumberTotal} page(s) est sélectionnée.",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} sur {pageNumberTotal} page(s) est sélectionnée.",
   "Terra.paginator.pageCount": "Page {pageNumber} sur {pageNumberTotal} page(s)",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/nl-BE.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Pagina {pageNumber} geselecteerd",
+  "Terra.paginator.customPageSelected": "{pageLabel} geselecteerd",
   "Terra.paginator.pageSelectedWithCount": "Pagina {pageNumber} van {pageNumberTotal} is geselecteerd",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} van {pageNumberTotal} is geselecteerd",
   "Terra.paginator.pageCount": "Pagina {pageNumber} van {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/nl.json

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

translations/pt-BR.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Página {pageNumber} selecionada",
+  "Terra.paginator.customPageSelected": "{pageLabel} selecionada",
   "Terra.paginator.pageSelectedWithCount": "Página {pageNumber} de {pageNumberTotal} selecionada",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} de {pageNumberTotal} selecionada",
   "Terra.paginator.pageCount": "Página {pageNumber} de {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

translations/pt.json

@@ -9,3 +9,4 @@ {
   "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",
-  "Terra.paginator.pageCountWithLabel": "{pageLabel} {pageNumber} de {pageNumberTotal}"
+  "Terra.paginator.pageCountWithLabel": "{pageLabel} {pageNumber} de {pageNumberTotal}",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} de {pageNumberTotal} selecionada"
 }

translations/sv-SE.json

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

translations/sv.json

@@ -8,3 +8,5 @@ {
   "Terra.paginator.pageSelected": "Sida {pageNumber} har valts",
+  "Terra.paginator.customPageSelected": "{pageLabel} har valts",
   "Terra.paginator.pageSelectedWithCount": "Sida {pageNumber} av {pageNumberTotal} har valts",
+  "Terra.paginator.customPageSelectedWithCount": "{pageLabel} {pageNumber} av {pageNumberTotal} har valts",
   "Terra.paginator.pageCount": "Sida {pageNumber} av {pageNumberTotal}",
@@ -11,0 +13,0 @@ "Terra.paginator.pageIndexWithLabel": "{pageLabel} {pageNumber}",

No alert changes

Improved metrics

Total package byte prevSize

1344550

increased by0.53%

Lines of code

3804

increased by2.84%

No dependency changes