refactor(v2): update HTML markup of pagination for better 11y

facebook · Apr 1, 2020 · 62fe9ee · 62fe9ee
1 parent 686c8ae
commit 62fe9ee
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.js b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.js
@@ -16,20 +16,20 @@ function BlogPostPaginator(props) {
       <div className="pagination-nav__item">
         {prevItem && (
           <Link className="pagination-nav__link" to={prevItem.permalink}>
-            <h5 className="pagination-nav__link--sublabel">Previous Post</h5>
-            <h4 className="pagination-nav__link--label">
+            <div className="pagination-nav__link--sublabel">Previous Post</div>
+            <div className="pagination-nav__link--label">
               &laquo; {prevItem.title}
-            </h4>
+            </div>
           </Link>
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextItem && (
           <Link className="pagination-nav__link" to={nextItem.permalink}>
-            <h5 className="pagination-nav__link--sublabel">Next Post</h5>
-            <h4 className="pagination-nav__link--label">
+            <div className="pagination-nav__link--sublabel">Next Post</div>
+            <div className="pagination-nav__link--label">
               {nextItem.title} &raquo;
-            </h4>
+            </div>
           </Link>
         )}
       </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.js b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.js
@@ -18,20 +18,20 @@ function DocPaginator(props) {
           <Link
             className="pagination-nav__link"
             to={metadata.previous.permalink}>
-            <h5 className="pagination-nav__link--sublabel">Previous</h5>
-            <h4 className="pagination-nav__link--label">
+            <div className="pagination-nav__link--sublabel">Previous</div>
+            <div className="pagination-nav__link--label">
               &laquo; {metadata.previous.title}
-            </h4>
+            </div>
           </Link>
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {metadata.next && (
           <Link className="pagination-nav__link" to={metadata.next.permalink}>
-            <h5 className="pagination-nav__link--sublabel">Next</h5>
-            <h4 className="pagination-nav__link--label">
+            <div className="pagination-nav__link--sublabel">Next</div>
+            <div className="pagination-nav__link--label">
               {metadata.next.title} &raquo;
-            </h4>
+            </div>
           </Link>
         )}
       </div>