Pagination component uses different markup from equivalent component in GOV.UK Frontend

[paulrobertlloyd]

There are a number of differences in the numbered pagination markup compared to that used in the equivalent component used for GOV.UK Frontend.

Replacing nhsuk and govuk with brand so as to reduce the number of differences gives the following diff:

- <nav class="brand-pagination" aria-label="Pagination">
+ <nav class="brand-pagination nhsuk-pagination--numbered" role="navigation" aria-label="Pagination">
-   <div class="brand-pagination__prev">
-     <a class="brand-link brand-pagination__link" href="#" rel="prev">
+     <a class="brand-pagination__previous" href="#" rel="prev">
-       <svg><!--GOV.UK left arrow icon--></svg>
+       <svg><!--NHS.UK left arrow icon--></svg>
-       <span class="brand-pagination__link-title">
+       <span class="brand-pagination__title">
-         Previous<span class="brand-u-visually-hidden"> page</span>
+         Previous<span class="brand-visually-hidden"> page</span> 
        </span>
      </a>
-   </div>
    <ul class="brand-pagination__list">
      <li class="brand-pagination__item">
-       <a class="brand-link brand-pagination__link" href="#" aria-label="Page 1">
+       <a class="brand-pagination__link" href="#" aria-label="Page 1">
          1
        </a>
      </li>
      <li class="brand-pagination__item brand-pagination__item--ellipsis">
        &ctdot;
      </li>
      <li class="brand-pagination__item">
-       <a class="brand-link brand-pagination__link" href="#" aria-label="Page 6">
+       <a class="brand-pagination__link" href="#" aria-label="Page 6">
          6
        </a>
      </li>
      <li class="brand-pagination__item brand-pagination__item--current">
        <a class="brand-pagination__link" href="#" aria-label="Page 7" aria-current="page">
          7
        </a>
      </li>
      <li class="brand-pagination__item">
-       <a class="brand-link brand-pagination__link" href="#" aria-label="Page 8">
+       <a class="brand-pagination__link" href="#" aria-label="Page 8">
          8
        </a>
      </li>
      <li class="brand-pagination__item brand-pagination__item--ellipsis">
        &ctdot;
      </li>
      <li class="brand-pagination__item">
-       <a class="brand-link brand-pagination__link" href="#" aria-label="Page 42">
+       <a class="brand-pagination__link" href="#" aria-label="Page 42">
          42
        </a>
      </li>
    </ul>
-   <div class="brand-pagination__next">
-     <a class="brand-link brand-pagination__link" href="#" rel="next">
+     <a class="brand-pagination__next" href="#" rel="prev">
-       <svg><!--GOV.UK right arrow icon--></svg>
+       <svg><!--NHS.UK right arrow icon--></svg>
-       <span class="brand-pagination__link-title">
+       <span class="brand-pagination__title">
-         Next<span class="brand-u-visually-hidden"> page</span>
+         Next<span class="brand-visually-hidden"> page</span> 
        </span>
      </a>
-   </div>
  </nav>

The main differences are that the NHS component:

• Requires a --numbered modifier to enable numbered pagination styles
• Includes extraneous role="navigation"
• Uses a div around previous and next links
• Uses __previous element class instead of __prev
• Uses __title element class instead of __link-title
• Doesn’t use nhsuk-link for pagination links

Also different, but unavoidable, are the SVG icons used for previous and next arrows (and the different visually hidden class name).

I’m not sure what differences there are for the block pagination variant, but a number of the above will still apply.

How many of these differences are we happy with, and how many do we want to align in a future upcoming breaking release?