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.

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

Fix pagination: make previous and next buttons accessible #2102

Open
wants to merge 33 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
9460019
Prototype
MewenLeHo Jun 23, 2023
4699306
Prototype
MewenLeHo Jun 26, 2023
55de330
Fix
MewenLeHo Jun 26, 2023
bfb234f
Prototype
MewenLeHo Jun 26, 2023
f6d4185
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Jun 27, 2023
9217af7
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Jun 28, 2023
23bd2e7
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Jul 24, 2023
02ef7e5
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Jul 24, 2023
48886f6
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Jul 26, 2023
48a954a
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Jul 31, 2023
bfc5da4
New version
MewenLeHo Aug 7, 2023
812cf89
Fix
MewenLeHo Aug 7, 2023
aa2f7fa
Fix
MewenLeHo Aug 7, 2023
1aaa90a
Fix after review
MewenLeHo Aug 8, 2023
69b1bef
.
MewenLeHo Aug 8, 2023
9a352c8
Fix
MewenLeHo Aug 8, 2023
04c86fd
.
MewenLeHo Aug 9, 2023
4d151ad
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Aug 22, 2023
9d8ad6c
.
MewenLeHo Aug 22, 2023
6f753db
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Aug 23, 2023
7992576
Fix padding and gap
MewenLeHo Aug 23, 2023
fb02b56
Fix padding when no title but not a number
MewenLeHo Aug 23, 2023
0a5b410
Update migration guide
MewenLeHo Aug 23, 2023
ba98b65
.
MewenLeHo Aug 24, 2023
026d259
.
MewenLeHo Aug 24, 2023
d57ee5e
.
MewenLeHo Aug 24, 2023
15f3d6b
.
MewenLeHo Aug 24, 2023
346f5ab
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Aug 25, 2023
95c9c68
Fix version
MewenLeHo Aug 25, 2023
1a00d11
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Sep 5, 2023
f7093fb
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Sep 13, 2023
54523a8
Merge branch 'main' into main-mlh-fix-a11y-pagination
MewenLeHo Sep 22, 2023
eec7fb1
Merge branch 'main' into main-mlh-fix-a11y-pagination
louismaximepiton Jan 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions scss/_pagination.scss
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,18 @@
// End mod
}

// Boosted mod: special style for pagination with icons only
.icons-only {
MewenLeHo marked this conversation as resolved.
Show resolved Hide resolved
.page-item {
&:first-child .page-link {
padding-right: 0;
}
&:last-child .page-link {
padding-left: 0;
}
}
}
// End mod

louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
//
// Sizing
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/5.3/components/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ Looking to use an icon or symbol in place of text for some pagination links? Be

{{< example >}}
<nav aria-label="Page navigation example with icons">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next"></a></li>
<ul class="pagination icons-only">
<li class="page-item"><a class="page-link" href="#"><span class="visually-hidden">Previous</span></a></li>
<li class="page-item"><a class="page-link" href="#"><span class="visually-hidden">Next</span></a></li>
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</nav>
{{< /example >}}
Expand Down