refactor: CrossLink Prev to Previous and cleanup of Pagination keys (#8378)

* use full word previous within crosslink

* remove half used pagination keys in favor of common pagination

* remove crossLink translation keys completely

necessitates renaming the key in pagination due to dynamic reference in CrossLink

Author: bmuenzenmeyer

apps/site/components/Common/CrossLink.tsx

@@ -10,7 +10,7 @@ const CrossLink: FC<Omit<CrossLinkProps, 'as' | 'label'>> = props => {
   const t = useTranslations();
   return (
     <BaseCrossLink
-      label={t(`components.common.crossLink.${props.type}`)}
+      label={t(`components.common.pagination.${props.type}`)}
       as={Link}
       {...props}
     />

apps/site/components/Common/Pagination.tsx

@@ -15,10 +15,10 @@ const Pagination: FC<
       as={Link}
       labels={{
         aria: t('components.common.pagination.defaultLabel'),
-        prevAria: t('components.common.pagination.prevAriaLabel'),
-        prev: t('components.pagination.previous'),
-        nextAria: t('components.common.pagination.nextAriaLabel'),
-        next: t('components.pagination.next'),
+        previousAriaLabel: t('components.common.pagination.previousAriaLabel'),
+        previous: t('components.common.pagination.previous'),
+        nextAriaLabel: t('components.common.pagination.nextAriaLabel'),
+        next: t('components.common.pagination.next'),
       }}
       getPageLabel={pageNumber =>
         t('components.common.pagination.pageLabel', { pageNumber })

packages/i18n/src/locales/en.json

@@ -237,10 +237,6 @@
       "npmVersion": "npm version",
       "v8Version": "V8 version"
     },
-    "pagination": {
-      "next": "Next",
-      "previous": "Previous"
-    },
     "common": {
       "alertBox": {
         "info": "Info",
@@ -250,17 +246,13 @@
       "breadcrumbs": {
         "navigateToHome": "Navigate to Home"
       },
-      "crossLink": {
-        "previous": "Prev",
-        "next": "Next"
-      },
       "codebox": {
         "copy": "Copy to clipboard",
         "copied": "Copied to clipboard!"
       },
       "pagination": {
-        "prev": "Previous",
-        "prevAriaLabel": "Previous page",
+        "previous": "Previous",
+        "previousAriaLabel": "Previous page",
         "next": "Next",
         "nextAriaLabel": "Next page",
         "defaultLabel": "Pagination",

packages/ui-components/src/Common/BasePagination/__tests__/index.test.jsx

@@ -11,9 +11,9 @@ import BasePagination from '#ui/Common/BasePagination';
 const getPageLabel = number => number.toString();
 const labels = {
   aria: 'Aria',
-  prevAria: 'Previous Aria',
-  prev: 'Previous',
-  nextAria: 'Next Aria',
+  previousAriaLabel: 'Previous Aria',
+  previous: 'Previous',
+  nextAriaLabel: 'Next Aria',
   next: 'Next',
 };
 
@@ -51,14 +51,14 @@ describe('Pagination', () => {
       assert.ok(
         isVisible(
           screen.getByRole('button', {
-            name: labels.prevAria,
+            name: labels.previousAriaLabel,
           })
         )
       );
       assert.ok(
         isVisible(
           screen.getByRole('button', {
-            name: labels.nextAria,
+            name: labels.nextAriaLabel,
           })
         )
       );
@@ -157,7 +157,7 @@ describe('Pagination', () => {
       assert.ok(
         screen
           .getByRole('button', {
-            name: labels.prevAria,
+            name: labels.previousAriaLabel,
           })
           .getAttribute('aria-disabled')
       );
@@ -172,7 +172,7 @@ describe('Pagination', () => {
       assert.ok(
         screen
           .getByRole('button', {
-            name: labels.nextAria,
+            name: labels.nextAriaLabel,
           })
           .getAttribute('aria-disabled')
       );

packages/ui-components/src/Common/BasePagination/index.stories.tsx

@@ -13,9 +13,9 @@ export const Default: Story = {
     getPageLabel: value => `Page: ${value}`,
     labels: {
       aria: 'Aria',
-      prevAria: 'Previous Aria',
-      prev: 'Previous',
-      nextAria: 'Next Aria',
+      previousAriaLabel: 'Previous Aria',
+      previous: 'Previous',
+      nextAriaLabel: 'Next Aria',
       next: 'Next',
     },
   },

packages/ui-components/src/Common/BasePagination/index.tsx

@@ -21,9 +21,9 @@ export type PaginationProps = {
   getPageLabel: (pageNumber: number) => string;
   labels: {
     aria: string;
-    prevAria: string;
-    prev: string;
-    nextAria: string;
+    previousAriaLabel: string;
+    previous: string;
+    nextAriaLabel: string;
     next: string;
   };
 };
@@ -48,21 +48,21 @@ const BasePagination: FC<PaginationProps> = ({
     <nav aria-label={labels.aria} className={styles.pagination}>
       <Button
         as={as}
-        aria-label={labels.prevAria}
+        aria-label={labels.previousAriaLabel}
         disabled={currentPage === 1}
         kind="secondary"
         className={styles.previousButton}
         href={pages[currentPage - 2]?.url}
       >
         <ArrowLeftIcon className={styles.arrowIcon} />
-        <span>{labels.prev}</span>
+        <span>{labels.previous}</span>
       </Button>
 
       <ol className={styles.list}>{parsedPages}</ol>
 
       <Button
         as={as}
-        aria-label={labels.nextAria}
+        aria-label={labels.nextAriaLabel}
         disabled={currentPage === pages.length}
         kind="secondary"
         className={styles.nextButton}