Fix pagination: make previous and next buttons accessible

scss/_pagination.scss

@@ -1,10 +1,12 @@
 .pagination {
   // scss-docs-start pagination-css-vars
   --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+  --#{$prefix}pagination-label-padding-x: #{$pagination-label-padding-x}; // Boosted mod
   --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
-  --#{$prefix}pagination-padding-end: #{$pagination-padding-end}; // Boosted mod
   --#{$prefix}pagination-margin-y: #{$pagination-margin-y}; // Boosted mod
+  --#{$prefix}pagination-gap: #{$pagination-gap}; // Boosted mod
   --#{$prefix}pagination-margin-x-first-last: #{$pagination-margin-x-first-last}; // Boosted mod
+  --#{$prefix}pagination-item-max-width: #{$pagination-item-max-width}; // Boosted mod
   @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
   --#{$prefix}pagination-font-weight: #{$font-weight-bold}; // Boosted mod
   --#{$prefix}pagination-color: #{$pagination-color};
@@ -28,6 +30,7 @@
   --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
   --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
   --#{$prefix}pagination-icon: #{$pagination-icon}; // Boosted mod
+  --#{$prefix}pagination-icon-min-width: #{$pagination-icon-min-width}; // Boosted mod
   --#{$prefix}pagination-icon-size: #{$pagination-icon-size}; // Boosted mod
   --#{$prefix}pagination-icon-width: #{$pagination-icon-width}; // Boosted mod
   --#{$prefix}pagination-icon-height: #{$pagination-icon-height}; // Boosted mod
@@ -43,6 +46,7 @@
   position: relative;
   box-sizing: content-box; // Boosted mod
   display: flex; // Boosted mod
+  gap: var(--#{$prefix}pagination-gap); // Boosted mod
   align-items: center; // Boosted mod
   justify-content: center; // Boosted mod
   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
@@ -56,6 +60,7 @@
   // Boosted mod: embed icon as mask-image
   @include button-icon(
     var(--#{$prefix}pagination-icon),
+    var(--#{$prefix}pagination-icon-min-width),
     var(--#{$prefix}pagination-icon-size),
     $size: var(--#{$prefix}pagination-icon-width) var(--#{$prefix}pagination-icon-height) ,
     $selector: ".page-item:first-child .page-link, .page-item:last-child .page-link",
@@ -151,13 +156,16 @@
     }
   }
 
+  &:first-child .page-link,
+  &:last-child .page-link {
+    &:not([title]) {
+      --#{$prefix}pagination-padding-x: var(--#{$prefix}pagination-label-padding-x);
+    }
+  }
+
   &:first-child .page-link {
     margin-right: var(--#{$prefix}pagination-margin-x-first-last);
 
-    &:not(:empty) {
-      padding-right: var(--#{$prefix}pagination-padding-end);
-    }
-
     &::before {
       /* rtl:raw:
       transform: scaleX(-1);
@@ -166,10 +174,6 @@
   }
 
   &:last-child .page-link {
-    &:not(:empty) {
-      padding-left: var(--#{$prefix}pagination-padding-end);
-    }
-
     &::before {
       order: 1;
 
@@ -182,6 +186,10 @@
     margin-left: var(--#{$prefix}pagination-margin-x-first-last);
   }
 
+  &:not(:first-child):not(:last-child) .page-link {
+    max-width: var(--#{$prefix}pagination-item-max-width);
+  }
+
   @include media-breakpoint-down(sm) {
     @include pagination-max-items(4);
   }

scss/_variables.scss

@@ -1577,8 +1577,9 @@ $dropdown-dark-header-color:        $white !default; // Boosted mod
 // Pagination
 
 // scss-docs-start pagination-variables
-$pagination-padding-y:              null !default;
-$pagination-padding-x:              null !default;
+$pagination-padding-y:              .5625rem !default; // Boosted mod: instead of `null`
+$pagination-padding-x:              .8125rem !default; // Boosted mod: instead of `null`
+$pagination-label-padding-x:        1.125rem !default; // Boosted mod
 
 $pagination-font-size:              $font-size-base !default;
 
@@ -1614,15 +1615,21 @@ $pagination-transition:             $transition-focus !default;
 // Boosted mod: no $pagination-border-radius-lg
 
 // Boosted mod
-$pagination-padding-end:            1.125rem !default;
 $pagination-icon:                   var(--#{$prefix}chevron-icon) !default;
-$pagination-icon-size:              subtract($spacer * 2, calc(var(--#{$prefix}border-width) * 2)) !default; // stylelint-disable-line function-disallowed-list
+$pagination-icon-min-width:         .625rem !default;
+$pagination-icon-size:              1.125rem !default;
 $pagination-icon-width:             add(.5rem, 1px) !default;
 $pagination-icon-height:            subtract(1rem, 1px) !default;
+$pagination-gap:                    5px !default;
 
 $pagination-active-item-bg:         $primary !default;
 $pagination-active-item-color:      color-contrast($pagination-active-item-bg) !default;
 $pagination-active-item-border:     $pagination-active-item-bg !default;
+
+$pagination-item-max-width:         $spacer * .5 !default;
+// fusv-disable
+$pagination-padding-end:            1.125rem !default; // Deprecated in Boosted 5.3.2 for responsive pagination
+// fusv-enable
 // End mod
 // scss-docs-end pagination-variables
 

site/content/docs/5.3/components/pagination.md

@@ -30,8 +30,8 @@ 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>
+    <li class="page-item"><a class="page-link" href="#" title="Previous"><span class="visually-hidden">Previous</span></a></li>
+    <li class="page-item"><a class="page-link" href="#" title="Next"><span class="visually-hidden">Next</span></a></li>
   </ul>
 </nav>
 {{< /example >}}
@@ -139,7 +139,7 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
     <li class="page-item"><a class="page-link" href="#">8</a></li>
     <li class="page-item"><a class="page-link" href="#">9</a></li>
     <li class="page-item"><a class="page-link" href="#">10</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="Next"></a></li>
+    <li class="page-item"><a class="page-link" href="#" title="Next"><span class="visually-hidden">Next</span></a></li>
   </ul>
 </nav>
 {{< /example >}}

site/content/docs/5.3/migration.md

@@ -25,17 +25,43 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
 - **Orange navbar**
   - <span class="badge bg-warning">Warning</span> The minimizing behavior with `.header-minimized` is applied to the `<header>` instead of one of its children directly.
 
+- **Pagination**
+  - <span class="badge bg-warning">Warning</span> For accessibility reasons, pagination's variant with icons only has been slightly modified to ensure correct semantic for all assistive technologies. It might be a useful modification to propagate into your websites if you are using this variant.
+  ```diff
+  - <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>
+  + <li class="page-item"><a class="page-link" href="#" title="Previous"><span class="visually-hidden">Previous</span></a></li>
+  + <li class="page-item"><a class="page-link" href="#" title="Next"><span class="visually-hidden">Next</span></a></li>
+  ```
 ### Forms
 
 - <span class="badge bg-success">New</span> In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any.
 - <span class="badge bg-success">New</span> Labels related to mandatory form fields have been improved for better accessibility. A `<span class="visually-hidden"> (required)</span>` element has been added to ensure correct restitution by assistive technologies like screen readers. Please reflect these modifications into your websites.
 
 ### CSS and Sass variables
 
+- <details class="mb-2">
+    <summary><span class="badge bg-danger">Breaking</span> Deprecated CSS variables:</summary>
+    <ul>
+      <li><code>--bs-pagination-padding-end</code></li>
+    </ul>
+  </details>
+
+- <details class="mb-2">
+    <summary><span class="badge bg-danger">Breaking</span> Deprecated Sass variables:</summary>
+    <ul>
+      <li><code>$pagination-padding-end</code></li>
+    </ul>
+  </details>
+
 - <details class="mb-2">
     <summary><span class="badge bg-success">New</span> CSS variables:</summary>
     <ul>
       <li><code>--bs-accordion-btn-hover-bg</code></li>
+      <li><code>--bs-pagination-gap</code></li>
+      <li><code>--bs-pagination-icon-min-width</code></li>
+      <li><code>--bs-pagination-item-max-width</code></li>
+      <li><code>--bs-pagination-label-padding-x</code></li>
     </ul>
   </details>
 
@@ -46,6 +72,10 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
       <li><code>$accordion-dark-button-hover-bg</code></li>
       <li><code>$footer-accordion-active-color</code></li>
       <li><code>$footer-accordion-btn-hover-bg</code></li>
+      <li><code>$pagination-gap</code></li>
+      <li><code>$pagination-icon-min-width</code></li>
+      <li><code>$pagination-item-max-width</code></li>
+      <li><code>$pagination-label-padding-x</code></li>
     </ul>
   </details>