Remove duplicated aria-label on pagination items

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

Hide file tree

Showing 4 changed files with 10 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Deprecated
 ### Removed
+
+- Pagination items no longer have a `label` attribute - this is instead defined as `Page x` where `x` is the `number` attribute
+
 ### Fixed
 
 - The click area for the logo link in a header component on tiny devices no longer stretches to fill the header

diff --git a/src/nationalarchives/components/pagination/fixtures.json b/src/nationalarchives/components/pagination/fixtures.json
@@ -22,8 +22,7 @@
           {
             "number": 7,
             "current": true,
-            "href": "#7",
-            "label": "Page 7"
+            "href": "#7"
           },
           {
             "number": 8,
@@ -41,7 +40,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=\"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>"
+      "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\">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\">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\">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\">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\">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",
@@ -90,8 +89,7 @@
           {
             "number": 7,
             "current": true,
-            "href": "#7",
-            "label": "Page 7"
+            "href": "#7"
           },
           {
             "number": 8,
@@ -110,7 +108,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=\"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>"
+      "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\">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\">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\">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\">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\">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",
@@ -133,8 +131,7 @@
           {
             "number": 7,
             "current": true,
-            "href": "#7",
-            "label": "Page 7"
+            "href": "#7"
           },
           {
             "number": 8,
@@ -155,7 +152,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=\"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>"
+      "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\">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\">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\">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\">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\">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/macro-options.json b/src/nationalarchives/components/pagination/macro-options.json
@@ -31,12 +31,6 @@
         "required": true,
         "description": ""
       },
-      {
-        "name": "label",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "href",
         "type": "string",

diff --git a/src/nationalarchives/components/pagination/template.njk b/src/nationalarchives/components/pagination/template.njk
@@ -33,10 +33,7 @@
           title: "Page " + item.number,
           accent: params.solid and item.current,
           plain: not params.solid and not item.current,
-          classes: "tna-pagination__link",
-          attributes: {
-            "aria-label": item.label
-          }
+          classes: "tna-pagination__link"
         }) }}
       </li>
       {% endif -%}