Optimization of the pagination element

Feature Requests / Improvements
1

Hi bricks team,

Currently the pagination element is surrounded by two divs. If you agree, it would be much cleaner if the two divs were removed. Please pay attention to the following example.

before

<div id="brxe-zjgdan" class="brxe-pagination">
   <div class="bricks-pagination" role="navigation" aria-label="Pagination">
     <ul class="page-numbers">
	<li><span aria-current="page" class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="https://domain.com/shop/page/2/">2</a></li>
	<li><a class="page-numbers" href="https://domain.com/shop/page/3/">3</a></li>
	<li><a class="next page-numbers" aria-label="Next page" href="https://domain.com/shop/page/2/">→</a></li>
     </ul>
   </div>
</div>

after

<ul class="page-numbers">
	<li><span aria-current="page" class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="https://domain.com/shop/page/2/">2</a></li>
	<li><a class="page-numbers" href="https://domain.com/shop/page/3/">3</a></li>
	<li><a class="next page-numbers" aria-label="Next page" href="https://domain.com/shop/page/2/">→</a></li>
</ul>
1 Like
2

Hey!
Why would you want to do that? Don’t you want your site to be accessible? Or are you planning to add all the attributes manually?

Besides, a wrapper always comes handy, specially when you don’t have one. Not that it’s too difficult to add one with Bricks…

3

Hi @h.udo,

I just compared it to a website that had clean coding like bricks. In conjunction with wrappers, ul acts like a wrapper. am i wrong?

4

My point is that with your suggestion we would lose the attributes role="navigation" aria-label="Pagination".
That doesn’t make sense from an accessibility point of view. The DOM structure is kinda secondary here.

5

Yes, but it can’t be added to ul?

<ul class="page-numbers" role="navigation" aria-label="Pagination">
	<li><span aria-current="page" class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="https://domain.com/shop/page/2/">2</a></li>
	<li><a class="page-numbers" href="https://domain.com/shop/page/3/">3</a></li>
	<li><a class="next page-numbers" aria-label="Next page" href="https://domain.com/shop/page/2/">→</a></li>
</ul>
6

That’s why I wrote the above sentence. What’s the gain? 2 divs less? Anyway, I’m out.