Merge pull request #3862 from alphagov/fix-summary-list-overlapping-l…

…inks Fix focus style being overlapped by summary action links
alphagov · Jun 27, 2023 · 15ba686 · 15ba686
2 parents d51c007 + 87b2519
commit 15ba686
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -253,6 +253,7 @@ This change was introduced in [pull request #3773: Omit the value attribute from
 We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 - [#3791: Refactor mobile menu button label/text handling](https://github.com/alphagov/govuk-frontend/pull/3791)
+- [#3862: Fix focus style being overlapped by summary action links](https://github.com/alphagov/govuk-frontend/pull/3862)
 
 ## 4.6.0 (Feature release)
 

diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -131,6 +131,15 @@
     }
   }
 
+  // Large groups of action links may wrap onto multiple lines. Because the link
+  // focus styles are applied outside of the link's bounding box, there are
+  // situations where the focus style on a link can be overlapped by subsequent
+  // links. We don't want this, so let's create a new stacking context on focus
+  // so the link always appears to be 'on top'.
+  .govuk-summary-list__actions-list-item .govuk-link:focus {
+    isolation: isolate;
+  }
+
   // No border on entire summary list
   .govuk-summary-list--no-border {
     .govuk-summary-list__row {