Add a title to pagination items

nationalarchives · Oct 29, 2024 · c15b651 · c15b651
1 parent ee9cbe0
commit c15b651
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Added `aria-label` attributes to all elements with custom `title` attributes
+- Added a title for items in pagination components ("Page x")
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/pagination/fixtures.json b/src/nationalarchives/components/pagination/fixtures.json
@@ -41,7 +41,7 @@
           "href": "#next"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-label=\"Page 7\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
     },
     {
       "name": "no numbers",
@@ -110,7 +110,7 @@
         },
         "classes": "pagination__test-class"
       },
-      "html": "<nav class=\"tna-pagination pagination__test-class\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination pagination__test-class\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-label=\"Page 7\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
     },
     {
       "name": "with attributes",
@@ -155,7 +155,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\" data-testattribute=\"foobar\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\" data-testattribute=\"foobar\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-label=\"Page 7\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/pagination/template.njk b/src/nationalarchives/components/pagination/template.njk
@@ -30,6 +30,7 @@
         {{ tnaButton({
           text: item.number,
           href: item.href,
+          title: "Page " + item.number,
           accent: params.solid and item.current,
           plain: not params.solid and not item.current,
           classes: "tna-pagination__link",