Pagination component uses different markup from equivalent component in GOV.UK Frontend #1632
Description
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">
⋯
</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">
⋯
</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
--numberedmodifier to enable numbered pagination styles - Includes extraneous
role="navigation" - Uses a
divaround previous and next links - Uses
__previouselement class instead of__prev - Uses
__titleelement class instead of__link-title - Doesn’t use
nhsuk-linkfor 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?