govuk_publishing_components 42.0.0 → 43.0.0

data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss

@@ -54,8 +54,8 @@
   .govuk-pagination__next {
     @include govuk-typography-weight-bold;
 
-    // Use flex to get around a whitespace issue between the arrow svg and the link text
-    // without having to rely on whitespace control from backend tooling
+    // Use flex to avoid extra space being introduced when whitespace exists
+    // between the arrow svg and the link text
     .govuk-pagination__link {
       display: flex;
       align-items: center;
@@ -96,7 +96,7 @@
     @include govuk-typography-weight-bold;
     color: $govuk-secondary-text-colour;
 
-    // Remove hover state for ellipsis items as they don't have links within them
+    // Remove hover state for ellipsis items as they don't contain links
     &:hover {
       background-color: transparent;
     }
@@ -118,8 +118,8 @@
       }
     }
 
-    // Add link hover decoration to prev/next text if no label present on prev/next only mode
-    // We do this so that we have a hover state in all possible instances
+    // Add link hover decoration to prev/next text if no label present on
+    // prev/next only mode,  so that we have a hover state in all cases
     &:hover,
     &:active {
       .govuk-pagination__link-title--decorated {
@@ -151,11 +151,10 @@
     @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
     display: inline-block;
-    padding-left: govuk-spacing(6);
   }
 
   .govuk-pagination__icon {
-    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    // Set size using rems to make the icon scale with text
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
     color: $govuk-secondary-text-colour;
@@ -175,23 +174,18 @@
   .govuk-pagination--block {
     display: block;
 
-    .govuk-pagination__item {
-      padding: govuk-spacing(3);
-      float: none;
-    }
-
     .govuk-pagination__next,
     .govuk-pagination__prev {
       padding-left: 0;
       float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
     }
 
     .govuk-pagination__next {
       padding-right: govuk-spacing(3);
-
-      .govuk-pagination__icon {
-        margin-left: 0;
-      }
     }
 
     // Only apply a border between prev and next if both are present
@@ -199,41 +193,34 @@
       border-top: 1px solid $govuk-border-colour;
     }
 
-    // Reset both these elements to their inline default, both to ensure that the focus state
-    // for block mode "shrink wraps" text as expected
-    .govuk-pagination__link,
-    .govuk-pagination__link-title {
-      display: inline;
-    }
-
-    // Set the after pseudo element to a block which makes the title visually display
-    // as block level whilst programmatically being inline
-    // We do this to get around an NVDA quirk where adjacent block level
-    // elements are always read out separately
+    // Set the after pseudo element to a block which makes the title visually
+    // display as block level whilst programmatically being inline. We do this
+    // to get around an NVDA quirk where adjacent block level elements are
+    // always read out separately
     .govuk-pagination__link-title::after {
       content: "";
       display: block;
     }
 
     .govuk-pagination__link {
+      padding-left: govuk-spacing(6);
       text-align: left;
 
-      &:focus {
-        // apply focus styling to the label within the link as if it were being focused
-        // to get around a display issue with a focusable inline element containing a mixture
-        // of inline and inline-block level elements
-        .govuk-pagination__link-label {
-          @include govuk-focused-text;
-        }
-      }
-
       &:not(:focus) {
         text-decoration: none;
       }
     }
 
     .govuk-pagination__icon {
-      margin-right: govuk-spacing(2);
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: govuk-spacing(6) * -1;
+      float: left;
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/govuk/components/pagination/_index.scss"],"names":[],"mappings":"AAAA;EACE,oDAAoD;EACpD,yDAAyD;EACzD;IACE,6CAA6C;IAC7C,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,eAAe;;IAEf;MACE,mBAAmB;MACnB,uBAAuB;IACzB;EACF;;EAEA;IACE,SAAS;IACT,UAAU;IACV,gBAAgB;EAClB;;EAEA;;;IAGE,uBAAuB;IACvB,sBAAsB;IACtB,kBAAkB;IAClB,eAAe;IACf,gBAAgB;IAChB,0CAA0C;IAC1C,WAAW,EAAE,wDAAwD;;IAErE;MACE,4CAA4C;IAC9C;EACF;;EAEA;IACE,yDAAyD;IACzD,6CAA6C;IAC7C,aAAa;;IAEb,sEAAsE;IACtE,gDAAgD;IAChD,kBAAkB;;IAElB;MACE,cAAc;IAChB;EACF;;EAEA;;IAEE,qCAAqC;;IAErC,mFAAmF;IACnF,mEAAmE;IACnE;MACE,aAAa;MACb,mBAAmB;IACrB;EACF;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,gBAAgB;EAClB;;EAEA,oDAAoD;EACpD;;;;IAIE,cAAc;EAChB;;EAEA;IACE,qCAAqC;IACrC,8BAA8B;IAC9B,oCAAoC;;IAEpC;MACE,oCAAoC;IACtC;;IAEA;MACE,iCAAiC;IACnC;EACF;;EAEA;IACE,qCAAqC;IACrC,mCAAmC;;IAEnC,4EAA4E;IAC5E;MACE,6BAA6B;IAC/B;EACF;;EAEA;IACE,cAAc;IACd,2BAA2B;;IAE3B,6DAA6D;IAC7D;MACE;QACE,WAAW;QACX,kBAAkB;QAClB,MAAM;QACN,QAAQ;QACR,SAAS;QACT,OAAO;MACT;IACF;;IAEA,wFAAwF;IACxF,oEAAoE;IACpE;;MAEE;QACE,8BAA8B;MAChC;;MAEA;;QAEE,oCAAoC;MACtC;IACF;;IAEA;MACE;QACE,+BAA+B;MACjC;;MAEA;QACE,qBAAqB;MACvB;;MAEA;QACE,qBAAqB;MACvB;IACF;EACF;;EAEA;IACE,wCAAwC;IACxC,8BAA8B;IAC9B,qBAAqB;IACrB,8BAA8B;EAChC;;EAEA;IACE,4FAA4F;IAC5F,4BAA4B;IAC5B,6BAA6B;IAC7B,mCAAmC;IACnC,kBAAkB;IAClB,yBAAyB;EAC3B;;EAEA;IACE,8BAA8B;EAChC;;EAEA;IACE,6BAA6B;EAC/B;;EAEA,uEAAuE;EACvE;IACE,cAAc;;IAEd;MACE,yBAAyB;MACzB,WAAW;IACb;;IAEA;;MAEE,eAAe;MACf,WAAW;IACb;;IAEA;MACE,+BAA+B;;MAE/B;QACE,cAAc;MAChB;IACF;;IAEA,+DAA+D;IAC/D;MACE,0CAA0C;IAC5C;;IAEA,wFAAwF;IACxF,gDAAgD;IAChD;;MAEE,eAAe;IACjB;;IAEA,gFAAgF;IAChF,qDAAqD;IACrD,mEAAmE;IACnE,yCAAyC;IACzC;MACE,WAAW;MACX,cAAc;IAChB;;IAEA;MACE,gBAAgB;;MAEhB;QACE,8EAA8E;QAC9E,oFAAoF;QACpF,2CAA2C;QAC3C;UACE,2BAA2B;QAC7B;MACF;;MAEA;QACE,qBAAqB;MACvB;IACF;;IAEA;MACE,8BAA8B;IAChC;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/pagination\") {\n  // Flexbox enhancement for small screen visual design\n  // Falls back to a float: left layout on non-flex browsers\n  .govuk-pagination {\n    @include govuk-responsive-margin(6, \"bottom\");\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-wrap: wrap;\n\n    @include govuk-media-query($from: tablet) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n  }\n\n  .govuk-pagination__list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .govuk-pagination__item,\n  .govuk-pagination__next,\n  .govuk-pagination__prev {\n    @include govuk-font(19);\n    box-sizing: border-box;\n    position: relative;\n    min-width: 45px;\n    min-height: 45px;\n    padding: govuk-spacing(2) govuk-spacing(3);\n    float: left; // Float is ignored if flex is active for prev/next links\n\n    &:hover {\n      background-color: govuk-colour(\"light-grey\");\n    }\n  }\n\n  .govuk-pagination__item {\n    // Hide items on small screens except the prev/next items,\n    // non-link items and the first and last items\n    display: none;\n\n    // Center align pagination links in their parent list item so that they\n    // visually sit in the middle of their touch area\n    text-align: center;\n\n    @include govuk-media-query($from: tablet) {\n      display: block;\n    }\n  }\n\n  .govuk-pagination__prev,\n  .govuk-pagination__next {\n    @include govuk-typography-weight-bold;\n\n    // Use flex to get around a whitespace issue between the arrow svg and the link text\n    // without having to rely on whitespace control from backend tooling\n    .govuk-pagination__link {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .govuk-pagination__prev {\n    padding-left: 0;\n  }\n\n  .govuk-pagination__next {\n    padding-right: 0;\n  }\n\n  // Only show first, last and non-link items on mobile\n  .govuk-pagination__item--current,\n  .govuk-pagination__item--ellipses,\n  .govuk-pagination__item:first-child,\n  .govuk-pagination__item:last-child {\n    display: block;\n  }\n\n  .govuk-pagination__item--current {\n    @include govuk-typography-weight-bold;\n    outline: 1px solid transparent;\n    background-color: $govuk-link-colour;\n\n    &:hover {\n      background-color: $govuk-link-colour;\n    }\n\n    .govuk-pagination__link {\n      @include govuk-link-style-inverse;\n    }\n  }\n\n  .govuk-pagination__item--ellipses {\n    @include govuk-typography-weight-bold;\n    color: $govuk-secondary-text-colour;\n\n    // Remove hover state for ellipsis items as they don't have links within them\n    &:hover {\n      background-color: transparent;\n    }\n  }\n\n  .govuk-pagination__link {\n    display: block;\n    min-width: govuk-spacing(3);\n\n    // Increase the touch area for the link to the parent element.\n    @media screen {\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\n    }\n\n    // Add link hover decoration to prev/next text if no label present on prev/next only mode\n    // We do this so that we have a hover state in all possible instances\n    &:hover,\n    &:active {\n      .govuk-pagination__link-title--decorated {\n        @include govuk-link-decoration;\n      }\n\n      .govuk-pagination__link-label,\n      .govuk-pagination__link-title--decorated {\n        @include govuk-link-hover-decoration;\n      }\n    }\n\n    &:focus {\n      .govuk-pagination__icon {\n        color: $govuk-focus-text-colour;\n      }\n\n      .govuk-pagination__link-label {\n        text-decoration: none;\n      }\n\n      .govuk-pagination__link-title--decorated {\n        text-decoration: none;\n      }\n    }\n  }\n\n  .govuk-pagination__link-label {\n    @include govuk-typography-weight-regular;\n    @include govuk-link-decoration;\n    display: inline-block;\n    padding-left: govuk-spacing(6);\n  }\n\n  .govuk-pagination__icon {\n    // Set size using rems to make the icon scale with text if user resizes text in their browser\n    width: govuk-px-to-rem(15px);\n    height: govuk-px-to-rem(13px);\n    color: $govuk-secondary-text-colour;\n    fill: currentcolor;\n    forced-color-adjust: auto;\n  }\n\n  .govuk-pagination__icon--prev {\n    margin-right: govuk-spacing(3);\n  }\n\n  .govuk-pagination__icon--next {\n    margin-left: govuk-spacing(3);\n  }\n\n  // Block mode - position previous and next links above and below numbers\n  .govuk-pagination--block {\n    display: block;\n\n    .govuk-pagination__item {\n      padding: govuk-spacing(3);\n      float: none;\n    }\n\n    .govuk-pagination__next,\n    .govuk-pagination__prev {\n      padding-left: 0;\n      float: none;\n    }\n\n    .govuk-pagination__next {\n      padding-right: govuk-spacing(3);\n\n      .govuk-pagination__icon {\n        margin-left: 0;\n      }\n    }\n\n    // Only apply a border between prev and next if both are present\n    .govuk-pagination__prev + .govuk-pagination__next {\n      border-top: 1px solid $govuk-border-colour;\n    }\n\n    // Reset both these elements to their inline default, both to ensure that the focus state\n    // for block mode \"shrink wraps\" text as expected\n    .govuk-pagination__link,\n    .govuk-pagination__link-title {\n      display: inline;\n    }\n\n    // Set the after pseudo element to a block which makes the title visually display\n    // as block level whilst programmatically being inline\n    // We do this to get around an NVDA quirk where adjacent block level\n    // elements are always read out separately\n    .govuk-pagination__link-title::after {\n      content: \"\";\n      display: block;\n    }\n\n    .govuk-pagination__link {\n      text-align: left;\n\n      &:focus {\n        // apply focus styling to the label within the link as if it were being focused\n        // to get around a display issue with a focusable inline element containing a mixture\n        // of inline and inline-block level elements\n        .govuk-pagination__link-label {\n          @include govuk-focused-text;\n        }\n      }\n\n      &:not(:focus) {\n        text-decoration: none;\n      }\n    }\n\n    .govuk-pagination__icon {\n      margin-right: govuk-spacing(2);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/govuk/components/pagination/_index.scss"],"names":[],"mappings":"AAAA;EACE,oDAAoD;EACpD,yDAAyD;EACzD;IACE,6CAA6C;IAC7C,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,eAAe;;IAEf;MACE,mBAAmB;MACnB,uBAAuB;IACzB;EACF;;EAEA;IACE,SAAS;IACT,UAAU;IACV,gBAAgB;EAClB;;EAEA;;;IAGE,uBAAuB;IACvB,sBAAsB;IACtB,kBAAkB;IAClB,eAAe;IACf,gBAAgB;IAChB,0CAA0C;IAC1C,WAAW,EAAE,wDAAwD;;IAErE;MACE,4CAA4C;IAC9C;EACF;;EAEA;IACE,yDAAyD;IACzD,6CAA6C;IAC7C,aAAa;;IAEb,sEAAsE;IACtE,gDAAgD;IAChD,kBAAkB;;IAElB;MACE,cAAc;IAChB;EACF;;EAEA;;IAEE,qCAAqC;;IAErC,uEAAuE;IACvE,yCAAyC;IACzC;MACE,aAAa;MACb,mBAAmB;IACrB;EACF;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,gBAAgB;EAClB;;EAEA,oDAAoD;EACpD;;;;IAIE,cAAc;EAChB;;EAEA;IACE,qCAAqC;IACrC,8BAA8B;IAC9B,oCAAoC;;IAEpC;MACE,oCAAoC;IACtC;;IAEA;MACE,iCAAiC;IACnC;EACF;;EAEA;IACE,qCAAqC;IACrC,mCAAmC;;IAEnC,mEAAmE;IACnE;MACE,6BAA6B;IAC/B;EACF;;EAEA;IACE,cAAc;IACd,2BAA2B;;IAE3B,6DAA6D;IAC7D;MACE;QACE,WAAW;QACX,kBAAkB;QAClB,MAAM;QACN,QAAQ;QACR,SAAS;QACT,OAAO;MACT;IACF;;IAEA,oEAAoE;IACpE,kEAAkE;IAClE;;MAEE;QACE,8BAA8B;MAChC;;MAEA;;QAEE,oCAAoC;MACtC;IACF;;IAEA;MACE;QACE,+BAA+B;MACjC;;MAEA;QACE,qBAAqB;MACvB;;MAEA;QACE,qBAAqB;MACvB;IACF;EACF;;EAEA;IACE,wCAAwC;IACxC,8BAA8B;IAC9B,qBAAqB;EACvB;;EAEA;IACE,sDAAsD;IACtD,4BAA4B;IAC5B,6BAA6B;IAC7B,mCAAmC;IACnC,kBAAkB;IAClB,yBAAyB;EAC3B;;EAEA;IACE,8BAA8B;EAChC;;EAEA;IACE,6BAA6B;EAC/B;;EAEA,uEAAuE;EACvE;IACE,cAAc;;IAEd;;MAEE,eAAe;MACf,WAAW;;MAEX;QACE,qBAAqB;MACvB;IACF;;IAEA;MACE,+BAA+B;IACjC;;IAEA,+DAA+D;IAC/D;MACE,0CAA0C;IAC5C;;IAEA,wEAAwE;IACxE,yEAAyE;IACzE,qEAAqE;IACrE,4BAA4B;IAC5B;MACE,WAAW;MACX,cAAc;IAChB;;IAEA;MACE,8BAA8B;MAC9B,gBAAgB;;MAEhB;QACE,qBAAqB;MACvB;IACF;;IAEA;MACE,gEAAgE;MAChE,6CAA6C;MAC7C,gCAAgC;MAChC,CAAC;MACD,wEAAwE;MACxE,qEAAqE;MACrE,mBAAmB;MACnB,kCAAkC;MAClC,WAAW;IACb;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/pagination\") {\n  // Flexbox enhancement for small screen visual design\n  // Falls back to a float: left layout on non-flex browsers\n  .govuk-pagination {\n    @include govuk-responsive-margin(6, \"bottom\");\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-wrap: wrap;\n\n    @include govuk-media-query($from: tablet) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n  }\n\n  .govuk-pagination__list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .govuk-pagination__item,\n  .govuk-pagination__next,\n  .govuk-pagination__prev {\n    @include govuk-font(19);\n    box-sizing: border-box;\n    position: relative;\n    min-width: 45px;\n    min-height: 45px;\n    padding: govuk-spacing(2) govuk-spacing(3);\n    float: left; // Float is ignored if flex is active for prev/next links\n\n    &:hover {\n      background-color: govuk-colour(\"light-grey\");\n    }\n  }\n\n  .govuk-pagination__item {\n    // Hide items on small screens except the prev/next items,\n    // non-link items and the first and last items\n    display: none;\n\n    // Center align pagination links in their parent list item so that they\n    // visually sit in the middle of their touch area\n    text-align: center;\n\n    @include govuk-media-query($from: tablet) {\n      display: block;\n    }\n  }\n\n  .govuk-pagination__prev,\n  .govuk-pagination__next {\n    @include govuk-typography-weight-bold;\n\n    // Use flex to avoid extra space being introduced when whitespace exists\n    // between the arrow svg and the link text\n    .govuk-pagination__link {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .govuk-pagination__prev {\n    padding-left: 0;\n  }\n\n  .govuk-pagination__next {\n    padding-right: 0;\n  }\n\n  // Only show first, last and non-link items on mobile\n  .govuk-pagination__item--current,\n  .govuk-pagination__item--ellipses,\n  .govuk-pagination__item:first-child,\n  .govuk-pagination__item:last-child {\n    display: block;\n  }\n\n  .govuk-pagination__item--current {\n    @include govuk-typography-weight-bold;\n    outline: 1px solid transparent;\n    background-color: $govuk-link-colour;\n\n    &:hover {\n      background-color: $govuk-link-colour;\n    }\n\n    .govuk-pagination__link {\n      @include govuk-link-style-inverse;\n    }\n  }\n\n  .govuk-pagination__item--ellipses {\n    @include govuk-typography-weight-bold;\n    color: $govuk-secondary-text-colour;\n\n    // Remove hover state for ellipsis items as they don't contain links\n    &:hover {\n      background-color: transparent;\n    }\n  }\n\n  .govuk-pagination__link {\n    display: block;\n    min-width: govuk-spacing(3);\n\n    // Increase the touch area for the link to the parent element.\n    @media screen {\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      }\n    }\n\n    // Add link hover decoration to prev/next text if no label present on\n    // prev/next only mode,  so that we have a hover state in all cases\n    &:hover,\n    &:active {\n      .govuk-pagination__link-title--decorated {\n        @include govuk-link-decoration;\n      }\n\n      .govuk-pagination__link-label,\n      .govuk-pagination__link-title--decorated {\n        @include govuk-link-hover-decoration;\n      }\n    }\n\n    &:focus {\n      .govuk-pagination__icon {\n        color: $govuk-focus-text-colour;\n      }\n\n      .govuk-pagination__link-label {\n        text-decoration: none;\n      }\n\n      .govuk-pagination__link-title--decorated {\n        text-decoration: none;\n      }\n    }\n  }\n\n  .govuk-pagination__link-label {\n    @include govuk-typography-weight-regular;\n    @include govuk-link-decoration;\n    display: inline-block;\n  }\n\n  .govuk-pagination__icon {\n    // Set size using rems to make the icon scale with text\n    width: govuk-px-to-rem(15px);\n    height: govuk-px-to-rem(13px);\n    color: $govuk-secondary-text-colour;\n    fill: currentcolor;\n    forced-color-adjust: auto;\n  }\n\n  .govuk-pagination__icon--prev {\n    margin-right: govuk-spacing(3);\n  }\n\n  .govuk-pagination__icon--next {\n    margin-left: govuk-spacing(3);\n  }\n\n  // Block mode - position previous and next links above and below numbers\n  .govuk-pagination--block {\n    display: block;\n\n    .govuk-pagination__next,\n    .govuk-pagination__prev {\n      padding-left: 0;\n      float: none;\n\n      .govuk-pagination__link {\n        display: inline-block;\n      }\n    }\n\n    .govuk-pagination__next {\n      padding-right: govuk-spacing(3);\n    }\n\n    // Only apply a border between prev and next if both are present\n    .govuk-pagination__prev + .govuk-pagination__next {\n      border-top: 1px solid $govuk-border-colour;\n    }\n\n    // Set the after pseudo element to a block which makes the title visually\n    // display as block level whilst programmatically being inline. We do this\n    // to get around an NVDA quirk where adjacent block level elements are\n    // always read out separately\n    .govuk-pagination__link-title::after {\n      content: \"\";\n      display: block;\n    }\n\n    .govuk-pagination__link {\n      padding-left: govuk-spacing(6);\n      text-align: left;\n\n      &:not(:focus) {\n        text-decoration: none;\n      }\n    }\n\n    .govuk-pagination__icon {\n      // This magic number is brought to you by the following equation:\n      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize\n      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em\n      //\n      // This could have been done programmatically but we don't have functions\n      // for grabbing the line-height of specific typography sizes just yet.\n      margin-top: 0.326em;\n      margin-left: govuk-spacing(6) * -1;\n      float: left;\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/pagination/fixtures.json

@@ -29,7 +29,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with custom navigation landmark",
@@ -60,7 +61,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"search\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"search\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with custom link and item text",
@@ -92,7 +94,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page one\">\n              one\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page two\" aria-current=\"page\">\n              two\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page three\">\n              three\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next page</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous page\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page one\">\n        one\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page two\" aria-current=\"page\">\n        two\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page three\">\n        three\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next page\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with custom accessible labels on item links",
@@ -125,7 +128,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"1st page\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"2nd page (you are currently on this page)\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"3rd page\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"1st page\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"2nd page (you are currently on this page)\" aria-current=\"page\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"3rd page\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with many pages",
@@ -177,7 +181,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">&ctdot;</li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/8\" aria-label=\"Page 8\">\n              8\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/9\" aria-label=\"Page 9\">\n              9\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/10\" aria-label=\"Page 10\" aria-current=\"page\">\n              10\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/11\" aria-label=\"Page 11\">\n              11\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/12\" aria-label=\"Page 12\">\n              12\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">&ctdot;</li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/40\" aria-label=\"Page 40\">\n              40\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">\n      &ctdot;\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/8\" aria-label=\"Page 8\">\n        8\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/9\" aria-label=\"Page 9\">\n        9\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/10\" aria-label=\"Page 10\" aria-current=\"page\">\n        10\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/11\" aria-label=\"Page 11\">\n        11\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/12\" aria-label=\"Page 12\">\n        12\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">\n      &ctdot;\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/40\" aria-label=\"Page 40\">\n        40\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "first page",
@@ -204,7 +209,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\" aria-current=\"page\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\" aria-current=\"page\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "last page",
@@ -231,7 +237,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\" aria-current=\"page\">\n              3\n            </a>\n          </li></ul></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\" aria-current=\"page\">\n        3\n      </a>\n    </li>\n  </ul>\n</nav>"
         },
         {
             "name": "with prev and next only",
@@ -246,7 +253,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Next<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div></nav>"
+            "screenshot": true,
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with prev and next only and labels",
@@ -265,7 +273,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Paying VAT and duty</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title\">Next page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Registering an imported vehicle</span></a>\n    </div></nav>"
+            "screenshot": true,
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous page\n      </span>\n      <span class=\"govuk-visually-hidden\">:</span>\n      <span class=\"govuk-pagination__link-label\">Paying VAT and duty</span>\n    </a>\n  </div>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Next page\n      </span>\n      <span class=\"govuk-visually-hidden\">:</span>\n      <span class=\"govuk-pagination__link-label\">Registering an imported vehicle</span>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with prev and next only and very long labels",
@@ -284,7 +293,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title\">Next page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous page\n      </span>\n      <span class=\"govuk-visually-hidden\">:</span>\n      <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>\n    </a>\n  </div>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Next page\n      </span>\n      <span class=\"govuk-visually-hidden\">:</span>\n      <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with prev and next only in a different language",
@@ -301,7 +311,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">précédente</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">suivante</span></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n        précédente\n      </span>\n    </a>\n  </div>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n        suivante\n      </span>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with previous only",
@@ -313,7 +324,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n</nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with next only",
@@ -325,7 +337,8 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Next<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with custom classes",
@@ -356,7 +369,8 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination my-custom-class\" role=\"navigation\" aria-label=\"Pagination\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination my-custom-class\" aria-label=\"Pagination\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         },
         {
             "name": "with custom attributes",
@@ -390,7 +404,8 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous<span class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next<span class=\"govuk-visually-hidden\"> page</span></span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "screenshot": false,
+            "html": "<nav class=\"govuk-pagination\" aria-label=\"Pagination\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\">\n  <div class=\"govuk-pagination__prev\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n      </svg>\n      <span class=\"govuk-pagination__link-title\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n        1\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item govuk-pagination__item--current\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n        2\n      </a>\n    </li>\n    <li class=\"govuk-pagination__item\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n        3\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n    </a>\n  </div>\n</nav>"
         }
     ]
 }

data/node_modules/govuk-frontend/dist/govuk/components/pagination/template-default.html

@@ -1,24 +1,39 @@
-<nav class="govuk-pagination" role="navigation" aria-label="Pagination"><div class="govuk-pagination__prev">
-      <a class="govuk-link govuk-pagination__link" href="/previous" rel="prev">
-        <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-          <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
-        </svg>
-        <span class="govuk-pagination__link-title">Previous<span class="govuk-visually-hidden"> page</span></span></a>
-    </div>
-<ul class="govuk-pagination__list"><li class="govuk-pagination__item">
-            <a class="govuk-link govuk-pagination__link" href="/page/1" aria-label="Page 1">
-              1
-            </a>
-          </li><li class="govuk-pagination__item govuk-pagination__item--current">
-            <a class="govuk-link govuk-pagination__link" href="/page/2" aria-label="Page 2" aria-current="page">
-              2
-            </a>
-          </li><li class="govuk-pagination__item">
-            <a class="govuk-link govuk-pagination__link" href="/page/3" aria-label="Page 3">
-              3
-            </a>
-          </li></ul><div class="govuk-pagination__next">
-      <a class="govuk-link govuk-pagination__link" href="/next" rel="next">        <span class="govuk-pagination__link-title">Next<span class="govuk-visually-hidden"> page</span></span>      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+<nav class="govuk-pagination" aria-label="Pagination">
+  <div class="govuk-pagination__prev">
+    <a class="govuk-link govuk-pagination__link" href="/previous" rel="prev">
+      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+        <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+      </svg>
+      <span class="govuk-pagination__link-title">
+        Previous<span class="govuk-visually-hidden"> page</span>
+      </span>
+    </a>
+  </div>
+  <ul class="govuk-pagination__list">
+    <li class="govuk-pagination__item">
+      <a class="govuk-link govuk-pagination__link" href="/page/1" aria-label="Page 1">
+        1
+      </a>
+    </li>
+    <li class="govuk-pagination__item govuk-pagination__item--current">
+      <a class="govuk-link govuk-pagination__link" href="/page/2" aria-label="Page 2" aria-current="page">
+        2
+      </a>
+    </li>
+    <li class="govuk-pagination__item">
+      <a class="govuk-link govuk-pagination__link" href="/page/3" aria-label="Page 3">
+        3
+      </a>
+    </li>
+  </ul>
+  <div class="govuk-pagination__next">
+    <a class="govuk-link govuk-pagination__link" href="/next" rel="next">
+      <span class="govuk-pagination__link-title">
+        Next<span class="govuk-visually-hidden"> page</span>
+      </span>
+      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
-      </svg></a>
-    </div></nav>
+      </svg>
+    </a>
+  </div>
+</nav>

data/node_modules/govuk-frontend/dist/govuk/components/pagination/template-first-page.html

@@ -1,17 +1,29 @@
-<nav class="govuk-pagination" role="navigation" aria-label="Pagination"><ul class="govuk-pagination__list"><li class="govuk-pagination__item govuk-pagination__item--current">
-            <a class="govuk-link govuk-pagination__link" href="/page/1" aria-label="Page 1" aria-current="page">
-              1
-            </a>
-          </li><li class="govuk-pagination__item">
-            <a class="govuk-link govuk-pagination__link" href="/page/2" aria-label="Page 2">
-              2
-            </a>
-          </li><li class="govuk-pagination__item">
-            <a class="govuk-link govuk-pagination__link" href="/page/3" aria-label="Page 3">
-              3
-            </a>
-          </li></ul><div class="govuk-pagination__next">
-      <a class="govuk-link govuk-pagination__link" href="/next" rel="next">        <span class="govuk-pagination__link-title">Next<span class="govuk-visually-hidden"> page</span></span>      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+<nav class="govuk-pagination" aria-label="Pagination">
+  <ul class="govuk-pagination__list">
+    <li class="govuk-pagination__item govuk-pagination__item--current">
+      <a class="govuk-link govuk-pagination__link" href="/page/1" aria-label="Page 1" aria-current="page">
+        1
+      </a>
+    </li>
+    <li class="govuk-pagination__item">
+      <a class="govuk-link govuk-pagination__link" href="/page/2" aria-label="Page 2">
+        2
+      </a>
+    </li>
+    <li class="govuk-pagination__item">
+      <a class="govuk-link govuk-pagination__link" href="/page/3" aria-label="Page 3">
+        3
+      </a>
+    </li>
+  </ul>
+  <div class="govuk-pagination__next">
+    <a class="govuk-link govuk-pagination__link" href="/next" rel="next">
+      <span class="govuk-pagination__link-title">
+        Next<span class="govuk-visually-hidden"> page</span>
+      </span>
+      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
-      </svg></a>
-    </div></nav>
+      </svg>
+    </a>
+  </div>
+</nav>