Skip to content

Commit

Permalink
Patch - WCAG Pagination: Added Button Support (#9755)
Browse files Browse the repository at this point in the history 
Patch - Paginate: convert UI to use <button> tags instead of <a> tags.
  • Loading branch information
@BrahimMahadi
BrahimMahadi committed May 15, 2024
1 parent 3064890 commit 37c1307
Show file tree
Hide file tree
Showing 6 changed files with 317 additions and 229 deletions.
2 changes: 1 addition & 1 deletion site/pages/docs/ref/paginate/paginate-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Adds pagination at the bottom of a list of items.",
"altLangPrefix": "paginate",
"dateModified": "2023-05-15"
"dateModified": "2024-05-14"
}
---

Expand Down
2 changes: 1 addition & 1 deletion site/pages/docs/ref/paginate/paginate-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Ajoute une pagination à la fin d'une liste d'items.",
"altLangPrefix": "paginate",
"dateModified": "2023-05-15"
"dateModified": "2024-05-14"
}
---

Expand Down
69 changes: 69 additions & 0 deletions src/plugins/paginate/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,75 @@
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

li.active:nth-last-child(2) button {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

.pagination {
& > li {
&.active {
& > button {
cursor: default;
outline-offset: -2px;
}
}
& > button {
background-color: $btn-default-bg;
border: 1px solid $btn-default-border;
color: $btn-default-color;
margin-bottom: .5em;
margin-left: -1px;
padding: 10px 16px;
position: relative;

&:hover, &:focus {
background-color: #d4d6da;
border-color: #bbbfc5;
z-index: 2;
}

&:focus {
@include tab-focus;
}
}
&.disabled {
& + li {
& > button {
border-bottom-left-radius: $pager-border-radius;
border-top-left-radius: $pager-border-radius;
}
}
}

&:first-child {
& > button {
border-bottom-left-radius: $pager-border-radius;
border-top-left-radius: $pager-border-radius;
margin-left: 0;
}
}

&:last-child {
& > button {
border-bottom-right-radius: $pager-border-radius;
border-top-right-radius: $pager-border-radius;
}
}

}

& > .active {
& > button, & > button:focus, & > button:hover {
background-color: $brand-primary;
border-color: $brand-primary;
color: #fff;
cursor: default;
z-index: 3;
}
}
}
}

html:not(.wb-disable) .wb-pgfltr-out {
Expand Down
218 changes: 109 additions & 109 deletions src/plugins/paginate/paginate-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"tag": "paginate",
"parentdir": "paginate",
"altLangPrefix": "paginate",
"dateModified": "2023-05-15"
"dateModified": "2024-05-14"
}
---

Expand All @@ -25,115 +25,14 @@

<h2>On this page:</h2>
<ul>
<li><a href="#paginatedList">Example 1 - List</a></li>
<li><a href="#paginatedTable">Example 2 - Table</a></li>
<li><a href="#paginatedArticles">Example 3 - Articles</a></li>
<li><a href="#filteredEventsList">Example 4 - Events list</a></li>
<li><a href="#paginatedTable">Example 1 - Table</a></li>
<li><a href="#paginatedArticles">Example 2 - Articles</a></li>
<li><a href="#filteredEventsList">Example 3 - Events list</a></li>
<li><a href="#paginatedList">Example 4 - List</a></li>
</ul>

<section id="paginatedList">
<h2>Example 1 - List</h2>
<ul class="wb-paginate provisional">
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!</li>
<li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?</li>
<li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.</li>
<li>Corrupti est quos ad vero. Hic repellendus numquam officia beatae.</li>
<li>Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?</li>
<li>Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!</li>
<li>Aperiam odit, sapiente cum modi amet labore iste dolorum minima.</li>
<li>Sunt praesentium voluptatibus aliquid cumque quae eaque aspernatur incidunt sint?</li>
<li>Quae illo veritatis deserunt optio corporis repellendus! Qui, deleniti suscipit?</li>
<li>Expedita quae temporibus ex labore ipsa excepturi inventore deleniti magnam!</li>
<li>Facere reprehenderit natus voluptatibus perspiciatis. Ipsam id quam facilis maxime?</li>
<li>Provident assumenda fugiat, nulla temporibus accusantium incidunt laudantium ea consequuntur!</li>
<li>Nulla, non aspernatur ipsam provident libero ratione corrupti necessitatibus dicta.</li>
<li>Possimus minus autem voluptate suscipit porro non culpa officiis doloribus?</li>
<li>Alias modi eius repudiandae natus molestiae ad, unde aliquid praesentium.</li>
<li>Ut incidunt corporis quos vel accusantium non assumenda dolorum vitae?</li>
<li>Velit magnam laudantium expedita recusandae similique voluptates est, doloribus odit!</li>
<li>Officia quasi non, ex dolore fuga reiciendis unde alias blanditiis!</li>
<li>Repellendus, libero sint at nam tempore blanditiis recusandae ipsa cupiditate?</li>
<li>Maiores exercitationem ipsa fuga accusamus impedit dolorum cum voluptatum alias.</li>
<li>Nulla blanditiis ut ipsa nesciunt officiis error quisquam, reprehenderit quam!</li>
<li>Libero sint optio sunt beatae ex, quibusdam autem dignissimos et?</li>
<li>Mollitia cum tenetur sed blanditiis unde sint tempore quaerat ratione?</li>
<li>Optio dicta harum placeat tempore dolorem? Temporibus enim libero vel.</li>
<li>Quibusdam delectus, tenetur esse ut quos tempore consequatur iste odit!</li>
<li>Minima nesciunt laudantium cum vero ipsam temporibus reiciendis. Officiis, earum?</li>
<li>Veritatis perspiciatis eligendi earum assumenda deleniti quibusdam omnis cumque quisquam!</li>
<li>Libero molestias explicabo natus id aliquam veniam suscipit? Repudiandae, minima!</li>
<li>Labore nesciunt numquam modi minus nostrum eveniet temporibus expedita ea.</li>
<li>Neque, eveniet deserunt. Quasi suscipit nulla similique porro perferendis atque.</li>
<li>Quo laborum quos eos quas vitae eveniet expedita cupiditate incidunt?</li>
<li>Sit, at doloribus deserunt magnam quasi perferendis reprehenderit reiciendis eligendi?</li>
<li>Fugiat eos modi voluptatum sit amet voluptas fugit necessitatibus veniam!</li>
<li>Laudantium sunt earum voluptatum cupiditate aut rem tempore nam ea.</li>
<li>Odit expedita sunt distinctio reiciendis dolores magnam nobis non. Reiciendis.</li>
<li>Corrupti suscipit, sunt eligendi exercitationem distinctio consequatur repudiandae numquam dicta.</li>
<li>Dolore, saepe veritatis. Voluptatibus temporibus laboriosam impedit nisi quod perferendis?</li>
<li>Nesciunt, reprehenderit rem quis odio incidunt laborum aliquid dolorem nihil.</li>
<li>Cum fuga, maxime quod quos sit quidem odit atque rem!</li>
<li>Harum sint soluta veniam blanditiis laboriosam corporis repellendus aspernatur unde?</li>
<li>Exercitationem dolorem quas quae ab, praesentium obcaecati quis similique culpa!</li>
<li>Nesciunt ratione modi sit, placeat quo sint perspiciatis consequatur nam.</li>
<li>Saepe cumque, reprehenderit tempore neque dolores quo eum velit ullam?</li>
<li>Praesentium neque, quae molestias sed mollitia doloremque temporibus. Omnis, placeat?</li>
<li>Quos magni at exercitationem corporis nulla quae pariatur placeat blanditiis?</li>
<li>Sit, id? Beatae eveniet fugit ut sapiente accusamus modi nisi.</li>
<li>Quam, in tenetur dolore quis aspernatur ipsum adipisci officia perferendis.</li>
<li>Dicta sapiente non at, maiores sunt natus asperiores nihil ducimus.</li>
<li>Accusamus inventore ad explicabo earum quidem qui soluta iusto officia.</li>
<li>At rerum doloremque nostrum perspiciatis repellat velit nihil aperiam laborum!</li>
<li>Repellendus, libero sint at nam tempore blanditiis recusandae ipsa cupiditate?</li>
<li>Maiores exercitationem ipsa fuga accusamus impedit dolorum cum voluptatum alias.</li>
<li>Nulla blanditiis ut ipsa nesciunt officiis error quisquam, reprehenderit quam!</li>
<li>Libero sint optio sunt beatae ex, quibusdam autem dignissimos et?</li>
<li>Mollitia cum tenetur sed blanditiis unde sint tempore quaerat ratione?</li>
<li>Optio dicta harum placeat tempore dolorem? Temporibus enim libero vel.</li>
<li>Quibusdam delectus, tenetur esse ut quos tempore consequatur iste odit!</li>
<li>Minima nesciunt laudantium cum vero ipsam temporibus reiciendis. Officiis, earum?</li>
<li>Veritatis perspiciatis eligendi earum assumenda deleniti quibusdam omnis cumque quisquam!</li>
<li>Libero molestias explicabo natus id aliquam veniam suscipit? Repudiandae, minima!</li>
<li>Labore nesciunt numquam modi minus nostrum eveniet temporibus expedita ea.</li>
<li>Neque, eveniet deserunt. Quasi suscipit nulla similique porro perferendis atque.</li>
<li>Quo laborum quos eos quas vitae eveniet expedita cupiditate incidunt?</li>
<li>Sit, at doloribus deserunt magnam quasi perferendis reprehenderit reiciendis eligendi?</li>
<li>Fugiat eos modi voluptatum sit amet voluptas fugit necessitatibus veniam!</li>
<li>Laudantium sunt earum voluptatum cupiditate aut rem tempore nam ea.</li>
<li>Odit expedita sunt distinctio reiciendis dolores magnam nobis non. Reiciendis.</li>
<li>Corrupti suscipit, sunt eligendi exercitationem distinctio consequatur repudiandae numquam dicta.</li>
<li>Dolore, saepe veritatis. Voluptatibus temporibus laboriosam impedit nisi quod perferendis?</li>
<li>Nesciunt, reprehenderit rem quis odio incidunt laborum aliquid dolorem nihil.</li>
<li>Cum fuga, maxime quod quos sit quidem odit atque rem!</li>
<li>Harum sint soluta veniam blanditiis laboriosam corporis repellendus aspernatur unde?</li>
<li>Exercitationem dolorem quas quae ab, praesentium obcaecati quis similique culpa!</li>
<li>Nesciunt ratione modi sit, placeat quo sint perspiciatis consequatur nam.</li>
<li>Saepe cumque, reprehenderit tempore neque dolores quo eum velit ullam?</li>
<li>Praesentium neque, quae molestias sed mollitia doloremque temporibus. Omnis, placeat?</li>
<li>Quos magni at exercitationem corporis nulla quae pariatur placeat blanditiis?</li>
<li>Sit, id? Beatae eveniet fugit ut sapiente accusamus modi nisi.</li>
<li>Quam, in tenetur dolore quis aspernatur ipsum adipisci officia perferendis.</li>
<li>Dicta sapiente non at, maiores sunt natus asperiores nihil ducimus.</li>
<li>Accusamus inventore ad explicabo earum quidem qui soluta iusto officia.</li>
<li>At rerum doloremque nostrum perspiciatis repellat velit nihil aperiam laborum!</li>
</ul>
<details>
<summary>Source code</summary>
<pre><code>&lt;ul class="wb-paginate provisional">
&lt;li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!&lt;/li>
&lt;li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?&lt;/li>
&lt;li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.&lt;/li>
&lt;li>Corrupti est quos ad vero. Hic repellendus numquam officia beatae.&lt;/li>
&lt;li>Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?&lt;/li>
&lt;li>Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!&lt;/li>
&lt;li>Aperiam odit, sapiente cum modi amet labore iste dolorum minima.&lt;/li>
...
&lt;/ul></code></pre>
</details>
</section>

<section id="paginatedTable">
<h2>Example 2 - Table</h2>
<h2>Example 1 - Table</h2>
<table class="table wb-paginate provisional">
<thead>
<tr>
Expand Down Expand Up @@ -425,7 +324,7 @@
</section>

<section id="paginatedArticles">
<h2>Example 3 - Articles</h2>
<h2>Example 2 - Articles</h2>
<p>This example leverages the following option: <code>itemsPerPage</code></p>
<div class="wb-paginate provisional row wb-eqht-grd" data-wb-paginate='{
"itemsPerPage": 12
Expand Down Expand Up @@ -646,7 +545,7 @@
</section>

<section id="filteredEventsList">
<h2>Example 4 - Events list</h2>
<h2>Example 3 - Events list</h2>
<p>This example leverages the following options: <code>itemsPerPage</code>, <code>section</code>, <code>selector</code>, and <code>uiTarget</code></p>
<p>This example also leverages the following other two plugins: <b>Filter</b> and <b>Tagfilter</b>. In order for all three plugins to work together, they have to be added to the same HTML element.</p>
<div class="wb-paginate wb-tagfilter provisional wb-filter"
Expand Down Expand Up @@ -1189,3 +1088,104 @@
&lt;/div></code></pre>
</details>
</section>

<section id="paginatedList">
<h2>Example 4 - List</h2>
<ul class="wb-paginate provisional">
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!</li>
<li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?</li>
<li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.</li>
<li>Corrupti est quos ad vero. Hic repellendus numquam officia beatae.</li>
<li>Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?</li>
<li>Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!</li>
<li>Aperiam odit, sapiente cum modi amet labore iste dolorum minima.</li>
<li>Sunt praesentium voluptatibus aliquid cumque quae eaque aspernatur incidunt sint?</li>
<li>Quae illo veritatis deserunt optio corporis repellendus! Qui, deleniti suscipit?</li>
<li>Expedita quae temporibus ex labore ipsa excepturi inventore deleniti magnam!</li>
<li>Facere reprehenderit natus voluptatibus perspiciatis. Ipsam id quam facilis maxime?</li>
<li>Provident assumenda fugiat, nulla temporibus accusantium incidunt laudantium ea consequuntur!</li>
<li>Nulla, non aspernatur ipsam provident libero ratione corrupti necessitatibus dicta.</li>
<li>Possimus minus autem voluptate suscipit porro non culpa officiis doloribus?</li>
<li>Alias modi eius repudiandae natus molestiae ad, unde aliquid praesentium.</li>
<li>Ut incidunt corporis quos vel accusantium non assumenda dolorum vitae?</li>
<li>Velit magnam laudantium expedita recusandae similique voluptates est, doloribus odit!</li>
<li>Officia quasi non, ex dolore fuga reiciendis unde alias blanditiis!</li>
<li>Repellendus, libero sint at nam tempore blanditiis recusandae ipsa cupiditate?</li>
<li>Maiores exercitationem ipsa fuga accusamus impedit dolorum cum voluptatum alias.</li>
<li>Nulla blanditiis ut ipsa nesciunt officiis error quisquam, reprehenderit quam!</li>
<li>Libero sint optio sunt beatae ex, quibusdam autem dignissimos et?</li>
<li>Mollitia cum tenetur sed blanditiis unde sint tempore quaerat ratione?</li>
<li>Optio dicta harum placeat tempore dolorem? Temporibus enim libero vel.</li>
<li>Quibusdam delectus, tenetur esse ut quos tempore consequatur iste odit!</li>
<li>Minima nesciunt laudantium cum vero ipsam temporibus reiciendis. Officiis, earum?</li>
<li>Veritatis perspiciatis eligendi earum assumenda deleniti quibusdam omnis cumque quisquam!</li>
<li>Libero molestias explicabo natus id aliquam veniam suscipit? Repudiandae, minima!</li>
<li>Labore nesciunt numquam modi minus nostrum eveniet temporibus expedita ea.</li>
<li>Neque, eveniet deserunt. Quasi suscipit nulla similique porro perferendis atque.</li>
<li>Quo laborum quos eos quas vitae eveniet expedita cupiditate incidunt?</li>
<li>Sit, at doloribus deserunt magnam quasi perferendis reprehenderit reiciendis eligendi?</li>
<li>Fugiat eos modi voluptatum sit amet voluptas fugit necessitatibus veniam!</li>
<li>Laudantium sunt earum voluptatum cupiditate aut rem tempore nam ea.</li>
<li>Odit expedita sunt distinctio reiciendis dolores magnam nobis non. Reiciendis.</li>
<li>Corrupti suscipit, sunt eligendi exercitationem distinctio consequatur repudiandae numquam dicta.</li>
<li>Dolore, saepe veritatis. Voluptatibus temporibus laboriosam impedit nisi quod perferendis?</li>
<li>Nesciunt, reprehenderit rem quis odio incidunt laborum aliquid dolorem nihil.</li>
<li>Cum fuga, maxime quod quos sit quidem odit atque rem!</li>
<li>Harum sint soluta veniam blanditiis laboriosam corporis repellendus aspernatur unde?</li>
<li>Exercitationem dolorem quas quae ab, praesentium obcaecati quis similique culpa!</li>
<li>Nesciunt ratione modi sit, placeat quo sint perspiciatis consequatur nam.</li>
<li>Saepe cumque, reprehenderit tempore neque dolores quo eum velit ullam?</li>
<li>Praesentium neque, quae molestias sed mollitia doloremque temporibus. Omnis, placeat?</li>
<li>Quos magni at exercitationem corporis nulla quae pariatur placeat blanditiis?</li>
<li>Sit, id? Beatae eveniet fugit ut sapiente accusamus modi nisi.</li>
<li>Quam, in tenetur dolore quis aspernatur ipsum adipisci officia perferendis.</li>
<li>Dicta sapiente non at, maiores sunt natus asperiores nihil ducimus.</li>
<li>Accusamus inventore ad explicabo earum quidem qui soluta iusto officia.</li>
<li>At rerum doloremque nostrum perspiciatis repellat velit nihil aperiam laborum!</li>
<li>Repellendus, libero sint at nam tempore blanditiis recusandae ipsa cupiditate?</li>
<li>Maiores exercitationem ipsa fuga accusamus impedit dolorum cum voluptatum alias.</li>
<li>Nulla blanditiis ut ipsa nesciunt officiis error quisquam, reprehenderit quam!</li>
<li>Libero sint optio sunt beatae ex, quibusdam autem dignissimos et?</li>
<li>Mollitia cum tenetur sed blanditiis unde sint tempore quaerat ratione?</li>
<li>Optio dicta harum placeat tempore dolorem? Temporibus enim libero vel.</li>
<li>Quibusdam delectus, tenetur esse ut quos tempore consequatur iste odit!</li>
<li>Minima nesciunt laudantium cum vero ipsam temporibus reiciendis. Officiis, earum?</li>
<li>Veritatis perspiciatis eligendi earum assumenda deleniti quibusdam omnis cumque quisquam!</li>
<li>Libero molestias explicabo natus id aliquam veniam suscipit? Repudiandae, minima!</li>
<li>Labore nesciunt numquam modi minus nostrum eveniet temporibus expedita ea.</li>
<li>Neque, eveniet deserunt. Quasi suscipit nulla similique porro perferendis atque.</li>
<li>Quo laborum quos eos quas vitae eveniet expedita cupiditate incidunt?</li>
<li>Sit, at doloribus deserunt magnam quasi perferendis reprehenderit reiciendis eligendi?</li>
<li>Fugiat eos modi voluptatum sit amet voluptas fugit necessitatibus veniam!</li>
<li>Laudantium sunt earum voluptatum cupiditate aut rem tempore nam ea.</li>
<li>Odit expedita sunt distinctio reiciendis dolores magnam nobis non. Reiciendis.</li>
<li>Corrupti suscipit, sunt eligendi exercitationem distinctio consequatur repudiandae numquam dicta.</li>
<li>Dolore, saepe veritatis. Voluptatibus temporibus laboriosam impedit nisi quod perferendis?</li>
<li>Nesciunt, reprehenderit rem quis odio incidunt laborum aliquid dolorem nihil.</li>
<li>Cum fuga, maxime quod quos sit quidem odit atque rem!</li>
<li>Harum sint soluta veniam blanditiis laboriosam corporis repellendus aspernatur unde?</li>
<li>Exercitationem dolorem quas quae ab, praesentium obcaecati quis similique culpa!</li>
<li>Nesciunt ratione modi sit, placeat quo sint perspiciatis consequatur nam.</li>
<li>Saepe cumque, reprehenderit tempore neque dolores quo eum velit ullam?</li>
<li>Praesentium neque, quae molestias sed mollitia doloremque temporibus. Omnis, placeat?</li>
<li>Quos magni at exercitationem corporis nulla quae pariatur placeat blanditiis?</li>
<li>Sit, id? Beatae eveniet fugit ut sapiente accusamus modi nisi.</li>
<li>Quam, in tenetur dolore quis aspernatur ipsum adipisci officia perferendis.</li>
<li>Dicta sapiente non at, maiores sunt natus asperiores nihil ducimus.</li>
<li>Accusamus inventore ad explicabo earum quidem qui soluta iusto officia.</li>
<li>At rerum doloremque nostrum perspiciatis repellat velit nihil aperiam laborum!</li>
</ul>
<details>
<summary>Source code</summary>
<pre><code>&lt;ul class="wb-paginate provisional">
&lt;li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!&lt;/li>
&lt;li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?&lt;/li>
&lt;li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.&lt;/li>
&lt;li>Corrupti est quos ad vero. Hic repellendus numquam officia beatae.&lt;/li>
&lt;li>Amet ullam, ipsam adipisci ad nisi facere veritatis fuga pariatur?&lt;/li>
&lt;li>Eum ipsum doloribus nisi natus dolorum maxime omnis, mollitia hic!&lt;/li>
&lt;li>Aperiam odit, sapiente cum modi amet labore iste dolorum minima.&lt;/li>
...
&lt;/ul></code></pre>
</details>
</section>

0 comments on commit 37c1307

Please sign in to comment.