Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WCAG Pagination: Added Button Support #9755

Merged
merged 5 commits into from
May 15, 2024
Merged

WCAG Pagination: Added Button Support #9755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3dc0afd
Pagination buttons
BrahimMahadi Apr 23, 2024
39de39b
Added functionality for pagination with buttons
BrahimMahadi Apr 25, 2024
96931a0
Made recommended changes
BrahimMahadi May 8, 2024
74fd327
Optimization Changes
BrahimMahadi May 14, 2024
355f013
Refactored code to support buttons only
BrahimMahadi May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/pages/docs/ref/paginate/paginate-en.hbs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}

BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved
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;
}
BrahimMahadi marked this conversation as resolved.
Show resolved Hide resolved

&: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
Open in desktop
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>