Merge pull request #5066 from alphagov/fix-pagination-text-alignment

Fix whitespace affecting text alignment in pagination block variant

CHANGELOG.md

@@ -4,6 +4,12 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ## Unreleased
 
+### Fixes
+
+We've made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#5066: Fix whitespace affecting text alignment in pagination block variant](https://github.com/alphagov/govuk-frontend/pull/5066)
+
 ## 5.4.1 (Fix release)
 
 ### Recommended changes

packages/govuk-frontend/src/govuk/components/pagination/_index.scss

@@ -151,7 +151,6 @@
     @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
     display: inline-block;
-    padding-left: govuk-spacing(6);
   }
 
   .govuk-pagination__icon {
@@ -175,37 +174,25 @@
   .govuk-pagination--block {
     display: block;
 
-    .govuk-pagination__item {
-      padding: govuk-spacing(3);
-      float: none;
-    }
-
     .govuk-pagination__next,
     .govuk-pagination__prev {
       padding-left: 0;
       float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
     }
 
     .govuk-pagination__next {
       padding-right: govuk-spacing(3);
-
-      .govuk-pagination__icon {
-        margin-left: 0;
-      }
     }
 
     // Only apply a border between prev and next if both are present
     .govuk-pagination__prev + .govuk-pagination__next {
       border-top: 1px solid $govuk-border-colour;
     }
 
-    // Reset both these elements to their inline default, both to ensure that
-    // the focus state for block mode "shrink wraps" text as expected
-    .govuk-pagination__link,
-    .govuk-pagination__link-title {
-      display: inline;
-    }
-
     // Set the after pseudo element to a block which makes the title visually
     // display as block level whilst programmatically being inline. We do this
     // to get around an NVDA quirk where adjacent block level elements are
@@ -216,24 +203,24 @@
     }
 
     .govuk-pagination__link {
+      padding-left: govuk-spacing(6);
       text-align: left;
 
-      &:focus {
-        // Apply focus styling to the label within the link as if it were being
-        // focused to get around a display issue with a focusable inline element
-        // containing a mixture of inline and inline-block level elements
-        .govuk-pagination__link-label {
-          @include govuk-focused-text;
-        }
-      }
-
       &:not(:focus) {
         text-decoration: none;
       }
     }
 
     .govuk-pagination__icon {
-      margin-right: govuk-spacing(2);
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: govuk-spacing(6) * -1;
+      float: left;
     }
   }
 }