docs: change changelog paginator label (#7251)

website/src/plugins/changelog/theme/ChangelogPage/index.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import BlogLayout from '@theme/BlogLayout';
 import ChangelogItem from '@theme/ChangelogItem';
-import BlogPostPaginator from '@theme/BlogPostPaginator';
+import ChangelogPaginator from '@theme/ChangelogPaginator';
 import type {Props} from '@theme/BlogPostPage';
 import {
   PageMetadata,
@@ -97,7 +97,7 @@ function ChangelogPageContent(props: Props): JSX.Element {
         </ChangelogItem>
 
         {(nextItem || prevItem) && (
-          <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+          <ChangelogPaginator nextItem={nextItem} prevItem={prevItem} />
         )}
       </BlogLayout>
     </>

website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Changed the text labels.
+
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
+import type {Props} from '@theme/BlogPostPaginator';
+
+export default function ChangelogPaginator(props: Props): JSX.Element {
+  const {nextItem, prevItem} = props;
+
+  return (
+    <nav
+      className="pagination-nav docusaurus-mt-lg"
+      aria-label={translate({
+        id: 'theme.changelog.post.paginator.navAriaLabel',
+        message: 'Changelog item navigation',
+        description: 'The ARIA label for the changelog pagination',
+      })}>
+      <div className="pagination-nav__item">
+        {prevItem && (
+          <PaginatorNavLink
+            {...prevItem}
+            subLabel={
+              <Translate
+                id="theme.changelog.post.paginator.newerRelease"
+                description="The changelog button label to navigate to the newer release">
+                Newer release
+              </Translate>
+            }
+          />
+        )}
+      </div>
+      <div className="pagination-nav__item pagination-nav__item--next">
+        {nextItem && (
+          <PaginatorNavLink
+            {...nextItem}
+            subLabel={
+              <Translate
+                id="theme.changelog.post.paginator.olderRelease"
+                description="The changelog button label to navigate to the older release">
+                Older release
+              </Translate>
+            }
+          />
+        )}
+      </div>
+    </nav>
+  );
+}

website/src/plugins/changelog/theme/types.d.ts

@@ -8,6 +8,7 @@
 declare module '@theme/ChangelogItem';
 declare module '@theme/ChangelogAuthors';
 declare module '@theme/ChangelogAuthor';
+declare module '@theme/ChangelogPaginator';
 declare module '@theme/IconExpand' {
   import type {ComponentProps} from 'react';